[Google Tag Manager教學]Event事件追蹤-分析網站連結點擊量

2015-02-27

今天的Google Tag Manager教學要來教大家如何設定Google Analaytics 的事件追蹤

在預設下Google Analytics 事件報表裡面是不會有任何資料的,除非手動在所有的<a href=”http://www.google.com 後面加上ga event 代碼,但是我的網站有上千的內部與外部連結,總不能一個一個手動加上去,有點不太理智,這邊要教您更有效率的Google分析方式。

註:本篇教學請先把GTM代碼裝好才能運作

  1. 匯入事件追蹤器變數容器
  2. 透過Google Tag Manager 來設定事件追蹤
  3. 設定GA事件追蹤的類型
  4. 驗證與發佈

GA事件追蹤定義

官方說明: 事件跟蹤 -GA通用代碼(analytics.js
ga(‘send’, ‘event’, ‘category’, ‘action’, ‘label’, value);

類型 是否必需 說明 範例
Category String 把事件做個分類:像首頁的banner Banner
Action String 這個事件被觸發的動作:像點擊,加到購物車 廣告點擊
Label String 這個事件的子分類:像 左邊600×300 24h購物
Value Number 這個事件的價值:10 10

關於Event 的參數定義請看上述連結說明,簡單來說,您可以定義 category 、action、label 這三個定義最主要用來區分事件。

匯入事件追蹤器變數容器

注意:Tag Manager V2.0 版本把預設的 Event Listener 移除了, 要另外匯入變數才可以使用 – Tag manager 說明
還是不懂為什麼要把它移除,交給其他人去理解吧…
google tag manager 事件追蹤設定

  1. 先到我的GitHub 下載事件追蹤器的容器檔.json
    https://github.com/william0348/Google-Tag-Manager
  2. 到管理→匯入容器
    google tag manager 事件追蹤設定
  3. 選擇剛剛下載的檔案 even-listener.json
    覆寫:將原本的容器全部洗掉唷
    合併:與原本的容器放在一起(如果已經有設定過,建議採用這個),請先自行備份原本設定的容器唷。
    google tag manager 事件追蹤設定
  4. 匯入成功後,裡面有幫大家先選好事件監聽器的代碼與觸發條件,還有最重要的變數。
    google tag manager 事件追蹤設定

透過Google Tag Manager 來設定事件追蹤

  1. 回到主畫面,點選代碼→新增
    google tag manager 事件追蹤設定
  2. 就會莫名跑出一個事件監聽器的選項
    google tag manager 事件追蹤設定
  3. 代碼名稱就命名成事件追蹤(名稱可以自行命名),廣告代碼類型要選,事件接聽器的
    • 連結點擊接聽器
      google tag manager 事件追蹤設定
    • 設定代碼這邊讓他為預設值
      google tag manager 事件追蹤設定
    • 啟動時機:因為要監聽所有網頁上面的所有連結,所以就設定成所有網頁就可以了。
      google tag manager 事件追蹤設定

設定GA事件追蹤的類型

  1. 一樣先新增代碼,選擇Google Analytics → 通用分析 → 設定代碼
  2. 追蹤類型要改成:事件
    agoogle tag manager 事件追蹤設定
  3. GA的通運追蹤編號從GA帳戶裡面管理員→資源設定,就會有追蹤編號
    google tag manager 事件追蹤設定
  4. 事件追蹤參數
    • 類別(category):取名為Link 這邊的命名中英不限。
    • 動作(action):取名Click 好了。
    • 值(value):  這個不一定要設定,追蹤點擊比較不需要紀錄值。
      agoogle tag manager 事件追蹤設定
    • 標籤(label): 我要能判斷每個連結的實際文字,因此這邊請點選右邊的圖示,然後選擇{{element text}}。
      • element text 代表連結裡面的文字 <a href=”” title=”” id=”” class=”” >text</a>
      • element title 代表連結title設定的XXX <a href=”” title=”XXX” id=”” class=”” >text</a>
      • element url 代表連結的href 裡面的網址 <a href=”http://www.domain.com” title=”” id=”” class=”” >text</a>
      • element id、classes 代表連結所設定的id、class 名稱 <a href=”” title=”XXX” id=”” class=”” >text</a>agoogle tag manager 事件追蹤設定
  5. 事件啟動一次,只要被點擊都會計算一次
    agoogle tag manager 事件追蹤設定
  6. 啟動時機,這邊要選擇其他
    2015-12-06_123734
  7. 編輯規則
    自訂事件
    2015-12-06_123750
    這邊要新增兩個規則式
    2015-12-06_123758

    • 第一個選擇{{event}},包含:gtm.linkClick ,這是去對應事件接聽器
    • 第二個選擇{{element url}},與規則運算是相符: .* ,判斷當有點擊 並且href 包含 任何網址參數的時候才會觸發。

驗證與發布

  1. 發佈
    設定完成後,要來發布剛剛新增的代碼與規則。
    google tag manager 事件追蹤設定
  2. 預覽用來檢查發佈之前的追蹤代碼是否有正常運作,點選預覽模式。
    2015-12-06_124329
  3. 必須在同一個瀏覽器(這邊建議採用Chrome)開啟網站後,會在下方顯示 Tag Manager 每個代碼以及規則是否有運作,有的話會顯示在Tags Fired On This Page: 如事件接聽器有運作
    試著點擊網站上的連結,會發現下方的Analytics Event Track 被觸發了。google tag manager 事件追蹤設定
  4. Google Analytics 即時>事件
    從網站即時事件可以看到,剛剛點擊的連結有被GA記錄下來。
    google tag manager 事件追蹤設定
  5. 行為 > 事件 > 熱門事件
    可以到熱門事件並依照所選的時間範圍來查看,哪些連結被點擊的次數最高,藉由活動標籤 可以知道該連結的名稱。
    因為在6.事件追蹤參數,我們設定標籤的值採用 {{element text}} 。
    google tag manager 事件追蹤設定

事件追蹤是追蹤網站連結很有效的方式之一,還有很多範例可以使用例如

  • 可以去設定首頁banner 被點擊幾次。
  • 可以設定GA的事件目標,例如下載PDF檔
  • 上傳表單提交的成效,這部份下一篇會介紹到~~^_^
  • youtube 影片是否有撥放

GA事件追蹤 延伸閱讀

歡迎留下您的問題,及想要看到的主題唷~~