廢話前言：
因為最近新網站要上線了，也順便把埋在原本舊網站裡的 ga 追蹤碼，換成使用 google 代碼管理(GTM)
要無痛更換其實也很簡單，首先來這邊建立帳戶與容器
然後填入原本的追蹤代號，將產生的 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的即時報表中看看數據囉!
資料馬上就進來了
有沒有超級簡單!
此篇結束
留言列表
CSS、Responsive Web Design (2)