[教學]Google TAG Manger 代碼管理工具，除了可自訂原始碼，還支援版控

2018-10-30 Comments 0 Comment

梅問題－[教學]Google TAG Manger 代碼管理工具，除了可建立原始碼外，還支援版控

前幾天有位學員，問到梅干GTM的事，說真的梅干知道GTM很久了，只是一直沒時間去研究它，而這回正好學員遇到問題，因此就抽空來了解一下GTM的運作方式，先前梅干一直以為GTM的功能就是只是用來，擴充GA的追踨碼，讓可收集的資訊更多，但梅干卻萬萬也沒想到，GTM除了可管理追蹤碼外，甚至還可以插入HTML的原始碼。

或許大家可能跟梅干心中的想法一樣，竟然是安裝HTML碼，那不是直接新增到網頁中就好，為何還要透過GTM的JS動態來產生，原來是這樣子的，由於那學員是使用網路的購物平台，但購物平台無法任意的讓使用者編輯網頁架構，因此這時就可透過GTM來實現，動態的將網頁加入HTML語法，除此之外GTM還支援版控的機制，因此當誤改了還能回溯，是一個相當方便的工具，因此還沒用過的朋友，現在也一塊來了解一下囉！

Google TAG Manger

網站連結：https://tagmanager.google.com/

Step1
只要有Gmail都可使用，當進到GTM後，點一下右上的「建立帳戶」。

Step2
建立帳戶名稱。

Step3
設定代碼要執行的網址，以及平台。

Step4
接著再看完合約條款後，將下方勾選起來。

Step5
接著再把這二段碼，分別放到網頁中。

Step6
一個是加到<head>標籤下，另一個則是加到<body>標籤下。

Step7
再點「新增代碼」。

Step8
再點「新增」。

Step9
再點一下中間的圖示鈕。

Step10
在代碼的除了有各式的精選追蹤碼外，也可使用自訂的HTML選項。

Step11
當選擇自訂HTML碼，就像在WordPress中的自訂HTML完全一樣，就可將要顯示的HTML碼，直接貼到這個輸入框中，而經梅干實測的結果，這個自訂HTML也可使用jQuery。

Step12
這邊梅干就很簡單的加入一個HTML碼，接著再點下方的寫發事件。

Step13
這邊梅干是選擇，當網頁一載入就套用，檢查都沒問題後，再按「儲存」。

Step14
接著按「提交」。

Step15
再按發佈後，就可設定發佈的版本名稱或說明。

Step16
在發佈完成後，就會看到以下資訊。

Step17
接著再重新整理頁面，這時就會看到，頁面中就會動態的顯示，剛所在GTM中所建議的原始碼啦！真的是一個好物呀！而GTM最大的好處，則是可以將多追踨碼，全部整併在一起，如此一來無論在管理還是網頁載入，都會更方便、更快速。

相關

發表迴響取消回覆

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料。