本簡報以 16:9 橫向為主
請旋轉手機
或改用平板 / 桌機觀看
三小時,把網頁骨架讀成可追蹤的選擇器,
把每一次點擊變成 GA4 報表上能看的事件。
裝代碼五分鐘,
讀懂 DOM 與 Click Element 才是真功夫。
不求把 GA4 玩到精,求明天就能上一張代碼。
全站 Page View,
是後面所有事件能跑起來的前提。
頁面瀏覽(Page View)是所有追蹤的底層事件,
沒有它,後續所有事件都會失去比較基準。
這是整個 Part 2 唯一一張需要手動輸入 G-XXXXXXXX 的代碼,
之後其他事件代碼都用選的就好。
命名 → 設定 → 觸發,每一步都有對應位置——按 → 逐步點亮。
不要設定完就直接「提交發布」。
每張代碼上線前,都先進預覽模式跑一次。
看到 = 成功。沒看到 = 容器沒裝對 / 觸發條件選錯,回 CH1-4 檢查。
脫離工程師的必殺技:
會 Inspect、會寫 CSS Selector。
對著想追蹤的按鈕按右鍵 → 檢查 (Inspect),
畫面右側會彈出 DevTools,已經幫你標好對應元素。
這節結束你不會變工程師,但你會變看得懂前端。
外層 div 的 promo-btn-01 是「區塊識別」用,
但使用者手指真正碰到的是內層 <a>——這層的 class 才是 GTM 比對對象。
空格的意思 = 「在...裡面」。複合選擇器讓你能精準定位「哪個區塊裡的哪個元素」。
進預覽模式 → 點一次按鈕 → 在 Tag Assistant 切到 Variables 分頁,
找 Click Element 那一列——它顯示的就是實際被點到的那層。
下個 chapter——把這條確認過的選擇器,正式餵給 Trigger。
把選擇器變成觸發條件,
把觸發接到 GA4 事件代碼。
沒勾這些變數,預覽模式裡的 Click Element 會是空的——
勾完才能設條件,順序不能反。
六個變數對應按鈕的不同屬性。全部開啟,未來設條件才能靈活切換。
關鍵在第二步:從「所有點擊」切換成「部分點擊」——按 → 逐步點亮。
回預覽模式 → 點一次按鈕 → Tag Assistant 看到 Tags Fired,就完成了。
這是新手最常踩的坑——
明明設好了,但 GA4 報表上就是看不到事件。
事件名隨便取,
三個月後看不懂自己的報表。
下一階段——進階互動與轉換追蹤,
把這套流程用在表單、外連、捲動深度。