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
<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 analytics

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

google tagmanager tag tag var — google tagmanager tag var

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

點擊右上角提交

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

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

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

google tagmanager tag openvar — google tagmanager openvar

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

google tagmanager tag trigerset — google tagmanager trigerset

選擇內建變數

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

建立帳戶 埋設 Tag Manager traking code