跨網域評估

本指南說明如何使用 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);