LOADING CLOSE

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

今天的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事件追蹤 延伸閱讀

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

Author: Lin William

擁有知識不是力量,分享知識才是力量。 對於新鮮事物保持樂觀學習的態度,創意來自於我對科技的熱愛!! 每週一篇以上分享我生活中、工作上、發現的新事物^_^

(7) Comments
  1. Hi Baupo 匯入容器有複寫與合併,請問你是用哪種方式匯入,我剛剛檢查過json檔。是OK的。
    有種可能是 跟你目前的設定無法合併所導致。

  2. 我還在看 為什麼新版的GTM 會把這些事件監聽器拿掉的原因,好像他已經內建在裡面的感覺,我還在用新的帳號測試,說不定只要去設定GA 的事件就可以了,然後再去設定觸發條件

  3. 為什麼我匯入了下載連結中的容器,還是使用不了?
    下面會紅字寫着 彈出檔案格式無效
    詳情的方框 寫着不再支援這種匯入檔案
    這是說明GA現在不能統計點擊數了?

  4. Hi Win,
    感謝告知,我發現之前上傳的容器檔案已經不能使用了,我會再更新版本上去,我試過沒問題再跟你說唷

發佈留言

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

威廉獅blog
擁有知識不是力量,分享知識才是