![梅問題－[教學]Google TAG Manger 代碼管理工具，除了可建立原始碼外，還支援版控](http://photo.minwt.com/img/Content/webdesign/google-tag-manger/google-tag-manger_00.jpg)
前幾天有位學員，問到梅干GTM的事，說真的梅干知道GTM很久了，只是一直沒時間去研究它，而這回正好學員遇到問題，因此就抽空來了解一下GTM的運作方式，先前梅干一直以為GTM的功能就是只是用來，擴充GA的追踨碼，讓可收集的資訊更多，但梅干卻萬萬也沒想到，GTM除了可管理追蹤碼外，甚至還可以插入HTML的原始碼。
或許大家可能跟梅干心中的想法一樣，竟然是安裝HTML碼，那不是直接新增到網頁中就好，為何還要透過GTM的JS動態來產生，原來是這樣子的，由於那學員是使用網路的購物平台，但購物平台無法任意的讓使用者編輯網頁架構，因此這時就可透過GTM來實現，動態的將網頁加入HTML語法，除此之外GTM還支援版控的機制，因此當誤改了還能回溯，是一個相當方便的工具，因此還沒用過的朋友，現在也一塊來了解一下囉！
Google TAG Manger
Step1
只要有Gmail都可使用，當進到GTM後，點一下右上的「建立帳戶」。
![梅問題-[教學]Google TAG Manger 代碼管理工具，除了可建立原始碼外，還支援版控](http://photo.minwt.com/img/Content/webdesign/google-tag-manger/google-tag-manger_01.jpg)
Step2
建立帳戶名稱。
![梅問題-[教學]Google TAG Manger 代碼管理工具，除了可建立原始碼外，還支援版控](http://photo.minwt.com/img/Content/webdesign/google-tag-manger/google-tag-manger_02.jpg)
Step3
設定代碼要執行的網址，以及平台。
![梅問題-[教學]Google TAG Manger 代碼管理工具，除了可建立原始碼外，還支援版控](http://photo.minwt.com/img/Content/webdesign/google-tag-manger/google-tag-manger_03.jpg)
Step4
接著再看完合約條款後，將下方勾選起來。
![梅問題-[教學]Google TAG Manger 代碼管理工具，除了可建立原始碼外，還支援版控](http://photo.minwt.com/img/Content/webdesign/google-tag-manger/google-tag-manger_04.jpg)
Step5
接著再把這二段碼，分別放到網頁中。
![梅問題-[教學]Google TAG Manger 代碼管理工具，除了可建立原始碼外，還支援版控](http://photo.minwt.com/img/Content/webdesign/google-tag-manger/google-tag-manger_05.jpg)
Step6
一個是加到<head>標籤下，另一個則是加到<body>標籤下。
![梅問題-[教學]Google TAG Manger 代碼管理工具，除了可建立原始碼外，還支援版控](http://photo.minwt.com/img/Content/webdesign/google-tag-manger/google-tag-manger_06.jpg)
Step7
再點「新增代碼」。
![梅問題-[教學]Google TAG Manger 代碼管理工具，除了可建立原始碼外，還支援版控](http://photo.minwt.com/img/Content/webdesign/google-tag-manger/google-tag-manger_07.jpg)
Step8
再點「新增」。
![梅問題-[教學]Google TAG Manger 代碼管理工具，除了可建立原始碼外，還支援版控](http://photo.minwt.com/img/Content/webdesign/google-tag-manger/google-tag-manger_08.jpg)
Step9
再點一下中間的圖示鈕。
![梅問題-[教學]Google TAG Manger 代碼管理工具，除了可建立原始碼外，還支援版控](http://photo.minwt.com/img/Content/webdesign/google-tag-manger/google-tag-manger_09.jpg)
Step10
在代碼的除了有各式的精選追蹤碼外，也可使用自訂的HTML選項。
![梅問題-[教學]Google TAG Manger 代碼管理工具，除了可建立原始碼外，還支援版控](http://photo.minwt.com/img/Content/webdesign/google-tag-manger/google-tag-manger_10.jpg)
Step11
當選擇自訂HTML碼，就像在WordPress中的自訂HTML完全一樣，就可將要顯示的HTML碼，直接貼到這個輸入框中，而經梅干實測的結果，這個自訂HTML也可使用jQuery。
![梅問題-[教學]Google TAG Manger 代碼管理工具，除了可建立原始碼外，還支援版控](http://photo.minwt.com/img/Content/webdesign/google-tag-manger/google-tag-manger_11.jpg)
Step12
這邊梅干就很簡單的加入一個HTML碼，接著再點下方的寫發事件。
![梅問題-[教學]Google TAG Manger 代碼管理工具，除了可建立原始碼外，還支援版控](http://photo.minwt.com/img/Content/webdesign/google-tag-manger/google-tag-manger_12.jpg)
Step13
這邊梅干是選擇，當網頁一載入就套用，檢查都沒問題後，再按「儲存」。
![梅問題-[教學]Google TAG Manger 代碼管理工具，除了可建立原始碼外，還支援版控](http://photo.minwt.com/img/Content/webdesign/google-tag-manger/google-tag-manger_13.jpg)
Step14
接著按「提交」。
![梅問題-[教學]Google TAG Manger 代碼管理工具，除了可建立原始碼外，還支援版控](http://photo.minwt.com/img/Content/webdesign/google-tag-manger/google-tag-manger_14.jpg)
Step15
再按發佈後，就可設定發佈的版本名稱或說明。
![梅問題-[教學]Google TAG Manger 代碼管理工具，除了可建立原始碼外，還支援版控](http://photo.minwt.com/img/Content/webdesign/google-tag-manger/google-tag-manger_15.jpg)
Step16
在發佈完成後，就會看到以下資訊。
![梅問題-[教學]Google TAG Manger 代碼管理工具，除了可建立原始碼外，還支援版控](http://photo.minwt.com/img/Content/webdesign/google-tag-manger/google-tag-manger_16.jpg)
Step17
接著再重新整理頁面，這時就會看到，頁面中就會動態的顯示，剛所在GTM中所建議的原始碼啦！真的是一個好物呀！而GTM最大的好處，則是可以將多追踨碼，全部整併在一起，如此一來無論在管理還是網頁載入，都會更方便、更快速。
![梅問題-[教學]Google TAG Manger 代碼管理工具，除了可建立原始碼外，還支援版控](http://photo.minwt.com/img/Content/webdesign/google-tag-manger/google-tag-manger_17.jpg)