跨網域評估

本指南將說明如何使用 analytics.js 評估多個網域的事件。

總覽

analytics.js 程式庫會使用不重複的用戶端 ID 來判斷使用者是新使用者還是回訪者。如果將含有相符用戶端 ID 的命中資料傳送至同一個資源,系統會將該使用者視為回訪。

根據預設,用戶端 ID 會儲存在瀏覽器的 Cookie 中,這表示只有相同網域的網頁才能存取用戶端 ID。如要為特定使用者在不同網域中追蹤相同的用戶端 ID,請使用跨網域追蹤。

如要跨網域共用用戶端 ID,可以將用戶端 ID 做為查詢參數附加至網址,以指向目前網域 (來源網域) 指向待評估的目的地網域。當使用者按一下來源網域中的連結或提交表單,並前往目標網域時,到達網頁上的程式碼可以透過網址讀取用戶端 ID 來存取用戶端 ID。

在來源網域取得用戶端 ID

如要擷取來源網域中的用戶端 ID,請使用 get 方法:

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

在來源網域取得用戶端 ID 後,您就可以將其加入指向目標網域的連結。

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

在目標網域中設定用戶端 ID

您可以在 create 指令中指定用戶端 ID 欄位,藉此告知目標網域上的追蹤程式物件要使用哪個用戶端 ID:

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

如果目標網域已有用戶端 ID,這個方法會覆寫該用戶端 ID。

偵測網址共用

在網址中傳遞用戶端 ID 時,可能會導致使用者共用網址,而使用者分享的網址可能屬於他人的用戶端 ID。

如要避免這個問題,其中一種方法是在用戶端 ID 後方附加時間戳記。這樣一來,您就能偵測網址的原始建立時間;如果已過久,會將用戶端 ID 視為無效。除了時間戳記以外,您還可以附加使用者代理程式字串、其他瀏覽器/裝置專用的中繼資料。而在目標網域上,如果中繼資料不符,就會知道用戶端 ID 來自其他使用者。

忽略自我參照連結網址

如果網頁的文件參照網址來自與資源「排除參照連結網址」清單項目相符的主機名稱,系統就會建立新的參照連結網址廣告活動。

根據預設,「參照連結網址排除」清單只會包含您初次建立資源時提供的網域。為避免系統跨網域瀏覽時產生新的參照連結網址廣告活動,您必須在「參照連結網址排除」清單中為每個要評估的網域新增項目。

iframe

上述技巧需要在 analytics.js 載入後執行 JavaScript 程式碼。由於 <iframe> 元素通常在載入 analytics.js 前就已存在於網頁中,因此通常不會選擇將用戶端 ID 附加至 iframe 來源參數中的網址。

如要解決這個問題,您可以將 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 中對網頁使用逾時,處理上層網頁速度緩慢或無法傳送用戶端 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);