歡迎轉載(註明出處)或直接轉貼網址也ok,但是請不要直接把內容摳走貼在別的地方~

廢話前言:

因為最近新網站要上線了,也順便把埋在原本舊網站裡的 ga 追蹤碼,換成使用 google 代碼管理(GTM)

要無痛更換其實也很簡單,首先來這邊建立帳戶與容器

https://tagmanager.google.com

然後填入原本的追蹤代號,將產生的 js code 依照說明,貼到要追蹤的網頁就可以了

因為實在太簡單,所以就不解釋

因此這一篇要來研究的是如何利用 Google 代碼管理來追蹤網頁上的點擊事件

例如:點擊連結、點擊按鈕 button click.....之類的

當追蹤碼從以往的 ga code換成 GTM 的代碼之後,事件追蹤變得超簡單

而且不需要什麼門檻就可讓行銷人員自行操作

此篇有簡單的目錄

第一步:建立追蹤碼的變數 (不建也可以啦,建了比較方便)

第二步:新增代碼

第三步:新增觸發條件

第四步:預覽與發佈

開始前首先看一下GTM工作區左方的主要功能

這篇不想廢話太多,所以直接進入該怎麼設定

但在設定之前先做一些事可以讓之後設定更輕鬆簡單

 

第一步:建立追蹤碼的變數 (不建也可以啦,建了比較方便)

首先來變數設定一下資源編號,這樣就不用每設定一次就複製貼上

首先新增一個變數,選常值

然後把你 GA 的追蹤編號新增進去

建立之後就會出現在使用者定義的變數中,以後有需要用到那個字串就可以直接選擇變數

 

第二步:新增代碼

看你是要先新增觸發條件,還是直接新增代碼都可以

因為反正一個代碼至少要一個觸發條件,所以早晚都要設定

此例就直接新增代碼,點選下圖上方的代碼設定

 

裡面可以選擇的代碼一狗票,選擇通用 Analytics(分析)

接下來追蹤碼編號按下右邊的小圖示,選擇剛剛建立的追蹤碼變數名稱

當然你要自己輸入也可以,但是誰會去記那一串

然後追蹤類型選擇 "事件"

上面的類別、動作、標籤,請對照一下 GA 報表裡想用來顯示的文字

打開 GA 行為 / 事件,裡面可以看到事件有分類別、動作跟標籤,指的就是以上欄位

我自己是這樣設定

 

第三步:新增觸發條件

選擇下面的觸發條件,我們要建立按下一個超連結的事件

追蹤連結,所以請選擇 "僅連結"

然後勾選一下等待代碼,檢查驗證就隨便

但如果沒勾選等待代碼的話,點下去超連結資料不會進到 GA  ><

我覺得可能是太快就轉走的關係所以記得打勾

然後驗證條件,因為我之前有建立一個變數叫 HostName,這邊檢查該變數是否是網站的 domain name

再來比較重要的就是觸發條件的啟動時機

GTM好用在不需要讓你額外埋 code,就可以在後台管理觸發的 element

以這個例子而言,使用了 CSS選擇器,畢竟對開發人員來說比較熟......

用 CSS 選擇器來找到要觸發的 DOM Element ,或是可以用其他方式來找到那個 DOM Element

但如果你要用 CSS Selector的話,有個更笨的方法可以設定,打開你的 chrome 按 F12

按下選擇元素

然後頁面上點選該元素,下面就會有 Element 被選取

再按滑鼠右鍵,選擇 copy / copy selector 即可

建立完之後的代碼就會長得像這樣

 

第四步:預覽與發佈

先預覽一下,沒問題就發佈出去!! 要記得發佈啊!!

當切到預覽的時候,開一個新的 tab 瀏覽一下你的網頁,就會發現跑出一個管理工具

可以點左方的 gtm.click,然後再切換上方到 variables 看看變數的狀況

如果有符合條件會進到 GA 中的資料,區塊就會顯示在 Tags Fired On this Page :

反之沒被監控到就會維持在 Tags Not Fired On This Page:

 

發佈之後就可以到 GA的即時報表中看看數據囉!

資料馬上就進來了

 

有沒有超級簡單!

此篇結束

 

 

創作者介紹
創作者 小雕 的頭像
小雕

小雕雕的家

小雕 發表在 痞客邦 留言(2) 人氣()


留言列表 (2)

發表留言
  • panconan
  • Hi 小雕先生,

    拜讀您的教學後,有兩個問題想請教,希望不會造成您的困擾。

    1.在觸發條件的部分,您提到需要先選"Click Element",接著去找到那個標的並用F12進行右鍵"Copy Selector"。
    那如果我同一個頁面上有兩個按鍵,但其實都是導到同一頁,進行右鍵"Copy Selector"出來的應該是會兩個不同的東西對嗎?
    那是不是就能用此方式,去追蹤同樣目標頁面,但不同位置的按鍵產生的點擊數?

    2.在觸發條件的部分,除了前述這種選擇"Click Element"並運用"Copy Selector"的方式,是否還有甚麼方式可以讓不懂程式的人更簡易使用,但依舊可以追蹤同一個頁面兩個不同位置(都會外連到同一頁)按鍵的點擊數呢?

    感謝您了!
  • hi 你好啊,

    1.針對不同按鈕的"copy selector"就會是不同的路徑,也代表著不同的 element,因此你可以像你提到的一樣,在一個頁面上去追蹤多個按鈕的點擊數,你如果要將點擊數合在一起,你可以在一個通用GA代碼下面加入多個觸發條件,將數字算在同一個GA事件中,例如我的會員登入按鈕有分一般登入跟 fb 登入,我就可以把這兩個按鈕都算在會員登入事件裡,但如果你是要拆開來分析,那就是一個觸發條件設定一個通用GA追蹤代碼,有多個就設多組,意思就是每一個觸發條件都是一個GA事件,這樣在 GA 的事件中就能看到不同的按鈕分別的點擊數了

    2.除了 click element 之外,還有很多種方式可以去讓GTM知道你要追蹤哪個元素,像是click id、click classes、click text...之類的,如果你可以明確知道你的按鈕id叫什麼的話,就可以用 click id,知道有用了那些class的話,就可以直接指定class,知道文字的話就用 click text,但其實我覺得click element好像是相對簡單且不會發生錯誤的,因為用選擇器相對來說會比較精準,因為有看過有些網站的網頁寫的html....不是很合法,例如一個頁面上有重複的id,或是你指定的 class 其實有多個按鈕在用,所以會比較建議用 click element

    小雕 於 2017/07/04 09:41 回覆

  • 悄悄話