變數的介紹與分類

如果你到GTM後台會看到原有的內建變數分好幾種

  • Event:顧名思義是自訂事件
  • Page URL:當你載入某個網址頁面的時候呈現的那串完整網址
  • Page Path:完整網址的Domain後面那段
  • Page Hostname:Page Path的前面那段
  • Referrer:上一頁
GTM教學(四)-如何透過Facebook設定點擊事件追蹤

GTM教學(四)-如何透過Facebook設定點擊事件追蹤

舉個例子:當進到某篇文章時就是進到某個Page URL,而你瀏覽我的其他文章時,Domain後面那段就是Page Path,前面那段就是Hostname,那如果你想用確定前一頁是誰才啟動就用Referrer。

但實際上變數不只這些,如果你到GTM後台會看到變數點設定的地方還有很多其他種類的變數,包含點擊、表單等等,因為這次要學習的是點擊變數(Click 系列),所以就先將這些打勾就能看到他們出現在你後台的變數欄位裡囉!

點擊變數分類與介紹

在正式進入點擊事件追蹤教學前先了解一下點擊變數有哪些、又代表什麼意義呢?
你可以想像成一個網頁裡會有不同的元素所組成,就像車子一樣是由不同的零件所組成,因此當你點擊了特定按鈕或是網頁上的元件,GTM會去分析你網頁上面的變數,若符合你所設定的就會判斷為代碼要被觸發。

  • Click Element:HTML的架構
  • Click Class:Class元素,例如:Button
  • Click ID:ID元素(通常是一串文字)
  • Click URL:一段網址
  • Click Target:點擊目標,例如:_blank(代表要不要彈出視窗)
  • Click Text:按鈕上的文字

當你對想要追蹤的按鈕點選右鍵的檢查,就會看到可能會出現上方這些變數,但實際上會有哪些就要看工程師當初在規劃網站架構時使用了哪些元素、有什麼就用什麼。

FB點擊事件實作

接下來就進入FB點擊變數的實作,實作上我們採用黃道育老師的GTM教學課程網站來埋設FB的購物車按鈕點擊事件
首先複製一個先前FB Base Code,複製好後把名字改成FB加入購物車代碼方便辨識。

因為是要追蹤加入購物車的的按鈕,因此把pageview的部分改為Add To Cart,下方進階設定的代碼啟動選項原先是每個網頁一次改為每個事件一次,為什麼呢?因為是「點擊」才算觸發一次。

接下來我到網站的加入購物車按鈕上點選右鍵檢查會看到有哪些元素可以用,像是圖上可以看到有超連結、URL、Class還有Text的元素,我們就先用Class來測試看看,把Class後面那段button alt複製下來,回到GTM後台變數地方。

變數命名為加入購物車,觸發條件類型選所有元素。

在觸發時機選Click Class 包含 Button alt按儲存即可並發布就完成囉!


如果原先還沒點擊按鈕時只會有一個Base Code被觸發,如果點擊加入購物車按鈕時呢?

如果埋設正確就會看到啟動的地方出現點擊加入購物車的Code囉,如果是取用其他元素也都是類似做法可以自己都玩玩看!