為什麼要使用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
你可能感興趣的文章
Like my work? Don't forget to support and clap, let me know that you are with me on the road of creation. Keep this enthusiasm together!
