Google Tag Manager tracking code 安裝追蹤碼
Tag manager 是一個強大的程式碼管理容器,一個代碼管理中心的概念,提醒一下它並不是取代google analytics,而是涵蓋著處理各種代碼的設定,包括google analytics 以及各種tracking code、或是html等等。功能非常的強大,因此寫錯script或css就可能讓你網站出問題。
以往的埋設追蹤碼都是增加一段script,但是當你有用了tag manager,這段script可以轉由tag manager幫你引入,由tag manager來控管tracking code,假設你是行銷人員,就不用在請程式人員幫你埋碼了。
// 傳統 google analytics tacking code |
建立帳戶 埋設Tag Manager traking code
進入 google tag manager 網站註冊登入,點選建立帳戶,接下來會彈出一段程式碼。
|
恭喜你,基本上後面動作你就不需要動到html了。除非要做data layer的設定。
tag manager data layer說明文件
Tag manager 設定 google analytics tracking code
tag manager有整合進google analytics的設定,
進入代碼區塊 點擊新增
選擇google analytics
點選上半部變數區塊 => 加入你google analytics的追蹤碼 UA-xxxxxxxx-x
點選下半部觸發區塊 => 選擇 All page view
點擊右上角提交
記住一個重點,tag manager每個改動都需要你點擊提交,才算是真正送出修改,如果要先觀看有沒有問題,可以點擊預覽,進入有埋設tag manager的網站,下方會跳出介面,會列出有在執行項目。
以上就是成功用tag manager埋好了google analytics,那接下來開始介紹一個強大的功能,直接靠tag manager建立事件。我要追蹤的是click target=”_blank”的連結(因為有處理過會把外部連結設為開新視窗)。
首先先點擊左邊選單的 變數,讓我們後面可以取用點擊連結的URL
點擊左邊選單的 觸發條件 => 新增 => 觸發條件設定 => 點選連結
選擇內建變數
選擇 click target => 儲存
點擊左邊選單的 代碼 => 選擇 google analytics => 點擊上半部區塊[代碼設定]
點擊下半部區塊[代碼設定] => 選擇剛剛設定好的觸發條件
點擊提交
點擊預覽模式 => 進入網頁測試
首先點擊網頁上的開新視窗連結,在觀察下方的介面有沒有fired on this page
woooooooo,這樣就完成了一個google analytics的事件追蹤設定。
Tag Manager 結論重點
tag manager核心邏輯大概是 變數、觸發條件、代碼。變數可以把它看作設定的某個數值,觸發條件則是觸發的原因,代碼則是整合觸發條件還有變數。每個代碼都必須要有觸發條件,例如google analytic就是在網頁瀏覽觸發,要讓程式碼知道你這段代碼要在什麼時候執行。至於變數則是沒有一定要加,視狀況而定。
另外介紹目前公司針對不同客戶的客製化代碼,都是在tag manager設定的。例如某個客戶要客製化的html,就用代碼判斷這個客戶的網址,利用代碼引入javaScipt,動態的載入html。
最後想說tag manager對於行銷人來說,似乎有點複雜,以前我擔任行銷時,其實也不太會用,用得好的話需要有html、JavaScript邏輯,有些公司甚至是前端工程師專門維運tag manager的,所以如果你覺得很難理解或使用應該是滿正常的,但如果你會用的話,恭喜你,tag manager會是非常厲害的求職技能。
以上是tag manager的介紹,關於設定流程有問題歡迎留言。