gtag.js を使用した単一ページ アプリケーションのトラッキング

このガイドでは、gtag.js を使用して、従来のようにページ全体を読み込まず、コンテンツを動的に読み込むサイトのページ トラッキングを行う方法について説明します。

概要

単一ページ アプリケーション(SPA)とは、最初にページを読み込むときに、サイト全体の移動に必要なリソースをすべて読み込んでおくウェブ アプリケーションまたはウェブサイトのことです。ユーザーがリンクをクリックしてページを操作すると、以降はコンテンツが動的に読み込まれます。このアプリケーションは通常、アドレスバーの URL を更新することで従来のページ移動をエミュレートしますが、最初の読み込み以降にページ全体の読み込みがリクエストされることはありません。

トラッキング スニペットは、ユーザーが新しいページを読み込むたびに実行されるため、従来のウェブサイトでは正常に動作しますが、SPA の場合、新しいページを読み込むときに、ページ全体を読み込むのではなく新しいページ コンテンツを動的に読み込むため、gtag.js スニペット コードが実行されるのは一度だけとなります。つまり、以降のページビュー(仮想ページビュー)は、新しいコンテンツが読み込まれるたびに手動でトラッキングする必要があります。

仮想ページビューのトラッキング

コンテンツが動的に読み込まれてアドレスバーの URL が更新された時点で、gtag.js で保存されているページ URL も更新する必要があります。

page_path を更新するには、page_path パラメータの値を指定して、プロパティの config を変更します。

gtag('config', 'GA_TRACKING_ID', {'page_path': '/new-page.html'});

page_path に新しい値を追加すると、そのプロパティに送られるすべての後続のイベントにその値が使用されます。

同じリソースの複数の URL を処理する

一部の SPA では、コンテンツを動的に読み込む際に URL のハッシュ部分だけが更新されます。このとき、複数のページパスが同じリソースを示すことになる場合があります。そのような場合は、正規の URL を選択して、あとはその page_path の値だけを Google アナリティクスに送信することをおすすめします。

たとえば、以下のいずれかの URL から会社概要ページにアクセスできるウェブサイトの例を考えてみましょう。

  • /about
  • /#/about
  • /home/#/about

レポートの重複を避けるには、これらのページをすべて page_path/about でトラッキングしてください。