Tag manager 是一個強大的程式碼管理容器,一個代碼管理中心的概念,提醒一下它並不是取代google analytics,而是涵蓋著處理各種代碼的設定,包括google analytics 以及各種tracking code、或是html等等。功能非常的強大,因此寫錯script或css就可能讓你網站出問題。

google tagmanager

以往的埋設追蹤碼都是增加一段script,但是當你有用了tag manager,這段script可以轉由tag manager幫你引入,由tag manager來控管tracking code,假設你是行銷人員,就不用在請程式人員幫你埋碼了。

1
2
3
4
5
6
7
8
9
// 傳統 google analytics tacking code
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create','UA-xxxxxxxxxx-1','auto');ga('send','pageview');</script>

// 以上這段code會變成你在tag manager 選擇google analytics,貼上UA-xxxxxxxxxxx-1。
// 如果沒有支援就改成用html方式引入code

建立帳戶 埋設Tag Manager traking code

進入 google tag manager 網站註冊登入,點選建立帳戶,接下來會彈出一段程式碼。

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>

...
// 將這段script 放到網站的<head>前面
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-你的追蹤碼');</script>
<!-- End Google Tag Manager -->
<head>
...

恭喜你,基本上後面動作你就不需要動到html了。除非要做data layer的設定。
tag manager data layer說明文件

Tag manager 設定 google analytics tracking code

tag manager有整合進google analytics的設定,

進入代碼區塊 點擊新增

google tagmanager add

選擇google analytics

google tagmanager tag set ga

點選上半部變數區塊 => 加入你google analytics的追蹤碼 UA-xxxxxxxx-x

google tagmanager tag tag var

點選下半部觸發區塊 => 選擇 All page view

google tagmanager tag trigger

點擊右上角提交

google tagmanager tag submit

記住一個重點,tag manager每個改動都需要你點擊提交,才算是真正送出修改,如果要先觀看有沒有問題,可以點擊預覽,進入有埋設tag manager的網站,下方會跳出介面,會列出有在執行項目。

以上就是成功用tag manager埋好了google analytics,那接下來開始介紹一個強大的功能,直接靠tag manager建立事件。我要追蹤的是click target=”_blank”的連結(因為有處理過會把外部連結設為開新視窗)。

首先先點擊左邊選單的 變數,讓我們後面可以取用點擊連結的URL

google tagmanager tag openvar

點擊左邊選單的 觸發條件 => 新增 => 觸發條件設定 => 點選連結

google tagmanager tag trigerset

選擇內建變數

google tagmanager tag default

選擇 click target => 儲存

google tagmanager tag target

點擊左邊選單的 代碼 => 選擇 google analytics => 點擊上半部區塊[代碼設定]

google tagmanager event setting

點擊下半部區塊[代碼設定] => 選擇剛剛設定好的觸發條件

google tagmanager event setting 2

點擊提交

點擊預覽模式 => 進入網頁測試

首先點擊網頁上的開新視窗連結,在觀察下方的介面有沒有fired on this page
google tagmanager tag test

woooooooo,這樣就完成了一個google analytics的事件追蹤設定。

Tag Manager 結論重點

tag manager核心邏輯大概是 變數、觸發條件、代碼。變數可以把它看作設定的某個數值,觸發條件則是觸發的原因,代碼則是整合觸發條件還有變數。每個代碼都必須要有觸發條件,例如google analytic就是在網頁瀏覽觸發,要讓程式碼知道你這段代碼要在什麼時候執行。至於變數則是沒有一定要加,視狀況而定。

另外介紹目前公司針對不同客戶的客製化代碼,都是在tag manager設定的。例如某個客戶要客製化的html,就用代碼判斷這個客戶的網址,利用代碼引入javaScipt,動態的載入html。

最後想說tag manager對於行銷人來說,似乎有點複雜,以前我擔任行銷時,其實也不太會用,用得好的話需要有html、JavaScript邏輯,有些公司甚至是前端工程師專門維運tag manager的,所以如果你覺得很難理解或使用應該是滿正常的,但如果你會用的話,恭喜你,tag manager會是非常厲害的求職技能。

以上是tag manager的介紹,關於設定流程有問題歡迎留言。