跳到主要內容

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

Google Tag Manager 記錄錨點網址至 Google Analytics

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 歷史記錄狀態來觸發

GTM 設定內建變數 History Source

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

GTM 設定 popstate 觸發條件

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

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

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

GTM 設定 GA 的 page 欄位傳送新網址

這個網誌中的熱門文章

Google Doodles 中文版遊戲全蒐集

Google Doodles  塗鴉牆原本是在節慶或紀念日時,會在 Google 首頁臨時刊登的特別圖案,後來發展成動畫以及互動遊戲的形式,而且有些遊戲做的很用心很好玩!甚至還有直播主會特別開台遊玩。這裡蒐集了歷年有「中文」版本且支援手機遊玩的互動遊戲,have fun 👏 PAC-MAN 2025 萬聖節 推出時間:2025/10/30 遊戲說明:眾所皆知的 PAC-MAN 小精靈遊戲,全部由 8 個關卡,別忘記蒐集所有的物品 好玩程度:⭐⭐⭐⭐

分享 Google 日曆的中華民國 114 ~ 115 年 (2025 ~ 2025 休假行事曆也包含勞動節)

以下是 Google 日曆按照行政院人事行政總處公告的中華民國 115 年 (2026) 政府行政機關辦公日曆表製成的,並且再加入 5/1 勞動節。 請使用此 鏈接開啟 Google 日曆 點擊左下角的《新增至 Google 日曆》匯入,另有 iCAL 格式 提供其他應用程式匯入。

推薦 Visual Studio Code 前端網頁設計的擴充套件(延伸模組 Extensions)

以下整理推薦幾個 Visual Studio Code (VSCode) 前端網頁設計開發會使用到的擴充套件(延伸模組 Extensions)這些都是我使用過後覺得必備也常用的套件,適合 Html, Sass/SCSS, JavaScript 網頁設計語法開發!