OJapp Tips
· PWA · EN

PWAのホーム画面起動をアクセス解析する方法｜UTMだけでは分からない再訪を計測

PWAがホーム画面のアイコンから起動された回数をアクセス解析する方法を解説します。UTMパラメータだけでは区別しにくいホーム画面からの再訪を、display-mode: standaloneで判定し、GA4のカスタムイベントとして計測する実装例を紹介します。

目次

PWAをホーム画面に追加してもらったあと、本当にそこから再訪されているのか。

これ、普通のアクセス解析だけを見ていると意外と分かりません。

ページビューは増えていても、Google検索から来たのか、ブックマークなのか、ホーム画面のアイコンを押して戻ってきたのかが混ざってしまいます。

そこで使えるのが、前の記事でも使った display-mode: standalone の判定です。ホーム画面からPWAとして起動している時だけ、専用のイベントを送るようにすれば、通常のアクセスとは分けて計測できます。

UTMだけではホーム画面起動を正確に分けにくい

アクセス元を分ける方法として、まず思い浮かぶのがUTMパラメータです。

Text
https://example.com/?utm_source=homescreen&utm_medium=pwa

これをPWAの start_url に入れておけば、ホーム画面から起動したアクセスへ印を付けることはできます。

ただし、UTMはあくまでURLに付いている情報です。

そのURLがコピーされたり、ブラウザから直接開かれたりすれば、PWA起動ではないアクセスにも同じUTMが付きます。

逆に、PWA内部で別ページへ移動した後のアクセスには、最初のUTMがそのままURLへ付いているとは限りません。

つまりUTMは「どのURLから入ったか」を見るには便利ですが、今このページがホーム画面からPWAとして動いているかを直接判定しているわけではありません。

アッピン
UTMは「URLについた名札」、standalone判定は「今どう開かれているか」の確認だよ。似てるけど役割が違う👻

ホーム画面起動はstandaloneで判定する

基本になる判定はこれです。

JavaScript
const isPWA =
  window.matchMedia('(display-mode: standalone)').matches ||
  window.navigator.standalone === true;

display-mode: standalone に一致しているかを確認し、iPhone向けに navigator.standalone も合わせて見ています。

この判定を使えば、通常のブラウザ表示と、ホーム画面側のPWA表示を分けられます。

実際にPWA LABでも、通常のWeb表示では WEB、standalone状態では PWA と画面上へ表示する形で確認してきました。

判定そのものについては、PWAの状態を確認する方法｜MODE・Service Worker・Installableの意味でも紹介しています。

GA4へホーム画面起動イベントを送る

Google Analytics 4を使っているなら、standalone判定がtrueの時だけカスタムイベントを送れば分かりやすいです。

JavaScript
const isPWA =
  window.matchMedia('(display-mode: standalone)').matches ||
  window.navigator.standalone === true;

if (isPWA && typeof gtag === 'function') {
  gtag('event', 'pwa_home_launch', {
    page_path: location.pathname,
    page_title: document.title
  });
}

これでGA4側には、

Text
pwa_home_launch

というイベントが送られます。

通常のブラウザから開いた時はイベントを送らず、PWAとしてstandaloneで動いている時だけ送ります。

これならページビューとは別に、ホーム画面を入口として使われたアクセスを確認できます。

ただし、そのままだとページ移動でもイベントが増えることがある

ここは実装するときに注意したいところです。

先ほどのコードをサイト内の全ページへ入れると、PWA内でページを移動するたびにJavaScriptが実行され、pwa_home_launch が送られる可能性があります。

でも本当に知りたいのが「ホーム画面のアイコンから起動された回数」なら、サイト内ページ移動まで全部起動回数として数えるのは違います。

簡単な対策として、1回の利用中は一度だけ送る方法があります。

JavaScript
const isPWA =
  window.matchMedia('(display-mode: standalone)').matches ||
  window.navigator.standalone === true;

const alreadyTracked =
  sessionStorage.getItem('pwa_launch_tracked');

if (isPWA && !alreadyTracked && typeof gtag === 'function') {
  gtag('event', 'pwa_home_launch', {
    page_path: location.pathname,
    page_title: document.title
  });

  sessionStorage.setItem('pwa_launch_tracked', '1');
}

これなら同じセッション中にページを移動しても、何度もイベントを送るのを抑えられます。

