2015年2月19日 星期四

Google Tag Manager 體驗記

(此圖截自: http://www.google.com.tw/tagmanager/)

Google Tag Manager  (以下簡稱 GTM) 已經出來好一陣子了,等我用的時候應該已經很多人用得嚇嚇叫了,我還在起跑點上似的...,趁著春節假期有點不知道要介紹什麼,所以就打算寫寫 GTM 的使用心得。


首先呢,我對 GTM 沒有這麼熟,但是使用基本的功能非常簡單,稍微進階一點的部分我也是完全沒有涉入,也許也真的是沒有特別想要了解。

GTM 的管理階層是這樣子, 你的 google 帳號可以開好幾個 GTM 的 Account 帳戶,每個帳戶底下可以有很多個 Container 容器。

假設我為一間叫做 Expr 的公司申請 GTM, 就可以建立 Expr 這個 Account Name,然後 Expr 這間公司不但有 web 還有 ios app,那我就會為他建立兩個 container,一個是 web 的 container,一個是 ios app 的 container。


稍微帶大家看一下建立 account 的介面 
當然你要先註冊 GTM,登入之後你應該要想辦法找到 New Account 建立賬戶的按鈕。


建立賬戶的表單:
Account Name 填自己可以辨識的名字,通常我都填網站名稱或是公司名稱。
按下 next 之後會進入到下一張圖。




在新建立一個 account 的同時,他也會希望你直接建立第一個 container,每個 Container 可以是 Web  Pages 或是 Mobile App (一旦設定 Web 或是 App 之後便無法再修改),假設你選擇 Mobile App 那麼可以勾選 Android 或是 IOS 的選項。

接著 domain  是 optional 的,可填可不填,通常網站我是都填。
總之選擇的項目會因為你選 Web 或 App 而有不同的資料要填。

然後就可以 Create 了。





某帳戶的頁面


你可以點選第一個 container 進去編輯,通常是空的,沒有任何 tag,所謂 tag manager 當然就是要一直讓你塞 tag 到某個 container 的功能,所以每個 container 都可以有自己的一堆 tag。

一般情況來說,如果不知道要用什麼 tag,大部份都是放 Google Analytics  的 tracking code,在剛開始接觸的時候,你可以用這個來試試...。


說到這裡,終於可以說一下為什麼要用 Tag Manager,老實說最主要的原因就在於,網站可能時常會有各種需要安裝 Tag 的功能,比方說首先可能只有 GA 的 code 要放在網站上,但應網站需求會一直需要安裝更多第三方的 tag,像是第三方客服表單的 <script>,或是假設今天你遇到的狀況是活動網站,除了 GA 之外,可能還有很多廣告單位的追蹤碼需要放到網站上,那麼聯絡工程師的時間成本就是一個問題,加加補補的,測試有沒有真的 work 之類的情況。

那麼 Google Tag Manager 的方式就是,你只需要在網站上加入某個 container 的 GTM code,其他的 tag 都只要透過 GTM 的介面,去新增/修改/刪除想要加到某個 container 的 tag。

原本有好多次的工都要請工程師做,使用 GTM 只需要做一次,就是安裝 GTM code 的那一次。剩下要加入的追蹤碼或是第三方的 script 等等,都只需要透過進入到 GTM 的該 container 介面去新增就可以了,這個動作也不需要由工程師來做,只要有權限,會使用 GTM 的人,都可以幫你做這件事情。



取得 GTM Script  Code

取得某個 container 的 GTM script code 要進入到 container 的設定頁,左側 admin 選單有個 『Install GTM』,複製那段代碼,建議放在 <body>  之後。



新增 Tag 到 Container 
從左側選單 『Container Draft』 --> 『Overview』--> 『New』--> 選擇 Tag
(New 可以建立三種不同型態: Tag 標籤, Rule 規格 以及 Macro 巨集 )



建立標籤要填寫名稱,選擇標籤型態。



假如我要放的是 GA 的 tracking code,在 type 的地方預設就有 GA 可以選擇。



不同的 type 接下來的步驟會不同,選擇 type 之後要貼上該 tag 的內容 (也就是 script 的部分),完成步驟之後按下 create。


Create 之後有幾件事情要注意的是,每個 tag 都要設定 Rule,比方說像是 GA 的追蹤碼,就是放到所有頁面,你若不清楚可以編輯某個 tag,在右側有 Firing Rules 跟 Blocking Rules 的設定,設定完之後記得儲存。




假設都建立好你的 tag 之後,可以按下右上角的 create Version,先為這些現有的 tag 建立一次的版本,然後再 Publish 做發佈。GTM 也有提供 preview 的功能,可以自己試試。

順便提一下,忘記是在 create version 還是 publish 的時候,其中一的步驟會檢查 tag 的語法,假如你的 javascript 有語法上的問題,會被拒絕。




建立版本的時候預設會用數字去編號版本的名稱,你可以在建立版本之後修改版本的命名。

比方說你的第三版新增了 FB pixel 的追蹤碼,發佈之後發現有問題,你可以改回發佈第二版(也就是沒有 FB pixel 的版本)。

查看每次版本的紀錄,你可以連到左側選單的 versions,每個編號都是每次的版本 (除非你有另外修改版本的名稱)。

(補充: 建立版本除了 container 可以建立之外,account 也可以建立版本)

介紹到這裡是非常簡單的新增 Tag 介紹,GTM 其實非常強大,我提及的只是很少很少的部分,另外 GA 可以做的 event tracking,也可以透過 GTM 來做,這部分在文章沒有涉及,因為我也不會 :P,沒特別研究啦不好意思~。

至於如何檢查 GTM 的 code 有沒有真的安裝到,可以參考我前幾週寫的這篇 Google Analytics Tag Assistant 驗證追蹤碼是否正確安裝

文章若有誤有請高手指點指點,謝謝 :)

沒有留言:

張貼留言

若你看的文章,時間太久遠的問題就別問了,因為我應該也忘了... XD

Vue multiselect set autofocus and tinymce set autofocus

要在畫面一進來 focus multiselect 的方式: 參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted...