GA4 數據太亂？利用 Google 代碼 (Google Tag) 解決目錄錨點導致流量分散的問題

在經營 WordPress 部落格時，為了提升使用者體驗（UX）和 SEO，我們通常會安裝目錄外掛（如 Elementor TOC 或 LuckyWP）。然而，這也帶來了一個副作用：在 Google Analytics 4 (GA4) 報表中，網址後方常會帶有 #elementor-toc__heading-anchor 等字樣。

這會導致原本是同一篇文章的數據，被拆分成好幾列，導致曝光量歸算錯誤。今天這篇文章就教大家如何透過 Google Tag Manager (GTM) 快速修復這個問題。

為什麼會出現網址帶有「#」號的流量？

網址中 # 後方的內容稱為「網頁片段（Fragment）」。它的作用是讓瀏覽器自動捲動到頁面的特定位置（錨點）。

預設情況下，GA4 有時會將這些帶有不同錨點的 URL 視為不同的網址，造成以下困擾：

• 流量不集中：主文章的點擊與曝光被分散。
• 報表雜亂：在「網頁和畫面上」報表看到一堆碎裂的網址。
• 分析困難：難以一眼看出哪篇文章真正最受歡迎。

解決方案：透過 GTM 自動「清洗」網址

我們要做的原理很簡單：在數據傳送給 GA4 之前，先將網址中 # 以後的東西全部切掉。

第一步：建立自訂 JavaScript 變數

首先，我們需要讓 GTM 具備「過濾網址」的能力。

1. 進入 GTM 容器，點選 「變數 (Variables)」 > 「新增」。
2. 命名為：CJS - Clean URL (No Fragment)。
3. 變數類型選擇 「自訂 JavaScript」。
4. 貼入以下程式碼：

function() {
  // 抓取目前網址並以 # 分割，只取第一部分
  return window.location.href.split('#')[0];
}

第二步：修改 Google 代碼 (Google Tag)

接著，將這個變數套用到您的 GA4 核心代碼中。

1. 進入 GTM 「代碼 (Tags)」，找到類型為 「Google 代碼」 的標記。
2. 展開 「設定設定 (Configuration settings)」 區塊。
3. 點擊 「新增參數」：
   • 設定參數：輸入 page_location (這是 GA4 辨識網址的固定參數名)。
   • 值：選擇剛才建立的變數 {{CJS - Clean URL (No Fragment)}}。
4. 點擊儲存。

小提醒：如果您的 GTM 觸發條件是預設的 Initialization - All Pages，設定到這裡就完成了！

如何驗證設定是否成功？

在發布（Submit）之前，請務必使用 GTM 的 「預覽 (Preview)」 模式：

1. 輸入一個帶有錨點的測試網址（例如：your-post/#anchor-1）。
2. 在標籤總管中點擊 「Google Tag」 事件。
3. 查看 「Values」 或 「Parameters」 頁籤，確認 page_location 顯示的網址是否已經沒有 # 號。