iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 6
1
Modern Web

Google Tag Manager Micro Challenge系列 第 6

GTM 06 - 設定 Google Analytics 的事件追蹤(Event Tracking)

GTM 社團


上一篇介紹完如何設定 GA 的網頁瀏覽(Pageview),這一篇跟大家介紹如何設定 GA 的事件追蹤(Event Tracking)

建立 GA - Submit Button Click 代碼

  • 切換到「代碼」(Tag)頁籤
  • 按一下紅色的「新增」(New)按鈕
  • 輸入「代碼名稱」:GA - Submit Button Click (記得輸入好識別的名稱)
  • 按一下「代碼設定」(Tag Congfiguration)
  • 選擇「通用 Analytics (分析)」(Universal Analytics) (新版 Google Analytics 的原生代碼)
  • 追蹤類型(Track Type)選擇「事件」(Event)

我們會看到如下圖的設定:

https://ithelp.ithome.com.tw/upload/images/20171215/20107582vxzA9tPF9z.png

其中類別(Category)、動作(Action)、標籤(Label)和值(Value)就是事件追蹤要送給 GA 的值

  • Category:事件的分類 (必填)
  • Action:事件被觸發的動作 (必填)
  • Label:事件動作的次要分類 (必填)
  • Value:事件的價值

如果直接寫在程式中會這樣寫:

ga('send', 'event', 'category', 'action', 'label', value);

接著在 Google Analytics (分析) 設定選擇我們上一篇所設定好的變數 {{GA - ID}},如下圖所示:

https://ithelp.ithome.com.tw/upload/images/20171215/201075820qUeF15Bnl.png

這就是設定變數的方便之處,要用到時直接選擇,不需要再自行輸入重覆的東西

建立觸發條件

  • 按一下「觸發條件」(Triggering)
  • 在開啟的 Panel 中,選擇右上角的「+」,可以新增「新的觸發條件」(這是一個捷徑)
  • 輸入「觸發條件名稱」:Submit Button Click (記得輸入好識別的名稱)
  • 按一下「觸發條件設定」(Trigger Configuration),會開啟選擇「觸發條件類型」(Trigger Type)的 Panel
  • 選擇「所有元素」(All Element),如下圖所示:

https://ithelp.ithome.com.tw/upload/images/20171215/20107582BR6MkdIDEd.png

  • 在「這項觸發條件的啟動時機」(This Trigger Fires On)選擇「部份點擊」(Some Clicks)
  • 並在下方選擇「當有事件發生且這些條件全都符合時,請啟動這個觸發條件」(Fire this trigger when an Event occurs and all of these conditions are true),這篇的條件是可以多個,代表所以條件符合,才會觸發(是 AND 的概念)
  • 第一個條件選擇「Page Path」,再選擇「等於」(equals),最後填上「/」(代表首頁)
  • 按一下最後面的「+」按鈕,可以增加條件
  • 第二個條件選擇「Click Classes」,再選擇「等於」(equals),最後填上「submit-btn」(代表 CSS 的 Class Name)

https://ithelp.ithome.com.tw/upload/images/20171215/20107582Niql27Hgif.png

其中第二個條件代表頁面上有一個 Class 等於「submit-btn」的按鈕,Ex:

<button class="submit-btn">Submit</button>
  • 按一下右上角的「儲存」(Save),代表觸發條件設定完成
  • 最後回到代碼,同樣按一下右上角的「儲存」(Save),代表代碼設定完成

以上設定表示要兩個條件同時達成,才會觸發「GA - Submit Button Click 」這個代碼,這個代碼的作用就是傳送一個事件追蹤到 GA 中

最後別忘了開啟預覽模式看一下,如果點了頁面上的按鈕後預覽畫面有出現代碼的名稱就代表有設定成功,如下圖,但最終還是要去 GA 的即時報表看,事件是不是有進來,才算是最終的設定成功!

https://ithelp.ithome.com.tw/upload/images/20171215/20107582fSJA33aX2s.png

歡迎來職涯社群的 GTM 社團一起討論哦!
原文章


上一篇
GTM 05 - 設定 Google Analytics 的網頁瀏覽(Pageview)
下一篇
GTM 07 - 用預覽(Preview)模式來除錯(Debug)
系列文
Google Tag Manager Micro Challenge30

1 則留言

1
dancegame
iT邦新手 5 級 ‧ 2017-12-24 23:31:04

隨時都能補事件,不會再因為忘了出需求而煩惱XDDDD

我要留言

立即登入留言