【跨網域追蹤：實作血淚史】地雷、架構選擇、設定教學

Lucas Hsieh

Published in

AsiaYo Engineering

10 min readApr 21, 2018

最近 AsiaYo 內部專案剛好處理到跨網域追蹤（Cross Domain Tracking）問題，但發現官方文件、網路上的討論，並沒有整合的很清楚。

藉此次專案經驗，分享我們實際設計開發時碰到的地雷與問題，以及我們如何解決各種狀況。

什麼時候需要跨網域追蹤？

1.使用第三方金流服務

有些人是使用第三方金流服務，且付款頁並不 host 在自家網頁時（自站 → 第三方金流付款網頁 → 自站完成結帳頁）。

當上述狀況發生時，在 Google Analytics 裡面 Goal 的 source 大部分會變成金流付款網頁，造成資料錯亂（因為 GA 預設採用 non-direct last interaction）。

如果是上述情境，其實處理方式相對單純。可以在 Property 內設定 referral exclusion 即可。

2.同時經營多個不同網站互導流，想理解跨網站間的流量狀況

假設同時擁有兩個網站： abc.com 為發生轉換的主站、 xyz.com 是導流量的次網站

如果網站訪客從某個 source(source.com) 進入到次網站 xyz.com 、再由次網站 xyz.com 導流至主站 abc.com。

當沒有跨網域追蹤時，在 Google Analytics 來源中會顯示訪客是從次站 xyz.com 而來，但不知道最源頭是 source.com。

如果有了跨網域追蹤（如上圖），則可分析訪客最源頭到底是從何而來。接下來就要聊聊跨網域追蹤執行時，有哪些地雷與陷阱，又該如何因應。

*如果是 cross sub-domain tracking，Google Analytics 已經處理得很好了，不用擔心此議題。

一、跨網域追蹤架構地雷

第一個地雷是 Google Analytics 帳戶架構問題。跨網域追蹤第一個重要步驟是要設定 referral exclusion，在上述假設前提下，有兩種架構選擇：

選項一：共用 Property

主站 + 次站共用同一個追蹤代碼(& Property)，如下圖。

選項二：新增跨網域專用 Property

新增一個跨網域用的追蹤代碼(& Property) + 主站與次站另外都有獨立的追蹤代碼(& Property)，如下圖。

兩種選項中，選項一的缺點是，共用 Property 加上設定兩個網域將彼此排除 refferral。將無法有效理解兩邊彼此互相流動的狀況（只會顯示為 direct traffic），且會把原有 Property 的 cookie (clientId)資料用髒。

所以我們最後決定採用選項二：新增跨網域專用 Property。而選項二缺點是設定麻煩一些外，更有另一個隱藏地雷…。

二、「新增跨網域專用 Property」的地雷

在介紹地雷前，先帶大家認識一下 Google Analytics 重要的追蹤要素： clientId，clientId 的用途是 Google Analytics 寫入瀏覽器的 cookie 用來辨別訪客的重要依據。而 clientId 在 cookie 預設的 key 是 _ga 、而 value 長得像這樣：GA1.2.2055843333.1422402222。

clientId 就是最後兩段數字 2055843333.1422402222 ，前面一段是亂數產生、後面一段是訪客首次拜訪的 timestamp。

基本上 Google Analytics 處理跨網域追蹤，是用 cookie 方式。從 A 站(xyz.com)進入 B 站(abc.com)時，將 A 站的 clientId 放在 URL 上 (auto linker)，並在正式進入 B 網站時，將 A 網站的 clientId 覆寫到 B 網站的 clientId cookie。如下圖所示：

由於 Google Analytics tracker 預設 clientId 的 key 是 _ga，所以兩個 Property (舊有 GA property 和新增跨網域 GA property) cookie 會彼此一直互寫，資料會完全髒掉。

而解決方案其實很簡單，將新 cookieName 從預設的 key “_ga” 更改為其他的 key 即可(e.g., _ga2)，接下來章節會有實際教學。

三、實作設定教學 (Google Tag Manager + Google Analytics)

假設主站為 abc.com、導流站 xyz.com
abc.com 為 ecommerce 轉換發生地

*如果你對 Google Tag Manager 概念不熟，建議可先閱讀下方文章

如何用 Google Tag Manager 打造免費的 Data Collection x Streaming Data 架構

本次 Project 規劃、測試到上線大概花費 Developer x 1 + PM x 1 約莫 3~5 天時間（單純程式架構面，應該 1~2 個工作天內）。

medium.com

1.新增跨網域 Google Analytics Property

於 GA 開啟 ecommerce 功能
於 referral exclusion 輸入 abc.com, xyz.com
(非必要)新增一個 View 透過 Filter 強制顯示前綴網域名

網頁的路徑兩個網站有可能存在許多重覆路徑，會不好判讀，新增上面的 view 可避免此問題。

2.xyz.com(導流站) — Google Tag Manager 設定

Tracking ID = 新增跨網域 GA id
開啟 auto linker，allowLinker = true
啟動 auto linker 的目的地網域，auto link domain = abc.com
自動決定 cookieDomain，cookieDomain = auto
重新命名 clientId cookie key，cookieName = _ga2

3.abc.com (轉換主站)— Google Tag Manager 設定

類似前一步驟，只需要修改 auto link domain、並且要設定 ecommerce 轉換追蹤。

Tracking ID = 新增跨網域 GA id
開啟 auto linker，allowLinker = true
啟動 auto linker 的目的地網域，auto link domain = xyz.com
自動決定 cookieDomain，cookieDomain = auto
重新命名 clientId cookie key，cookieName = _ga2
設定 ecommerce 轉換追蹤

這邊也附上 analytics.js 作法的code example：

/* 基礎設定 */ga('create', {{googleAnalyticsId}}, 'auto', {name: '_ga2', cookieName: '_ga2', allowLinker: true});ga('_ga2.send', 'pageview');ga('_ga2.require', 'linker');ga('_ga2.linker:autoLink', ['xyz.com']);/* ecommerce 轉換設定 */ga('_ga2.require', 'ecommerce');

ga('_ga2.ecommerce:addTransaction', {
    'id': {{purchaseOrderId}},
    'revenue': {{purchaseRevenue}},
    'tax': {{purchaseTax}},
    'currency': {{purchaseCurrency}}
  });ga('_ga2.ecommerce:addItem', {
    'id': {{purchaseOrderId}},
    'name': {{purchaseRoomName}},
    'sku': {{purchaseHostId}},
    'currency': {{purchaseCurrency}}
  });
  
ga('_ga2.ecommerce:send');