為什麼要使用Google代碼管理工具?GTM有什麼優點?
在開始說明Google代碼管理工具的優點之前，讓我們先了解一下什麼是GTM。
Google代碼管理工具概述
GTM是Google提供的免費代碼管理工具，跟傳統GA相比，GTM在編輯網站代碼上更加方便容易；以往我們使用GA的時候，如果要增加事件或其他設定，往往會需要請IT協助埋設，GTM則是透過嵌入容器，讓行銷人員不需要直接編輯網站的代碼，也能增加、修改或刪除網站代碼，減少對後端工程師的需求(畢竟不是每一個IT都好溝通)。
GTM優點
1.管理代碼
如何有序管理各種追蹤事件、代碼應該是開發、分析跟行銷人員都有的困擾，尤其是當公司負責人員異動又沒有妥善交接時；當然我們可以透過重新規劃設計新的腳本，但這樣就容易殘留無用的程式碼在網頁上。若網站架構稍大，這些無用的程式碼都可能拖累網站的載入速度。這時候代碼管理系統就非常重要，除了我們不需要在網站上設置多個追蹤代碼外，也不用擔心忘記先前設置過的腳本。(強迫症的福音～)
沒有使用GTM前，我們需要在網站內放入像是GA、FB像素甚至GA電子商務的追蹤碼，像這樣：
<!-- Meta Pixel Code -->
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'xxxxxxxxxxxxxxxxx');
fbq('track', 'PageView');
fbq('track', 'Purchase', {currency: "USD", value: 30.00});
<img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=xxxxxxxxxxxxxxxxx&ev=PageView&noscript=1"
/>
<!-- End Meta Pixel Code -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxx-x">
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-xxxxxxxx-x');
gtag('event', 'view_item_list', {
"items": [
{
"id": "P12345",
"name": "Android Warhol T-Shirt",
"list_name": "Search Results",
"brand": "Google",
"category": "Apparel/T-Shirts",
"variant": "Black",
"list_position": 1,
"quantity": 2,
"price": 2
},
{
"id": "P67890",
"name": "Flame challenge TShirt",
"list_name": "Search Results",
"brand": "MyBrand",
"category": "Apparel/T-Shirts",
"variant": "Red",
"list_position": 2,
"quantity": 1,
"price": 3
}
]
});而且如果有新增事件，代碼還要再持續增加，增加到有一天你自己都會越看越困惑；但使用GTM代碼則簡單很多，像這樣：
<!-- Google Tag Manager -->
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-K7QNWHH');
<!-- End Google Tag Manager -->
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K7QNWHH"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->他用一組容器去取代並整合容納多組代碼，像是GA、FB、Google Ads等，且提供一目瞭然的管理畫面(如下圖)。每次的變更GTM都會幫你留有紀錄，協同管理上更簡便。
2.資料的一致性及方便變動性
以代碼、觸發條件、變數跟資料層進行設定及啟動的GTM，透過有規範的規定，讓資料能邏輯、一致且延續性的存在；變數的設定則讓資料具有更方便的動態性。 以設定按鈕點擊事件來說，在一頁式促銷網頁中，我們常會需要去監控頁面中CTA成效，在GTM中可以透過設定動態變數自動去捕捉我們想要的按鈕資訊，且若日後要調整也僅需要更換變數即可。(如下圖，變數將會自動抓取按鈕位置並將填入標籤中，在GA報表中我們就能看到這個事件是發生在頁面哪個位置的按鈕了)
其他關於GTM管理元件詳細說明可見Google代碼管理文件說明
3.模組化及可重複利用
GTM以彈性的觸發條件跟動態變數構成可追蹤代碼，我們可以在GTM中定義一組觸發條件並搭配動態變數，然後放在不同的網頁中，藉由這樣簡單的設定，快速獲得不同追蹤的數據。例如我們今天要取的所有在網站內的Youtube影片成效(影片有無播放及觀看進度)，就可以先設定一個Youtube的觸發條件
GTM有許多內建的觸發條件，基本的網頁瀏覽、元素(連結)點擊、Youtube影片觀看、網頁捲動進度及表單提交都有，十分友善。
然後透過設定內建變數中與影片相關的變數，像是Video Title(名稱)、Video Duration(總時長)、Video Percent(播放%)為輸出資料。
再搭配代碼就能進行不同事件設定了，以下圖為例，就是設定影片被觀看進度，只要有人點擊站內的YT影片，我們就能在GA事件報表內看到被播放的YT影片名稱跟被觀看進度。
以上設定的這些變數、觸發條件都可以重複運用在不同的代碼中；如果追蹤政策改變的話，也不需要移除任何程式碼，只需要將該代碼中的觸發條件移除掉，就可以將代碼暫時失效了。
更多關於變數說明：網頁適用的使用者定義變數類型
3.開放性
GTM除了內建的範本外，也提供了非常多樣的第三方範本可以選擇；如果都沒有你需求的代碼的話，也可以用自訂HTML自行建置。甚至你可以用自訂HTML方式在網頁上加入自己的JavaScript。
Google代碼管理工具支援代碼清單
4.非工程人員的便利性
以前沒有GTM的時候，行銷或分析人員不論要進行任何追蹤異動，都一樣會需要IT單位的支援，如果是公司內部有相關部門還好，但很多透過外包管理的網站，除了麻煩之外，也無法即時設置。而現在，除了少數需要進階設定之外，大部分的追蹤事件即使不是IT，也可以自己設定且GTM有預覽功能，能夠即時的檢視有沒有設定好，確認設定完成再將代碼發布正式版。
當然，這並不是建議單方面或隨機發佈任何代碼的網站上，在部署追蹤架構流程的時候，還是需要與各相關單位討論。關於Google代碼管理工具的優點就先說到這，下一篇會介紹如何設定GTM及基本網頁追蹤事件。
資料參考：Google Analytics Breakthrough: From Zero to Business Impact
你可能感興趣的文章
喜欢我的作品吗？别忘了给予支持与赞赏，让我知道在创作的路上有你陪伴，一起延续这份热忱！
