Tagmanager.google 入門和一次實踐
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、既然這麼好用，去哪裡配置呢， ofollow,noindex">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”這個程式碼。
讓我們看看網路請求資料，用事實和療效說話，如下圖
