廢話前言:

因為最近新網站要上線了,也順便把埋在原本舊網站裡的 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的即時報表中看看數據囉!

資料馬上就進來了

 

有沒有超級簡單!

此篇結束

 

 

arrow
arrow
    全站熱搜

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