単一ページ アプリケーションのトラッキング

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

概要

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

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

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

コンテンツが動的に読み込まれてアドレスバーの URL が更新された時点で、トラッカーに保存されているデータも更新する必要があります。

トラッカーを更新するには、次のように set コマンドを使用して page フィールドに新しい値を指定します。

ga('set', 'page', '/new-page.html');

page フィールドに新しい値を設定した後に送信されるヒットでは、新しく設定された値が使用されます。ページビューを記録するには、トラッカーを更新した直後にページビュー ヒットを送信します。

ga('set', 'page', '/new-page.html');
ga('send', 'pageview');

send コマンドを使用してページビューのヒットを送信する際に、3 番目のパラメータとして任意指定の page フィールドを追加することも技術的には可能ですが、SPA の場合は、この方法で page フィールドを渡すことはおすすめできません。理由としては、send コマンドで渡されるフィールドはトラッカーには設定されず、現在のヒットだけに適用されるからです。ページビュー以外のヒット(イベントやソーシャル インタラクションなど)は作成された時点でトラッカーに設定されていた page の値に関連付けられてしまうため、トラッカーが更新されないと、そのようなヒットがアプリケーションから送信された場合に問題が発生します。

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

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

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

  • /about.html
  • /#about.html
  • /home.html#about.html

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

重要なポイント

ドキュメントの参照を更新しない

create コマンドを使ってトラッカー オブジェクトを作成すると、document.referrer の値はトラッカーの referrer フィールドに格納されます。ページ全体を読み込まない SPA の場合、referrer フィールドの情報は更新されません。

ですが、ページビューのヒットを送信する前に手動で referrer フィールドを更新する必要はありません。Google アナリティクスでは、適切なナビゲーション パスを自動的に判断できます。

ドキュメントの場所を更新しない

トラッカーでは referrer フィールドに document.referrer を使用する場合と同様、location フィールドに document.location を使用します。そのため、キャンペーン データやその他のメタデータがクエリ パラメータの形で URL の末尾に追加されることがあります。

Google アナリティクスのチェック対象のキャンペーン データやその他のメタデータが更新されると、現在のセッションが終了して新しいセッションが開始される場合があります。この問題を回避するには、SPA で仮想ページビューをトラッキングする際に、location フィールドを更新せずに、page フィールドを使用してください。

新しいトラッカーを作成しない

JavaScript トラッキング スニペットが従来のウェブサイトに対して行う動作をエミュレートする目的で、単一ページ アプリケーションで新しいトラッカーを作成しないでください。このようなエミュレートを行うと、前述したように、不適切な参照 URL やキャンペーン データが送信されてしまう場合があります。