justmurmur

為什麼要使用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都會幫你留有紀錄,協同管理上更簡便。

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 or like, so I know you are with me..

CC BY-NC-ND 2.0

Want to read more ?

Login with one click and join the most diverse creator community.