Google Tag Manager tracking code 安裝追蹤碼

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

google tagmanager

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

// 傳統 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 網站註冊登入，點選建立帳戶，接下來會彈出一段程式碼。

<!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的介紹，關於設定流程有問題歡迎留言。