tagmanager 說明：

tagmanager 是谷歌提供的一個針對統計程式碼的進行管理的工具。

例如你接到一個緊急需求，需要在監控一個按鈕的點選量，產品說：“趕緊上，不上不上中國人，十分鐘我要看到結果”，這時候我翻身而起，拿起菜刀，oh，不，是熟練的開啟 Atom 找到程式碼，balabala….一通操作，看看時間，還有兩分鐘，我趕緊找人把程式碼推到測試環境，測試才剛開始，產品一個電話過來：“咋樣啊，大神”，“再給我五分鐘，一····一···一定搞定”，然後你一臉懵逼的等測試，交給運維上線。整個過程持續了半小時，這時候你忽然發現有個邏輯漏掉了，呵呵，你會有點懷疑人生···

讓我們總結一下，整個事件要經過：產品->開發->測試->運維，每次這種小需求都要涉及到幾個人的合作，效率十分令人抓狂。既然有這麼多不爽，接下來接介紹本文的主角，谷歌出品的 Tagmanager。

運作原理

1、在你的頁面引入在頁面載入後載入 googletagmanager.com/gtm.js ，整個 Tagmanager 就是她啦。

2、gtm.js 是根據你的配置動態生成的，注意，根據配置來生成，這就是最爽的地方了，我們可以隨時改，隨時生成新的。gtm.js 裡面的程式碼就是各類關於統計的程式碼，例如載入 GA(google-analytics) 統計程式碼（gtm.js 負責執行如下程式碼）

(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`, `//www.google-analytics.com/analytics.js`, `ga`);
  ga(`create`, `UA-1234567-1`, `auto`);
複製程式碼

3、既然這麼好用，去哪裡配置呢，tagmanager.google.com 需要科學上網。

怎麼用

本段都使用 google-analytics 做為載體，來展示例子，所以需要你對 google-analytics 有一丁點了解即可。

1、註冊一個 tagmanager.google.com 賬戶；

2、管理頁面建立容器

3、最關鍵的一步，這步完成則成功 99%；將引入 gtm.js 程式碼加入到我們的網站。

4、釋出程式碼 gtm.js

至此，在我們的網站上就可以載入我們可愛的 gtm.js 了

怎麼用 2，談談怎麼配置 Tagmanager

有三個核心詞，程式碼（tags）、觸發器（triggers）、變數（variables）

1、程式碼，即頁面需要執行的統計程式碼

可以是向 GA 傳送一次 PV

ga(`send`, `pageview`, location.pathname);
複製程式碼

也可以是執行一段自定義程式碼

console.log(`Hello Tagmanager.`);
複製程式碼

2、觸發器，決定程式碼什麼時候執行

文件載入完成時觸發、連結被點選時等等，google 為我們內建很多常用的觸發器，我們可以自由組合，甚至我們還可以自定義事件觸發。

3、變數，如其名，它就如平常程式碼裡的變數，可以在觸發器、程式碼中引用

可以是一個常量，如下定義，則可以在其他地方雙大括號引用 {{website}} 即可

website=harvestmoon.cn
複製程式碼

也可以是一段定義的函式，動態返回，如下

function(){
	return location.href;
}
複製程式碼

具體使用

明白了概念，使用起來就會得心應手，下面看看具體的用法，現在我們需要在網頁裡引入 GA 的統計（analytics.js），並且往 GA 傳送 pageView。

1、新增程式碼（tags），程式碼需要實現的就是引入 analytics.js、傳送 pageView，兩個功能。

新增完需要執行的程式碼後，點選繼續，就要設定程式碼什麼時候執行了。

2、新增、設定觸發器

這裡需要的觸發器很簡單，當頁面載入完成後執行即可

3、最後點選建立程式碼，即可

4、完事具備，現在只需要將我們新增好的程式碼釋出出去，我們的網站頁面即可收到最新的 gtm.js。

5、預覽模式，推薦所有的操作都在 chrome 上進行，因為筆者沒有驗證其他瀏覽器

作為程式設計師，對自己程式碼都會保持懷疑心，所以，需要驗證後才能公佈於眾，還好 google 給我們提供了一個偉大的功能，預覽模式，見下圖操作即可

預覽開啟成功後，是這個樣式的

開啟我們的頁面，是這個損色的，推薦訪問 www.smalldragonluo.com，是一個很有趣的網站

頁面會出一個除錯的視窗，裡面會顯示出當前執行了哪些程式碼（tags），並且是在什麼時候觸發的，當我們寫了一個比較複雜的邏輯並且出問題時，這些資訊就能很快的幫我們定位到出問題的位置。圖上顯示，觸發了“載入 GA”這個程式碼。

讓我們看看網路請求資料，用事實和療效說話，如下圖

我的個人網站

Tagmanager.google 入門和一次實踐

相關網址：

tagmanager 說明：

運作原理

怎麼用

怎麼用 2，談談怎麼配置 Tagmanager

具體使用

相關文章