このページでは、従来のようにページ全体を読み込まずコンテンツを動的に読み込むサイトの、gtag.js を使用したページ測定方法について説明します。
概要
シングルページ アプリケーション（SPA）とは、最初にページを読み込むときに、サイト全体の移動に必要なリソースをすべて読み込んでおくウェブ アプリケーションまたはウェブサイトのことです。ユーザーがリンクをクリックしてページを操作すると、以降はコンテンツが動的に読み込まれます。このアプリケーションは通常、アドレスバーの URL を更新することで従来のページ移動をエミュレートしますが、別個にページ全体の読み込みがリクエストされることはありません。
Google タグは、ユーザーが新しいページを読み込むたびに実行されるため、通常のウェブサイトでは正常に動作しますが、SPA の場合、新しいページを読み込むときに、ページ全体を読み込むのではなく新しいページ コンテンツを動的に読み込むため、gtag.js スニペット コードが実行されるのは一度だけとなります。つまり、以降のページビュー（仮想ページビュー）は、新しいコンテンツが読み込まれるたびに手動で測定する必要があります。
仮想ページビューの測定
コンテンツが動的に読み込まれてアドレスバーの URL が更新された時点で、gtag.js で保存されているページ URL も更新する必要があります。このとき、サイト上のアドレス変更をページビューとして測定することもできます。
gtag.js レポートのパスを設定するには、set コマンドを使用して、page_path パラメータの値を指定します。
gtag('set', 'page_path', page_path);
gtag('event', 'page_view');
例:
gtag('set', 'page_path', '/new-page.html');
gtag('event', 'page_view');
page_path に新しい値を追加すると、そのプロパティに送られるすべての後続のイベントにその値が使用されます。
同じリソースの複数の URL を処理する
一部の SPA では、コンテンツを動的に読み込む際に URL のハッシュ部分だけが更新されます。このとき、複数のページパスが同じリソースを示すことになる場合があります。そのような場合は、正規の URL を選択して、後はその page_path の値だけを Google アナリティクスに送信することをおすすめします。
たとえば、以下のいずれの URL からでも会社概要ページにアクセスできるウェブサイトの例を考えてみましょう。
/about/#/about/home/#/about
レポートの重複を避けるには、これらのページをすべて page_path の /about で測定してください。