Google 代碼管理工具是什麼？為什麼數位行銷會需要 GTM？

Published in

I think, therefore I do.

7 min readSep 17, 2023

在數位行銷的世界，最重要的事情就是追蹤使用者的網路足跡，以了解所企劃的行銷活動是否有達成目的，而 Google 代碼管理工具（Google Tag Manager 簡稱 GTM），就是來幫忙解決這些問題，幫助你有效管理所有代碼（如：GA4、FB Pixel 等），簡單點擊幾個按鈕，就可以完成基本追蹤事件的設定。

舉個例子，你會不會想知道使用者點擊廣告之後來到網站，是否有看完所抵達的頁面？有沒有看到我們希望他看到的活動 Banner？有沒有對該產品產生興趣進而點擊？是否有將該產品加入購物車？有沒有再加入購物車之後將產品結帳甚至是使用活動優惠代碼？

行銷人以及老闆想知道使用者的行為可以說是不勝枚舉，期望透過這樣的流程追蹤，了解到預算該怎麼花以及精準的規劃行銷活動，並且可以透過追蹤數據，回頭去修改企劃內容，以求達到最大效益。

既然要追蹤使用者在網站上的行為，我們就必須要針對使用者在網頁上的特定動作埋入「代碼」進行追蹤，並將追蹤的事件以及參數傳送給網站分析工具 Google Analytic 4，讓行銷人員可以透過 GA4 了解到使用者在網站上的行為以及活動的成效。

當然，我們不一定要透過 GTM 才能完成這些事情，只是使用 GTM 會讓一切更有效率。

本篇重點

為什麼要用 GTM Google 代碼管理工具？
用 Google 代碼管理工具管理所有代碼
Google 代碼管理工具的運作原理

為什麼要用 GTM Google 代碼管理工具？

在很久很久以前，如果我們要在網站裡面放入一些特定的代碼，如：Facebook 廣告 Pixel、Google Ad 代碼、Google Ad 目標轉換追蹤碼、GA4 評估 ID 甚至是知名的網頁熱點分析工具 Hotjar 追蹤碼，我們都必須要透過網站工程師幫我們將這些代碼置入到網頁當中。

行銷人員：Hi, 我想要將這些代碼放入到網頁 A、網頁 B 跟網頁 C 當中，
代碼 A 放在 網頁 B 的 Header，代碼 B 放在網頁 C 的某一按鈕上面。

工程部門：好的，我們排入 Task ，預計一個禮拜的時間完成。

如果只是一次性的工作，還沒什麼問題，行銷部門將代碼規格列出，並告知網站工程師該放置在網頁的哪個位置或是哪幾個特定網頁，就可以了。

問題是，在數位行銷的世界裡，行銷需求千變萬化，常常需要針對追蹤的項目做更動，就必須再麻煩工程師修改調整，儘管成功上架，但上架之後有問題又要再回頭麻煩工程師，一來一往，曠日費時。

而 Google 代碼管理工具的出現，便解決了這種這樣的狀況，維繫了網站工程部門與行銷部門的和平，也加速了行銷活動追蹤設置的效率，更降低了行銷部門請工程師客雞排珍奶的次數跟費用，所有的追蹤代碼，可以透過 GTM 一站式完成設置，不用再頻繁麻煩網站工程師。

用 Google 代碼管理工具管理所有代碼

過往我們是將 所有追蹤代碼 透過工程師幫我們直接放置在網站上面，而使用 GTM 的話，我們只要請工程師幫我們放置一串 GTM 的代碼，便可以將所有追蹤代碼放在 GTM 當中，讓 GTM 幫我們「放置」在網站上面。

而一段 GTM 代碼大概長得像是下面這樣：

<!-- Google Tag Manager -->
<script>(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-M3345678');</script>
<!-- End Google Tag Manager -->

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-M26DMBPD"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

這麼做的好處是，除了行銷部門管理代碼方便以外，許多過往設置較為麻煩的追蹤方式，不用再透過網站工程師，也不用等待他們的排程以及網站版本更新時間，行銷人員只要輕鬆點幾個按鍵，就可以完成追蹤設定。

再來，不會一堆代碼在網站上面拖慢網站速度，因為透過 GTM 的觸發條件設定，只有在滿足條件的情況下，指定代碼才會觸發。

（補充一下，有些特別的追蹤需求，會需要放入客製化的 JS 代碼，一個不小心可能很容易造成網站出錯，小錯網站跑版，大錯則交易失敗，因此都會建議除了確實執行 GTM 預覽模式以外，也可以先透過測試站進行代碼測試，並事先與網站工程師溝通，請工程師先行審視過代碼，確認沒問題，再透過 GTM 發佈到網站上使用。）

我們可以把 GTM 想像成是一個廣告代理商，想像一下，如果你今天想要在各家不同的媒體平台上投放廣告，你需要跟各個媒體平台的窗口逐一接洽，這樣可能會非常繁瑣且耗時。

但如果透過廣告代理商，你只需要與廣告代理商的窗口溝通，他們會幫你採買各家媒體平台的廣告，而 GTM 就扮演著如同廣告代理商的角色。你只需面對 GTM，將你不同類型的代碼需求提交給 GTM，然後它會幫你將這些代碼發佈到網站上指定的位置，從而完成你的追蹤目標設定。

Google 代碼管理工具的運作原理

在 GTM 中，有 3 個簡單的基本元素，分別是代碼、觸發條件以及變數，當使用者在網站上面滿足了特定觸發條件後（例如點擊某按鈕），就會啟動特定代碼（例如 GA4 事件），接著，事件名稱、變數稱以及對應的變數值，傳送到特定的接收器當中（例如 Google Analytic 4 或是廣告後台）。