如何用 GTM 建立 GA4「連結點擊」事件?

初接觸 Google Tag Manager 的朋友,通常第一個設定的代碼會是追蹤站上連結的點擊

假設今天一間旅行社建立了旅行團的介紹網頁,並想了解使用者在看完介紹之後,是否會如預期點擊相關連結,進而引導使用者獲得更多資訊或是完成購買,接著可以透過 GA4 觀看「事件」相關數據。

如下圖所示,在文章段落中,旅行社在行程介紹頁面放上了「立刻聯絡我們」的連結,想知道有多少人看完這個頁面介紹之後會產生進一步興趣。

這篇文章就是幫助身為行銷人員的你,學習如何利用 GTM 建立「點擊」事件,追蹤像是此類事件的成效表現。



先建立觸發條件

以「網址連結」觸發

在行程介紹頁面中,如果在該連結上點選右鍵,選擇「檢查」,可以看到該文字連結的網址為:「http://mktgholic.local/contact-us/」,也就是希望使用者在點擊後連去的地方,我們就可以用此網址作為觸發所需的條件。

當使用者點擊的連結網址符合 「mktgholic.local/contact-us/」時,觸發事件。

接著來到觸發條件介面,進行觸發條件的設定

GTM 觸發條件介面 > 新增 > 僅連結

在選定觸發條件類型之後,因為我們只要追蹤特定的連結點擊,所以選擇「部分的連結點擊」,並選取條件為:只有當 Click URL 包含 mktgholic.local/contact-us/ 時,此觸發條件被滿足才會啟動特定代碼。

在設定部分的連結點擊時,如果沒有看到變數 Click URL 時,可以拉到選單最下面「選擇內建變數」 勾選 後將其放入清單中。

以其它變數觸發

除了以「 網址連結(Click URL)」觸發以外,其實還可以用許多不同的方式觸發,這邊我們ㄧ樣以上述的網頁為例。

例如:「連結文字(Click Text)
當使用者點擊的連結文字符合「立刻聯絡我們」 時,滿足觸發條件,啟動代碼。

或是:「點擊 ID(Click ID)
當點擊的連結 ID 符合「trip-datail」時,滿足觸發條件,啟動代碼。(如下圖)

這麼多的變數可以讓你依照網站結構以及當下追蹤需求設定觸發條件,如果這個變數不行,就換另一個變數,萬一全部都不行,那我們就可以使用大絕招 datalayer push,不過這已經超出初入門的範圍了,假設很有興趣想先了解,可以閱讀這篇:認識一下何謂 Data Layer 資料層


新增點擊事件代碼

GTM 代碼介面 > 新增 > 代碼類型:「Google Analytics(分析)」> Google Analytics (分析):GA4 事件

在評估 ID 的位置,填入你的 GA4 評估 ID,通常會是 G-VPSFFXXXX 這樣的一串英數,如果不知道在哪裡的朋友,可以參考這篇文章帶你找到 GA4 評估 ID 的位置以及安裝 GA4 評估 ID 的方式。

接著我們為事件命名,請將事件名稱定義為好讀好理解的,這邊我們追蹤的是使用者所點擊的連結,所以將其命名為 「Click_link」,別去命名一個八竿子打不著邊的事件名稱,另如:「I_love_NYC」這種東西(相信應該沒人會這麼做吧!?)

一般來說,在追蹤點擊連結的時候,不會為了每個連結都設定單獨的事件(這樣你有 100 個連結就會需要 100 個事件,相當不合理,且會讓 GTM 容器一團亂),而是隨著事件帶上事件參數,知道哪個連結被點擊,因此這邊事件參數的部分,我們就會帶上點擊的連結(Click URL)。

上圖中提到的「對照表」延伸閱讀文章:如何用 GTM 對照表管理不同的 GA4 ID(測試站與正式站)

如何設定參數事件的值?

在事件參數「值」的設定上,我們可以使用 GTM 內建的變數,點選右邊「+號鍵」可以開啟變數清單。

在清單中可以找到一連串跟點擊相關的變數,這次的事件參數設定帶上了 Click URL(點擊的連結網址),同樣我們也可以帶上 Click Text(點擊的連結文字),未來可以透過 GA4 幫助我們了解到使用者是點擊了哪個連結。

如果在清單中沒有看到你需要的變數,除了可以透過右上角的「+號鍵」自訂外,你也可以選擇右上角的「內建變數」,然後勾選你所需要的內建變數,就會顯示到變數清單當中。

如果對於 GTM「變數」還不是很熟悉的朋友,可以參考這篇文章的變數章節:「GTM 變數(Variables):傳遞資訊

綁定代碼觸發條件

接下來,我們要將前面設定的觸發條件與 Click_link 代碼綁定,也就是完成「當使用者點擊的連結包含 mktgholic.local/contact-us/ ,啟動 Click_link 代碼」這件事情,設定完畢之後點選「儲存」即可。


搞定!確認代碼有無正常運行

完成事件代碼設定之後,我們可以透過 GTM 預覽模式、GA4 即時報表以及 DebugView 確認事件代碼是否有如我們預期的方式啟動以及傳送相關事件參數的值。關於預覽模式的使用方式,請參考文章:「如何用 GTM 「預覽模式」檢查代碼有無設定成功?

在 GTM 預覽模式確認

在 GTM 預覽模式中,可以看到當點擊「立刻聯絡我們」連結時,設定的事件「GA4Event-Click_link」被啟動,進一步點選可以看到我們設定的事件參數值、觸發條件式以及事件名稱。

點選該事件卡之後,可以看到以下畫面以及更多資訊。

在 GA4 即時儀表板確認

在 Google Analytic 4 的「即時」儀表板,也可以確認是否有事件「Click_link」傳送進來。如果不知道 GA4 即時報表的位置,可以參考這篇:「GA4 初學者指南:認識 GA4 前台介面以及基礎報表!- 即時(Realtime)」。

進一步點選事件名稱本身的話,也可以看到事件參數,點選事件參數的話,就可以看到其所帶的值「mktgholic.local/contact-us」以及「立刻聯絡我們」。

用 GA4 DebugView 確認

從 GA4 介面左下角齒輪進入後台,在資源區塊中找到 DebugView,如同下方畫面,你會看到事件一個個列隊傳送進來,畫面中,可以看到我們前面透過 GTM 設定的 Clink_link 事件以及事件參數。

如果對於 GA4 後台尚不熟悉的朋友,可以參考這篇:「認識 Google Analytic 4 後台介面」,希望可以幫助你對 GA4 有更多的認識。

透過上述三個方式確認沒問題之後,就可以提交本次的更動了,需要注意的是,儘管我們做了 3 次確認,但在透過 GTM 提交版本上線後,還是定期回到 GA4 確認是否有收到 GA4 事件,另外一點則是 GA4 要等待 24-48 小時之後,才會在報表中顯示當天收集到的事件資料(即時報表依然可以看到當下的事件),所以在事件剛上線初期幾天,記得常到事件報表確認檢查。

最後再提醒一下,所有的事件參數都必須到 GA4 後台的「自訂定義」建立維度,否則是無法在報表中顯示的,而關於自訂維度的部分可以參考這篇文章:如何使用 GA4 「自訂定義」中的「自訂維度」功能?


延伸閱讀

如果你很喜歡這篇文章並且覺得內容有幫助,又剛有些多餘時間,歡迎你看看其它文章,繼續探索(這坑?這地獄?這片樂土?)

同時,如果對於內容有疑問或是建議,也歡迎你留言告訴我們:)