【GTM新手圖解】追蹤網頁button click教學實戰

本篇將介紹如何透過GTM在網頁上設定Button click tracking，有助於網站PM/Marketer管理追蹤成效 Photo by rawpixel on Unsplash

若還沒有GTM設定的朋友可先看上一篇入門版，再進行本篇教學：

【GTM新手圖解】從申請GTM代碼，到追蹤Page View入門實戰

點這裡開始吧！GTM中文網址：https://tagmanager.google.com/?hl=zh-tw

第一章：新增Button Click觸發條件＆變數

快速步驟一覽：左方工作區>新增觸發條件>選擇「點擊連結」>選擇所有連結>新增各Click點擊變數

目的說明：在追蹤之前，GTM需要先做「識別網頁上各Button」的工作，藉由設定觸發條件跟開啟變數，就可在網頁上找出要追蹤的項目

Step1. 新增觸發條件

Step2. 觸發條件選擇連結點擊

Step3. 觸發條件的啟動時機，選擇所有連結點擊

Step4. 設定變數> 新增設定>勾選Click類別的各項目

第二章：瀏覽並找到要追蹤的Button

快速步驟一覽：在工作區按下預覽>原視窗輸入要追蹤的網頁網址>出現Listener介面>點選想要追蹤的Button>在變數欄中觀看Button的值

目的說明：找出要追蹤的button

Step1. 於工作區按下預覽，進入預覽模式

Step2. 在預覽模式下進入有埋此GTM的網頁，下方出現listener介面（網頁已隱碼XD）

Step3. 點擊Button後，在Summary與變數欄中觀看要追蹤Button的「值」

這邊能分辨追蹤的項目很多，包含了Classed / Element / ID / Target / Text / URL，依據不同網頁狀況做選擇，上圖範例是以Text「立即體驗」作為辨別的值。

第三章：瀏覽並找到要追蹤的Button

快速步驟一覽：新增觸發條件（部分點擊）>設定包含「立即體驗」文字>新增代碼（GA通用分析）>設定事件追蹤與對應觸發條件

目的說明：設定GTM&GA之間的串聯，讓Button click的數據能順利被記錄

Step1. 回GTM新增點擊觸發條件，這次選擇「部分點擊」，並包含Click text的文字

Step2. 左方工作列選擇代碼，並新增一個代碼作為GA<->Button Click追蹤的對應

Step3. 代碼類型為GA通用分析，並設定追蹤類型為事件，且定義為click

Step4. 帶入先前的GA設定（參照上一篇文章），並新增觸發條件為剛設定的「立即體驗」

Step5. 設定完後長這樣，這邊填的「類別」跟「動作」會在GA事件維度中出現，若有不同Button可再設定不同名稱避免混淆

第四章：驗證測試

快速步驟一覽：預覽模式回網頁試點>回GA觀看即時數據>完成！

目的說明：確認Button click追蹤數據生效

Step1. 預覽模式下回網頁點擊button，下方Tags會出現剛設定好的追蹤代碼

Step2. 回到GA看即時數據就進來了！

若是觸發條件沒有生效，在listener中也可以看到為何沒有生效，圖為點擊到另一個button下的狀況

下篇再分享如何透過GTM追蹤網頁滾動(Scroll)，感謝大家！

Measureschool教學參考：https://www.youtube.com/watch?v=r87A-Ql2czg

同場加映，行銷經驗分享：

【GTM新手圖解】從申請GTM代碼，到追蹤Page View入門實戰

給剛入行的行銷人(Marketer)：五樣基礎練習分享

同場加映，工作經驗分享：

Marketer轉Product Manager之六要心法

產品經理/設計如何與你的IT大神溝通？

如果你覺得受用，請幫我Clap 1-2下
覺得心有戚戚焉，請幫我Clap 3-5下
希望鼓勵繼續寫，我很感謝你！請幫我Clap 5-10下或更多

感謝閱讀到最後的你！

若有沒寫到的細節或建議，歡迎透過底下留言/FB/gmail聯繫我