[GTM] GTM 是什麼?實際帶你看!

游包子
6 min readApr 25, 2022

--

本系列為不定期更新的一連串 GTM 文章,為筆者之前學習的筆記整理。

什麼是 GTM ?

GTM 為 Google Tag Manager 的縮寫,為 Google 出的代碼管理工具。可以利用其管理各種要裝在網頁的工具埋碼,如:GA、Google Ads、Google Optimize、Hotjar、Linkedin Insight、Pinterest Tag……等。

GTM 最普遍使用在 Google Analytics 代碼的埋碼上。本系列也會先從使用在 GA 上的觀點來講述 GTM 的強大。利用 GTM 來用在 GA 埋點上原因在於其有以下優點:

① 可以不用麻煩前端工程師去埋碼

過去舉凡 GA 上想要變動什麼,都需要前端工程師調整埋碼,但可能要等前端工程師有空的時候才有辦法幫你調整,沒辦法即時處理,若使用 GTM,就能自行改動,不必再經過前端工程師。

雖然目前GA 新版的 GA4 已經有大部分不用額外埋碼了,不過更進階設定功能還是需要 GTM 處理,一開始最好就導入會比較好。

② 有系統性地控制代碼版本

GTM 只要改動了什麼,就必須要經過發布才能使用,發布時可以記錄此版本改動了什麼地方、建立時間、發布時間、發布者等,必要的時候還可以換回前幾個版本,對於多人協作或是新舊人交接工作友善很多。不會改動都要問負責的工程師,也減少工程師說他忘記了或發生記憶腦補的狀況。

③ 方便預覽偵錯

GTM 有預覽模式,可以在設定好代碼後直接做測試,尤其對於數據埋點測試上來說很方便。

④ 「有可能」提升網站載入速度

若網頁埋入大量追蹤代碼,會讓網頁讀取速度變慢,但若透過 GTM 去設置代碼,有可能可以加速網頁載入速度。但因為追蹤碼也可用非同步方式載入,這樣其實有沒有用 GTM 對網頁載入速度差異不大。

了解完為何要使用 GTM 後,接著我們來看怎使用 GTM。目前 GTM 學習上不像 GA 那麼友善,還會有 Demo account 讓你就算沒帳戶或沒數據也可以大致看一下可以產生什麼結果,GTM 一進去就是一~片~空~白~。若我們要了解介面可以先試著埋 GA 程式碼。

怎麼利用 GTM 埋 GA 程式碼?

① 先去 GTM 介面新增帳戶,再請前端工程師幫你安裝 GTM 程式碼

點 GTM 網址>>> https://tagmanager.google.com/#/home

你會看到以下這畫面,勇敢按下建立帳戶吧!

都填完後按建立會跳出合約條款,因為你要用 Google 服務就是別無所選一定要按同意了。

同意後你會到 GTM 介面,會跳出彈窗請你將兩段程式碼放到每個網頁的指定位置,這會是你日後唯一要麻煩前端工程師的地方了,日後其它設定你都可以自行在 GTM 搞定。

不過若你僅僅想看一下 GTM 介面學習一下,那你就先按「確定」或「X」將這個彈窗關閉即可。日後要找回這兩段程式碼來埋,可以按介面左上方的「管理」,再點選安裝 Google 代碼管理工具,就可以找回來了。

② 假設前端工程師幫你埋好兩段程式碼了,那就繼續在 GTM 中設定

接著要回來 GA4 找下評估 ID。打開管理>資料串流,就可以看到評估 ID 了,按下旁邊複製即可。若你還沒有 GA 權限那可以先暫時看一下 Demo account 了解在哪。

複製好評估 ID 後,回到 GTM 介面,再一個一個設定。在那之前先簡單介紹一下 GTM 基礎層級概念。

帳戶就是我們之前填寫的公司名稱,容器就是我們之前填寫的網站名稱,都已經準備好了。所以我們還剩下 Tag、Variable、Trigger 還沒有設置。這次不會用到變數所以可以先忽略之。

先從工作區那邊點代碼新增。

依序填入該填的,再按右上方的儲存。

③ 預覽看是否有正確設置,無誤再提交

原則上是進去後看有沒有出現 GA 數據,有的話就沒太大問題了。

再來,點選發佈,填入該填的資訊,發佈完就大功告成了!

你可以去 GA 看看是否有即時數據在報表上了,而且你也默默完成 GTM 第一個代碼設定了~可喜可賀!

GTM 介面長怎樣?

這是進去後基本的總覽畫面。

下列為設定介面參考

代碼為最重要也是最後包含所有設定的基礎,所有設置過追蹤事件的程式碼都會放在這裡展示。

觸發條件管控程式碼被觸發的規則,也可以來這邊新建並找尋過往有設置過的項目。

變數判斷程式碼在何時回傳資訊,內建變數已經有很多可以選擇了,你也可以新增自訂變數。

資料夾可以將同系列的代碼、觸發條件、變數收起來,避免日後要用找不到。

先了解介面,後續再學習如何使用,將會事半功倍喔~

參考資料:

【GTM教學】新手篇:十分鐘搞懂 Google Tag Manager

GTM導覽!行銷人的百寶袋,輕鬆管理網站追蹤程式碼 — Code For Marketing

全新 GTM 預覽模式 完整使用教學 — 數據酷

--

--

游包子
游包子

Written by 游包子

在電商、硬體、軟體圈打滾過的產品經理,有任何意見或合作邀約請寫信至 lilianyoyabe@gmail.com

No responses yet