GTM-Google代碼管理工具範例教學
Google 提供了許多好用的服務,
如之前提到過的在Open edX設定Google Analytics,
隨著服務的多元化,
若有管理工具能夠使用這些服務,
是一件很方便的事情,
而Google代碼管理工具就滿足了這個條件,
這就是今天的主角:
Google代碼管理工具範例教學
Table of Contents
Google代碼管理工具原名Google Tag Manager,
簡稱為GTM,
舉凡從Google Ads , Google Analytics ,
甚至一些第三方的代碼都能夠直接透過GTM來進行佈署,
那使用GTM有什麼好處呢?
簡化代碼設定的流程
以Google Analytics為例子,
若為了行銷活動需要進行追蹤,
勢必為了各式不同活動需要埋設不同程式碼,
但使用GTM的話,
只需要再GTM中設定不同的代碼即可,
不需要動到網站原始碼
增加穩定性與優化速度
承上述範例,
埋設越多的代碼,
越會拖慢網站速度,
甚至設定錯誤會導致網站無法正常運行,
而使用GTM可避免此類情形發生,
因為GTM只需要第一次設定時,
才需要更動程式碼
那如何使用GTM呢?
這裡舉一個範例來做說明:
首先必須先在GTM中新增一個容器,
這個容器就是放置各式不同TAG的地方,
![](https://1.bp.blogspot.com/-QN1pZ6TPBXg/XUfnO_n5UEI/AAAAAAAAces/J8caip75C7sROUzEIDcxgbWlG-Kb2Bf4ACKgBGAs/s640/GTM000.png)
![](https://1.bp.blogspot.com/-lyf71CHbuHc/XUfnO3cfmNI/AAAAAAAAces/Z_0cZFNkM7EtsktUjxt3Jxpvv2_uy69eACKgBGAs/s640/GTM001.png)
![](https://1.bp.blogspot.com/-KeUWCGNAI-U/XUfnOzReKZI/AAAAAAAAces/Kt4j3mHidUYoEoczeNHr5vsNoXnRfQtsgCKgBGAs/s640/GTM002.png)
建立容器後, 必須將GTM代碼依照指示, 分別加入head與body中
![](https://1.bp.blogspot.com/-hH5Hh58fAoU/XUfnOwjOoJI/AAAAAAAAces/J-6ONzE0hLcuF5MOaTwgoEggljV3FjRLgCKgBGAs/s640/GTM003.png)
要新增TAG就必須從左邊的工具列點選代碼,
選擇新增
![](https://1.bp.blogspot.com/-hlTxCPHCTLA/XUfnO2WA5aI/AAAAAAAAces/lDVRr2S7oBcVm64EY_VXzDkvFPzbVFoqwCKgBGAs/s640/GTM004.png)
新增代碼可看到底下畫面,
左上角可更改此代碼名稱,
接著點選代碼設定右上角
![](https://1.bp.blogspot.com/-21mNzpHvps8/XUfnO0kumGI/AAAAAAAAces/2cLzBpwu_Oow2u4QzoT2dKexvLOMWETkACKgBGAs/s640/GTM005.png)
選擇代碼的類型,
此範例選擇通用Analytics分析
![](https://1.bp.blogspot.com/-FrXk8lEf0lw/XUfnO3Bvr0I/AAAAAAAAces/LQnUMkZfKsUDfFi5pFm0ZGlZY__UtGgRgCKgBGAs/s640/GTM006.png)
接著選擇追蹤類型為網頁瀏覽,
並在Google Analytics設定中,
將追蹤編號加入
![](https://1.bp.blogspot.com/-1THFKQemz9w/XUfnO3d1DVI/AAAAAAAAces/5I-1crs4NDInrPZTCJTdm7Qz2esLgURewCKgBGAs/s640/GTM007.png)
追蹤編號可到Google Analytics中找到
![](https://1.bp.blogspot.com/-1Oa9rS72mW0/XUfnOyqQ2zI/AAAAAAAAces/GgRESlFUF0cP2pC-ARLHKiN_nymmO8s0gCKgBGAs/s640/GTM007-1.png)
接著設定觸發條件, 在此選擇所有網頁
![](https://1.bp.blogspot.com/-CU27UQ4fkZQ/XUfnOyIycEI/AAAAAAAAces/GsVZmTqws_Enbew7knz1tdeAUggUuGXOgCKgBGAs/s640/GTM008.png)
在網頁的右上角選擇發佈,
就能將剛才設定的代碼佈署到網站上
![](https://1.bp.blogspot.com/-zO1s_dHQRvw/XUfnO15SZtI/AAAAAAAAces/fHh8cslJjrklG1c0GlhuEX8q-Si3GiNmwCKgBGAs/s640/GTM009.png)
================================
分享與讚美,是我們繼續打拼的原動力.
若文章對您有幫助,望請不吝按讚或分享.
或者對影片有興趣可以訂閱頻道接收通知
================================
YouTube 頻道
FB 粉絲專頁
================================