這是一篇我希望當初我在學 Google Tag Manager 時,就有人能為我準備好的文章,當時的我雖然找不到,但在歷經無數的學習與鑽研後,現在,我將這篇文章交給你了!
在文章開始前想與你分享,我在 2024 年開設的最新課程:數據啟航:Google Analytics 4 與 BigQuery 整合應用入門,手把手教你如何進行 GA4 客製化使用。
Google Tag Manage(代碼管理工具)是一個非常強大的工具,它使網站數據追蹤變得更容易,能節省網路行銷人以及工程師好幾倍的時間成本! 過去 5 年,我自己也將它應用在大大小小的專案中,它已經成為我管理網站數據追蹤碼不可或卻的必要工具。
想要追蹤按鈕點擊? 沒問題,
想要追蹤表單提交? 一樣也能快速搞定!
進行網站使用者的行為追蹤,不需要寫任何一行程式,這就是 Google Tag Manager 最常見的基礎應用。
行銷人不需要再等到忙碌的工程師有空時(通常要好幾天),才把你的追蹤碼安裝到網站裡,你自己就可以進行追蹤碼的部署,不過!有了這項工具,並不代表你不需要工程師了,反而是能使團隊更有效率的合作,所以,透過 Google Tag Manager 你就能夠更快速的安裝數據追蹤碼到網站裡,例如 廣告轉換(Google Ads、Facebook Pixel)、網站分析(Google Analytics) … 等等。
不過,應該要從哪裏開始呢? Google Tag Manager 看起來有許多專業術語,的確,它對於初學者來說有一定的學習曲線,這也是我寫這篇文章的目的。
Google Tag Manager 是什麼
Google Tag Manager 是一個追蹤碼管理解決方案,它作為網站與第 3 方追蹤碼的中間層,可以節省許多人力與時間成本,而且完全免費。
你要做的,只是到 GTM 後台,設定想要安裝的追蹤碼以及希望的啟動時間點即可。
例如. 你希望在使用者到達感謝頁的時候啟動 Google Ads 轉換追蹤碼
你也可以把 GTM 想像成是一個學校糾察隊中控室,你可以設定違規行為,來讓糾察隊員為你做登記,假如邊走邊吃要做登記的話。
那麼
違規項目 = 邊走邊吃 = Google Ads 轉換(追蹤碼)
糾察隊的登記依據 = 行進中且嘴巴在咀嚼 = 到達感謝頁
所以
你可以設定很多違規項目以及登記依據,來讓糾察隊去登記各式各樣的違規行為,就好像網站有各式各樣追蹤碼,需要在特定時間點啟動。
GTM 還提供了很方便的測試功能 — 預覽模式,它可以讓你快速測試該啟動的追蹤碼,到底有沒有在特定行為發生時啟動,此外,GTM 還有一個超大的優點,就是數據追蹤碼的部署,不一定非得要去改動網站原始碼。
所以,相較於傳統直接將追蹤碼安裝到網站的方式,若你使用了 GTM,你只需要在後台點擊幾下就能完成追蹤碼的安裝。
Google Tag Manager 與 Google Analytics
許多初學者都會對於 Google Tag Manager 與 Google Analytics 之間的關係感到困惑,而不知道要使用哪一個,其實,它們是互相獨立的工具,並沒有誰取代誰。
Google Tag Manager 只是讓我們能方便管理追蹤碼,並且進行資料轉運,而 Google Analytics 則是專門用來蒐集訪客數據的工具,並且提供相應的報表。
所以,我們是透過 Google Tag Manager 來啟動 Google Analytics 進而達到蒐集數據的目的。
而且不只有 Google Analytics 可以透過 Google Tag Manager 做管理,其他類型的追蹤碼也可以:
- Google Ads 轉換與再行銷
- Facebook Pixel
- Hotjar
- 任何 HTML 追蹤碼
5 個使用 Google Tag Manager 帶來的好處
好處一、快速部署追蹤碼
以下是使用傳統方式將追蹤碼埋入網站的日常
- 行銷人想要開始一個新的行銷/分析專案,需要蒐集使用者數據來衡量成效
- 行銷人將追蹤碼提供給工程師
- 如果想要蒐集的數據較複雜,則還需要許多信件來回以及會議討論
- 由於工程師很忙碌,通常要等上好幾天(禮拜),整個數據追蹤專案才會完成
若使用 Google Tag Manager,在許多情況下,以上的冗長流程可以被大幅改善。
因為埋追蹤碼不一定非得要去改網站,你可以在後台安裝任何想要的追蹤碼,效率大幅提升。
好處二、提昇行銷人與工程師合作效率
Google Tag Manager 把數據追蹤分解成 3 個元件:代碼、變數與觸發條件,換句話說,只要能夠完成這 3 個元件的設定,就完成了一個數據追蹤。
由於行銷人與工程師有了共同的語言,因此溝通成本大幅降低。
好處三、所有追蹤碼都在同一個地方集中管理
若使用傳統方式將追蹤碼埋入網站,由於程式散落在網站程式的各處,不管是想要維護或者更新,都相當不便。
若使用 Google Tag Manager 所有追蹤碼都在後台很清楚的條列,由於追蹤碼都被元件化,因此維護更新非常方便,而且更重要的是,行銷人與工程師可以一起管理維護這些追蹤碼,這些追蹤碼不會再落入一個三不管地帶。
好處四、行銷人也能自行部署追蹤碼
由於 Google Tag Manager 將追蹤碼範本化,因此不需要寫程式就能完成追蹤碼的設置,這對於行銷人來說非常方便。
例如你可以在 GTM 後台的友善介面下,來完成一個 Google Analytics 事件設置:
好處五、內建測試工具
正確的數據絕對是一個數據追蹤專案的最基本要求,Google Tag Manager 提供的預覽模式可以讓使用者可以很方便以及完整的測試。
說到測試,當然也不能忘了許多很棒的瀏覽器插件,例如 Google Tag Assistant、Facebook Pixel Helper 與 dataLayer Inspector。
Google Tag Manager 是如何運作的
所有初學者要開始使用 GTM,一定要先認識這 3 個 GTM 主要元件:代碼、變數以及觸發條件
代碼:是一段要被安裝到網站上的程式。
它可以是數據追蹤碼模板。例如 Google Analytics,也可以是任意的 HTML,例如用來更換網站的按鈕顏色。 當你建立一個代碼,就是請 GTM 幫你執行特定任務,例如,你可能會希望當使用者在網站進行點擊或者瀏覽時,紀錄 Google Analytics 數據。
觸發條件:是一個啟動條件,來決定代碼要什麼時候啟動。
代碼可能會需要在許多不同時間點啟動,例如點擊、網頁瀏覽甚至表單提交時… 等等, 因此這些時間點就必須被定義在觸發條件。 當一個觸發條件裡所設定的條件被滿足時,所有使用了該觸發條件的代碼都會啟動,而反過來說,沒有觸發條件的代碼是不會啟動的。
變數:它是一個小幫手,可以協助我們完成一些重要設定,它會被用在代碼以及觸發條件裡。 變數可以用來:
- 儲存資料:例如超連結網址、超連結上的文字甚至訂單金額 … 等等
- 儲存代碼設定:例如 Google Analytics 設定變數可以用來儲存 Google Analytics 代碼的相關設定(資源編號、自訂維度 … 等)
- 程式:變數裡還可以寫程式來進行一些複雜的操作,不過對初學者來說太進階了,我們先不細談這個部分。
我們接著來看看這 3 個元件如何組合在一起:
接著來看一段範例,假如我們希望在使用者到達訂單完成頁時啟動一個 Google Ads 轉換,並且附帶訂單金額,看起來就會像是:
建立 Google Tag Manager 帳號
要開始使用 GTM 必須要先建立一個帳號,可以進到官方網站進行申請,並且點擊右上角的按鈕。
就像許多 Google 產品一樣 (Google Analytics、Google Ads),你必須先有 Google 帳號才能開始進行 GTM 帳號申請,登入後會看到以下畫面。
建立帳號的同時,也必須進行容器設定,你可以根據你的平台選擇容器類型(網站、AMP、iOS 與 Android)。
Google Tag Manager 的帳號架構與 Google Analytics 帳號架構非常相似,帳號通常是以公司或者客戶為單位切分;而容器則要視數據策略的規劃來決定是否要讓多個網站共用,例如你同時經營電商以及部落格網站,兩個網站會互相導流且需要進一步分析彼此之間的成效關聯,又或者你希望使用部落格的數據來為電商網站下廣告,在這些情況下就適合共用同一個容器。
而反過來說,如果你經營兩個網站,彼此之間沒有任何關聯,也沒有需要交互運用資料,那麼共用容器可能就不是那麼的方便了。
安裝 Google Tag Manager 到網站
在建立 Google Tag Manager 後,就會在工作區裡看到一個彈出視窗,包含容器程式碼,你必須將這兩段程式碼交給工程師,並且根據指示進行安裝,<script> 區段要埋到 <head> 而 <nosript> 區段要埋到 <body> 開頭。
如何確認 Google Tag Manager 安裝成功
在安裝 Google Tag Manager 到網站後,就可以來測試是否有順利運作,推薦 2 種方法進行測試:
一、開啟預覽模式
首先到 Google Tag Manager 工作區裡點擊右上角的預覽
回到頁面進行重新整理
二、使用 Google Tag Assistant
Google Tag Assistant 是一個 Chrome 插件,可以很方便的用來測試 Google 相關的程式碼在網站上是否順利運作。
在將插件安裝到瀏覽器後,請點擊 Enable
接著再次重新整理頁面,就可以看到代碼安裝的情況
每個 Google 追蹤碼標籤可能有 3 種情況:
- 綠色代表完全沒問題
- 藍色代表運作中,但仍有部分可以改善
- 紅色代表錯誤
如是藍色或者紅色你可以點擊標籤來進一步查看改善建議
透過 Google Tag Manager 安裝 Google Analytics 網頁瀏覽
每個網站幾乎都要安裝 Google Analytics 來衡量成效,在過去,行銷人得在 GA 後台拿到追蹤碼,並且轉交給工程師進行安裝。
不過,現在我們已經安裝好 Google Tag Manager,所以行銷人自己就可以來安裝 Google Analytics,我們立即來建立第一個代碼吧!步驟如下:
首先到工作區的代碼區塊,點擊新增代碼
點擊代碼設定
選擇通用 GA
追蹤類型為網頁瀏覽,接著在 Googe Analytics 設定點擊下拉選單裡的新增變數,我們準備來建立第一個變數。
Google Analytics 設定變數是一個很方便功能,它可以節省我們大量的時間,它主要的概念是將代碼的相關設定存在變數裡,例如追蹤編號、跨網域設定甚至自訂維度 … 等,如果沒有使用這項功能,在管理上會非常不便。
我們想像一下那會是什麼樣的情況,例如你有 30 個 Google Analytics 代碼,而你突然需要新增一個自訂維度,而且所有代碼都要有這個維度,那麼,你必須要到 30 個代碼裡去修改 30 次才行,這幾乎是不可能的任務,非常耗費時間,此外,GA 資源編號是個必填的設定,因此你可能也不會希望每次要新增代碼都得要去 GA 後台查詢一次資源編號。
所以,使用設定變數,看起來就會像是,你把相關設定都存在變數裡,然後所有代碼都使用這個變數,所以每次要做更動只要改變數即可。
我們來完成 Google Analytics 設定變數的設定吧! 首先,我們得將 GA 追蹤編號儲存到設定變數裡,這樣這樣 GTM 才知道要把資料送到哪一個 GA 帳號。
接著到 GA 後台 > 管理 > 資源 > 追蹤資訊 > 追蹤程式碼裡複製追蹤編號
儲存變數後,代碼就使用了 GA 設定變數;我們接著看到代碼設定下方,點擊觸發條件,然後為代碼設定一個 All Pages
的觸發條件,顧名思義這個觸發條件會在所有頁面都啟動。
接著點擊儲存代碼,就大功告成了! 你已經完成了一個 Google Analytics 網頁瀏覽追蹤,這跟把 Google Analytics 追蹤碼直接埋到網站裡的效果是一樣的,我們接著來進行測試。
預覽模式
在發布變更之前,我們必須先測試代碼有沒有正常運作才行,這時我們就可以使用預覽模式來快速進行測試。
預覽模式開啟後,所出現的預覽面板,可以用來觀察代碼的相關運作情況!
請在工作區點擊右上角的預覽,點擊後就會看到橘色的提示訊息,代表預覽模式已經開啟。
接著回到網頁重新整理頁面,就可以看到,剛剛所建立的 Google Analytics 代碼已經啟動。
同時我們也可以到 Google Analytics 的即時報表裡來查看是否真的有收到數據,請到 GA 後台 > 即時 > 總覽。
的確,我們也可以在即時報表裡看到數據。
發布 Google Tag Manager 容器
在測試完成後,我們就可以提交變更,來讓變更真的生效在網站裡,請在工作區點擊右上角的提交。
(反過來說,在發布以前,開啟預覽模式時,變更只作用在你當下的瀏覽器,並不會影響到一般使用者)
在提交設定裡,有 2 個選項,分別是
- 建立版本:指的是把當下工作區所有變更儲存並建立版本,這就好像打遊戲存檔一樣,如果不小心被 Boss 打死還可以重頭來過,把版本做好分類,可以讓你隨時能將容器返回某個穩定的版本。
- 發布及建立版本:指的是除了建立版本,還同時將變更發布到線上,因此所有使用者都會吃到新的變更,換句話說,也就是正式的開始蒐集數據啦 ~~
我們要選擇發布及建立版本,並且為版本取個適當的名字,然後點擊右上角的發布。
你的下一步
很開心你看到這裡,接下來開始將所學應用 Google Tag Manager 到你的專案裡吧!
GTM 是需要花時間掌握的工具,不過卻能節省行銷人與工程師的大量時間,如果你希望在短時間內,可以更深入且完整的掌握它,建議你可以參加我的 Google Tag Manager 從入門到進階課程。