網站架設

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

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