用 Google Tag Manager 讓 Google Analytics 記錄含有 hash 錨點的網址

Google Analytics(GA) 預設是不記錄 hash 錨點網址的，因為錨點預設動作只是在單個頁面中快速跳到相對應位置而已，實際上頁面的內容沒有變動。所以需要記錄錨點網址時，應該是在有 AJAX 動作的錨點網址才會有意義，即透過 Javascript 抓取網址 hash 段，來觸發變更網頁內容的方式。如果還是要記錄一般錨點的點擊數據，那你應該要使用事件 event 的方式來收集。

為了補上缺少的 hash 網址段，要使用 JavaScript 的「window.location.hash」取得錨點段，同時前方要再補足網址路徑段「window.location.pathname」跟參數段「window.location.search」再使用 GA 函式送出

▽ 舊版 analytics.js

ga('send', 'pageview', window.location.pathname + window.location.search + window.location.hash);

▽ 新版 gtag.js

gtag('config', '你的追蹤ID', { 'page_path': window.location.pathname + window.location.search + window.location.hash });

如果是使用 Google Tag Manager(GTM) 送出含有 hash 段網址給 GA 時，則要先到選單的《變數》開啟內建變數的「History Source」來偵測 popstate 歷史記錄狀態來觸發

接著再到選單的《觸發條件》新增一個「記錄變更」的觸發條件，讓 「History Source」等於「popstate」即可，這裡沒用「hashchange」是因為 gtm.historyChange 不會用 hashchange 進行事件觸發，改用 popstate 才會正常。

保存後將這個觸發條件加入到 GA 代碼中，當使用者是進入含有 hash 網址開啟網頁時會使用「popstate 事件」觸發。接下來要使用 JavaScript 抓取含有 hash 段的網址傳送至 GA 代碼中，先到選單的《變數》新增一個「自訂 JavaScript」的變數，並輸入以下內容後保存。

function() {
  return window.location.pathname + window.location.search + window.location.hash;
}

回到 GA 代碼中加入一個「page」欄位名稱，並把剛剛新增的 JavaScript 變數代入值欄位中就完成啦！最後不要忘記使用 GTM 的預覽功能，檢查有沒有正常觸發、送出的變數有沒有正確再來發佈。