クロスドメイン測定

このガイドでは、analytics.js を使用して、複数のドメイン全体でイベントを測定する方法について解説します。

概要

analytics.js ライブラリは、固有のクライアント ID を使用して、ユーザーが新規ユーザーかリピーターかを判断します。一致するクライアント ID のヒットが同じプロパティに送信済みであれば、ユーザーはリピーターとして認識されます。

クライアント ID は、デフォルトでブラウザの Cookie に格納されているため、同じドメインのページからのみアクセスできます。特定のユーザーについて、複数のドメインで同じクライアント ID を使用している場合、それらの ID をトラッキングするにはクロスドメイン トラッキングを使用します。

複数ドメインでクライアント ID を共有するには、現在のドメイン（ソースドメイン）から、測定対象のリンク先ドメインを参照している URL に、クエリ パラメータとしてクライアント ID を追加します。ユーザーがリンクをクリックして、またはソースドメインからフォームを送信してリンク先ドメインに移動する際、リンク先ページのコードによって URL からクライアント ID が読み取られることでアクセスできます。

ソースドメインのクライアント ID の取得

ソースドメインのクライアント ID を取得するには、get メソッドを使用します。

ga(function(tracker) {
  var clientId = tracker.get('clientId');
});

ソースドメインのクライアント ID を取得したら、リンク先ドメインを参照するリンクに追加できます。

<a href="https://destination.com/?clientId=XXXXXX">destination.com</a>

リンク先ドメインでのクライアント ID の設定

使用するクライアント ID をリンク先ドメインのトラッカー オブジェクトに指示するには、create コマンドでクライアント ID を指定します。

ga('create', 'UA-XXXXX-Y', 'auto', {
  'clientId': getClientIdFromUrl()
});

リンク先ドメインにすでにクライアント ID が存在する場合、そのクライアント ID はこの操作によって上書きされます。

URL 共有の検出

URL にクライアント ID を渡す際には、ユーザーが URL を共有するときに、他のユーザーが使用しているクライアント ID を含む URL を共有してしまうという問題が潜在しています。

このような問題は、クライアント ID にタイムスタンプを追加することで回避できます。タイムスタンプを使用すると、URL が最初に作成された日時を検出できるため、作成から長時間経過している場合はそのクライアント ID が無効と認識されます。タイムスタンプの他に、ユーザー エージェント文字列、その他のブラウザ、またはデバイス固有のメタデータを追加することができます。このような追加によって、リンク先ドメインでメタデータが一致しない場合、そのクライアント ID は他のユーザーのものだということがわかります。

自己参照を除外する

ページのドキュメント参照が、プロパティの参照元除外リストのいずれのエントリとも一致しないホスト名からのものである場合、必ず新しい参照キャンペーンが作成されます。

デフォルトでは、参照元除外リストにはウェブ プロパティを最初に作成したときに指定したドメインのみが含まれています。ユーザーが複数のドメイン間を移動したときに新しい参照キャンペーンが作成されるのを防ぐためには、測定対象とする各ドメインのエントリを参照元除外リストに追加する必要があります。

iframe

上記の方法を実行するには、analytics.js のロード後に実行する JavaScript コードが必要です。通常は、analytics.js のロード前に <iframe> 要素がページに存在するため、多くの場合に iframe のソース パラメータの URL にクライアント ID を追加できません。

この問題を解決するには、iframe 内のページを設定し、クライアント ID データが親ページから受信されるまでトラッカーの作成を遅らせます。親ページでは、postMessage を使用して、そのクライアント ID が iframe ページに送信されるように設定します。

source.com の親ページコードの例を次に示します。

<iframe id="destination-frame" src="https://destination.com"></iframe>

<script>
ga('create', 'UA-XXXXX-Y', 'auto');
ga(function(tracker) {
  // Gets the client ID of the default tracker.
  var clientId = tracker.get('clientId');

  // Gets a reference to the window object of the destionation iframe.
  var frameWindow = document.getElementById('destination-frame').contentWindow;

  // Sends the client ID to the window inside the destination frame.
  frameWindow.postMessage(clientId, 'https://destination.com');
});
</script>

destination.com でホストされる iframe でメッセージを受信するコードを次に示します。

window.addEventListener('message', function(event) {
  // Ignores messages from untrusted domains.
  if (event.origin != 'https://destination.com') return;

  ga('create', 'UA-XXXXX-Y', 'auto', {
    clientId: event.data
  });
});

analytics.js が親ページにロードされないために、iframe のページがクライアント ID を受信できない可能性もあります。このような状況の対応方法は、クライアント ID が一致することの重要性の違いによって異なります。

クライアント ID の一致を確認できたときにデータを取得することだけが目的であれば、上記のコードで十分です。親ページからクライアント ID を受信するかどうかにかかわらず、iframe のページ上のデータを取得したい場合は、フォールバックを追加する必要があります。

次のコードは、iframe のページでタイムアウトを使用することで、親ページからのクライアント ID 送信が遅いまたは送信されない場合の対応方法を示しています。

// Stores whether or not the tracker has been created.
var trackerCreated = false;

function createTracker(opt_clientId) {
  if (!trackerCreated) {
    var fields = {};
    if (opt_clientId) {
      fields.clientId = opt_clientId;
    }

    ga('create', 'UA-XXXXX-Y', 'auto', fields);
    trackerCreated = true;
  }
}


window.addEventListener('message', function(event) {
  // Ignores messages from untrusted domains.
  if (event.origin != 'https://destination.com') return;

  // Creates the tracker with the data from the parent page.
  createTracker(event.data);
});


// Waits for three seconds to receive the client ID from the parent page.
// If that doesn't happen, it creates the tracker as normal.
setTimeout(createTracker, 3000);