Elementor GTM 點擊追蹤：精準定位 CSS 選取器教學

網站上線後，最常遇到的問題就是想知道特定的按鈕或連結到底有沒有人點擊，尤其是使用 Elementor 製作的彈窗（Popup）或自定義頁尾。如果只是簡單設定「所有連結點擊」，數據會混雜在一起，難以判斷使用者是在哪個情境下觸發行為，導致數據分析失去參考價值。

精準追蹤的核心原理：兩步驟鎖定

要讓 GTM（Google Tag Manager）穩定且精準地抓取點擊事件，不能只依賴單一的特徵，必須遵循「範圍錨點」加上「目標特徵」的邏輯。這就像是在地址中先寫出城市，再標註門牌號碼，能有效避免不同區塊中相同類型的按鈕產生誤判。

步驟一：尋找範圍錨點（Scope Anchor）

「錨點」是 CSS 選取器的前半部分，用來定義行為發生的空間。在 Elementor 中，常見的狀況分為彈窗與一般元件：

• Elementor 彈窗（Popup）： 彈窗通常是獨立的層級。在網頁上觸發彈窗後，於背景空白處按右鍵選擇「檢查」，尋找最外層具有 id 且開頭為 elementor-popup-modal-XXXX 的 div。選取器寫法為 #elementor-popup-modal-XXXX。
• 頁面內元件（Widget）： 針對頁首或頁尾元件，Elementor 會為每個 Widget 生成唯一的 data-id。在目標元件上按右鍵檢查，往上查找父層 div，找到其 data-id="XXXXXX" 的屬性。選取器寫法為 [data-id="XXXXXX"]。

步驟二：定義目標特徵與比對策略

定義「追蹤誰」時，比對策略決定了追蹤的穩定度。實務上建議根據連結性質選擇不同的運算子：

• 外部社群/客服連結： 使用 *=（包含）。例如 a[href*="facebook.com"]。這能應對網址後方的 UTM 追蹤參數或協議（http/https）的變化，是最推薦的專業做法。
• 特定內部連結： 使用 =（等於）。適用於絕對精準、不容許變動的路徑，如 a[href="/contact/"]。
• 功能性連結： 追蹤行為類型，如電話 a[href*="tel:"] 或郵件 a[href*="mailto:"]。

步驟三：組合選取器並在 GTM 建立觸發條件

將步驟一的錨點與步驟二的特徵組合，中間以空格分隔，代表「在該錨點範圍內的特定元件」。

// 範例 1：追蹤編號 1465 的彈窗裡的撥打電話點擊
#elementor-popup-modal-1465 a[href*="tel:"]

// 範例 2：追蹤特定 ID 元件裡的 FB 粉專點擊
[data-id="303eb12"] a[href*="facebook.com"]

接著在 GTM 進行設定：

1. 觸發條件類型：選擇「點擊 – 僅連結」。
2. 啟動時機：選擇「部分的連結點擊」。
3. 啟用條件：選擇 Click Element、運算子選 符合 CSS 選取器、最後貼上組合好的選取器。

實作注意事項與常見坑位

在進行 GTM 埋碼實務時，以下細節常是導致追蹤失敗的原因，請務必確認：

• 空格的含意： CSS 選取器中間的空格代表「後代」。如果空格漏掉或放錯位置，選取器將無法正確對齊目標。
• 屬性優先權： 在 Elementor 中，優先使用 data-id 而非 class。因為 class 可能會因為主題更新或調整樣式而改變，但 data-id 在該頁面結構中相對穩定。
• 彈窗 ID 的變動： 如果刪除彈窗並重新建立，即使內容一樣，elementor-popup-modal-XXXX 的編號也會更換，必須同步更新 GTM 選取器。
• 預覽模式驗證： 設定完成後，一定要使用 GTM 的「預覽模式（Preview）」親自點擊一次，確認該觸發條件（Trigger）狀態為「Fired」，才算真正成功。

看不懂沒關係，照做就能用

以上的原理看不懂沒關係，只要照著下面的步驟操作就能直接套用：

純 GTM 操作步驟

本教學涉及純 GTM 設定，不需要安裝 FluentSnippets，請直接在 GTM 後台進行以下操作：

1. 在網頁前端對著要追蹤的按鈕按右鍵，點擊「檢查」以確認其父層容器。
2. 記下彈窗 ID（例如 #elementor-popup-modal-1465）或元件 ID（例如 [data-id="303eb12"]）。
3. 進入 Google Tag Manager (GTM) 後台，點擊「觸發條件」>「新增」。
4. 觸發條件類型選擇「點擊 – 僅連結」。
5. 啟動時機選擇「部分的連結點擊」。
6. 條件欄位選擇「Click Element」，運算子選擇「符合 CSS 選取器」。
7. 在右側填入組合好的選取器代碼（例如：#elementor-popup-modal-1465 a[href*="tel:"]）。
8. 儲存並發佈 GTM 設定，並使用預覽模式確認點擊時是否成功觸發。