ただし、これも「OSが記録している厳密なアプリアイコンタップ回数」を取得しているわけではありません。

standalone状態で始まったWeb利用を、Web側から計測していると考えるのが正確です。

ページごとに計測すると1P1Aとも相性がいい

ホーム画面起動を計測する時、イベントと一緒に page_path を送っておくとかなり面白くなります。

Text
gtag('event', 'pwa_home_launch', {
  page_path: location.pathname,
  page_title: document.title
});

例えば、

といった違いが見えてきます。

これは、ページ単位でホーム画面へ置く1P1A（One Page. One App.）とも相性がいい考え方です。

単純なPVだけでは「どのページがホーム画面に残す価値を持っているか」は分かりにくいですが、ホーム画面起動をページ別に見ると、そのページが再訪の入口として実際に使われているかを確認できます。

PVとホーム画面起動は意味が違う

例えば同じ100PVでも、意味はかなり違います。

指標分かること
Page Viewページが表示された回数
流入元検索・SNS・参照サイトなど、どこから来たか
UTM指定したキャンペーンやURL経由のアクセス
PWA Home Launchstandalone状態でホーム画面側から利用された回数

検索から100回来たページと、ホーム画面から100回開かれたページでは、ユーザーとの関係がかなり違います。

後者は、一度そのページをホーム画面へ残し、あとから自分で戻ってきている可能性があります。

私はPWAを作っていく中で、PVだけを見るより**「ホーム画面が本当に再訪入口になっているか」**を見る方が、PWAの価値を測るには自然だと感じるようになりました。

自前APIへ送ればGA4を使わなくても計測できる

GA4を使わず、自分のAPIへ直接記録することもできます。

Text
if (isPWA) {
  fetch('/api/pwa-launch', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      path: location.pathname,
      timestamp: Date.now()
    })
  });
}

サーバー側で記録すれば、独自のダッシュボードを作ったり、ページ別・OS別に集計したりできます。

OJapp PROでも、この考え方を発展させてHome Screen Launchesを計測しています。通常のアクセス解析ではなく、ホーム画面という入口に焦点を当てて「そこから戻ってきたか」を見るための指標です。

ホーム画面を単なるアイコン置き場ではなく再訪導線として考える考え方については、ホーム画面マーケティングとは？PWAで「ページを届ける」という新しいWeb戦略でも詳しく書いています。

個人を特定しなくても十分使える

ホーム画面起動を分析するからといって、必ずしも「誰が開いたか」まで記録する必要はありません。

例えば、

程度でも、「ホーム画面という入口が実際に使われているか」を見るにはかなり役立ちます。

むしろPWAの再訪分析では、まずホーム画面に置かれたあと、本当にそこから戻ってきているのかが分かれば十分なケースも多いと思います。

ホーム画面は「置かれた数」より「戻ってきた数」を見たい

PWAをホーム画面へ追加してもらうと、どうしてもインストール数のような数字を知りたくなります。

でも個人的には、それ以上に重要なのがその後です。

ホーム画面に置かれても、一度も開かれなければ入口としては機能していません。

逆に、追加された数が少なくても、何度もそこから起動されているなら、そのページはホーム画面に残る価値を持っています。

UTMで「どこから来たか」を見る。

PVで「何回見られたか」を見る。

そしてstandalone判定で、「ホーム画面から戻ってきたか」を見る。

PWAをホーム画面という再訪導線として使うなら、この3つは分けて考えた方が分かりやすいです。

ホーム画面へ追加できるだけで終わらせず、その入口が本当に使われているかまで見えるようになると、PWAの運用はかなり面白くなってきます。

PWAはホーム画面に追加してもらってからが本番｜再訪されるWebアプリの作り方

PWAはホーム画面に追加できたら完成ではありません。本当に重要なのは、そのアイコンから再訪してもらうこと。ホーム画面起動の判定、専用UI、限定案内、アクセス解析まで、追加された後のPWA設計をわかりやすく解説します。

この記事を書いた人
おじゃち

OJapp代表 WPプラグインPWAマーケティング・OnePage.OneApp.(1P1A)・ホーム画面名刺＆SNSのPetal・その他OJappToolsなどを開発。PWA・ホーム画面・Safari挙動・軽量Web体験を中心に、実験しながらWebアプリを開発しています。

← 記事一覧へ戻る