首頁 » SEO 優化 » 寫給行銷人的 GTM 觀念篇,10 分鐘入門網站優化最佳利器
GTM新手入門文章

寫給行銷人的 GTM 觀念篇,10 分鐘入門網站優化最佳利器

網站優化需從數據追蹤與分析做起,身為 SEO 行銷人的你是否有以下煩惱?

  • 要埋碼不懂程式,只能每次拜託工程師
  • 網站代碼埋太多,網頁載入速度變慢
  • 成千上萬個追蹤碼,你開始搞不清楚究竟埋了什麼
  • 老闆問起成效,不知道哪個行銷方式為你帶來銷售轉換

本文主角 GTM 已經拯救無數行銷人,雖然 GA4 開放更多事件權限,但也有一些限制。本次的 GTM 新手觀念篇,我們將結合 SEO 數據追蹤與分析的實戰經驗,為你釐清 GTM 新手易搞混的觀念,手把手帶你安裝 Google Tag Manager,並串接 GA。

認識GTM:網站優化必備的數據分析神器

GTM意思
GTM 是什麼?

Google 代碼管理工具(Google Tag Manager,GTM)是一套代碼管理系統(TMS)。安裝 GTM 後,網站分析師與行銷人員無需再更改網站程式碼,即能輕易將各種追蹤程式碼及第三方應用工具安裝到網站中,並在同個平台完成追蹤與管理。

雖然 GTM 是 Google 的產品,但它並不僅限於處理 Google 服務產品(如 Google Ads 或 Analytics)的代碼。我們還能使用它來管理許多不同的第三方工具,包括臉書像素(Meta Pixel)、Bing Ads、Crazy Egg 和Hotjar⋯⋯等。

如果你在 GTM 沒有找到相對應的模板來管理代碼,你甚至還能添加自定義代碼喔!

GTM GA 差異為何?GTM ≠ GA,別再混淆!

新手最容易搞混 Google Tag Manager(GTM)與 Google Analytics(GA),然而這兩者雖有同樣的目的(網站分析與優化),但卻是截然不同的工具。

我們都知道 GA 是網站數據分析工具,裡面提供各式報表,若我們要用 GA 分析網站訪客輪廓與行為,須請工程師幫我們把 GA 的追蹤碼埋入我們的網頁。

同樣地,我們今天想追蹤 FB 廣告成效與轉換,也需要請工程師重複一樣的動作將 Meta Pixel  埋入我們的網站⋯⋯通常我們的行銷活動就會在反覆溝通、debug 過程結束。

為了提高效率,Google 推出 GTM,GTM 介面幫我們整合各項代碼資源,讓我們只要做一次埋碼的工作,只要設定無誤,就可以一站式管理各項追蹤代碼,不必次次拜託工程師,最後 GA 報表、FB 廣告數據照樣輕鬆 get!

因此,GTM 與 GA 的差異如果從功能面切入的話,GA 是用來追蹤和儲存數據的工具;GTM 是用來管理追蹤碼的工具,並不是任何一種追蹤機制。

使用 GTM 對行銷人的好處

為什麼要使用 GTM?

GTM 是個代碼管理平台,集中管理延伸的好處有代碼精簡、版本管理、資訊安全,甚至在 GA4 設定進階的事件或電子商務追蹤,相對輕鬆許多。

GTM好處
  • 排名成效:過往為了追蹤各式的網站數據,我們會在網頁中加入大量 JavaScript 程式碼,過多的程式碼會拖累網站速度,影響 SEO 成效,甚至會導致伺服器超載。透過 GTM 埋設不同的代碼,實際上不會被寫入網頁的 HTML 裡,因此不會拖累網站速度,影響你的排名。
  • 版本管理:GTM 是以版本來做紀錄,每次更新的代碼都會產生新的版本,若其中有任何環節出錯,也能還原版本。另外,GTM 有提供測試功能,事先在代碼發布前偵錯,行銷人員可以檢視哪些代碼因為錯誤而沒被啟用,立即調整設定。
  • 資訊安全:若以過去的埋碼方式,競業可能可從網頁 HTML 獲得我們的情報,若改用 GTM,我們便能做好保護措施。

為什麼升級 GA4 之後,在實務上,我們還是建議安裝 GTM?

在通用版 GA 的事件或電子商務追蹤,無論簡單複雜,都需要工程師協助;在 GA4,可以用事件設定功能設定一些簡單的事件,然而進階的事件或電子商務追蹤,仍然需要工程師協助,而且可能很複雜。

如果用 GTM,無論在通用版或 GA4,行銷人員都可以自行設定一些簡單的事件,進階的事件或電子商務追蹤,雖然仍然需要工程師協助,但相對比較不複雜。

了解 GTM 組成元素,掌握 GTM 帳戶架構

Google Tag Manager 的帳戶組成元素包括:帳戶(Accounts)、容器(Containers)、代碼(Tag)、觸發條件(Triggers)、變數(Variable),架構類似 GA。

GTM帳戶架構
🔼 GTM 帳戶架構 🔼

GTM 各元素介紹(數字可以對應上方的 GTM 帳戶架構圖):

1、帳戶(Accounts):帳戶是 Google Tag Manager 架構中的最高層級,一個帳戶可以用來管理一個或多個網域,基本上公司名稱就是帳戶。

2、容器 (Container):容器就是放置代碼(Tag)的地方。一個容器對應一個網域, 一個帳戶底下可設定一或多個容器,也就是一個公司名稱底下可以追蹤多家網站與 APP。容器也可以放入多個代碼標籤與觸發條件。

3、代碼 (Tag):代碼就是我們想要追蹤事件的程式碼,代碼被觸發後會把資料回傳到某個系統,如 GA。

目前臉書 Meta Pixel 未被收錄,需要我們自訂 HTML 新增代碼。

4、觸發條件 (Trigger):觸發條件用來監聽事件,並指定代碼啟動的時間,由變數(Variables)、運算符號(Operators)與值(Values)組成。我們可以設定想要追蹤的事件,根據 Google 官方說明,包括網頁瀏覽、網頁點擊、表單提交、網頁捲動頁數⋯⋯等。

5、變數 (Variable):變數則是定義觸發條件的執行準則與細節,如我們想追蹤點擊,那點擊的網址就是我們要設定的變數,是觸發條件的一環,我們可以內建變數(GTM 提供的變數),也可以自訂變數。

GTM帳戶元素

GTM 安裝與串接 GA 實操教學

掌握 GTM 帳戶層級與元素後,我們進入申請 GTM 的流程教學。

1、註冊 GTM、設定容器

首先註冊GTM 帳戶,帳戶名稱輸入公司名稱,選擇主要服務地區,接下來在容器欄位輸入你的網域名稱。

GTM安裝:註冊 GTM、設定容器

2、將 GTM 程式碼貼到網頁原始碼中

成功創建後,GTM 會提供一段代碼,我們可以將代碼提供給工程師請他幫我們埋入網頁原始碼 <head> 與 <body> 後面。

GTM安裝:將 GTM 程式碼貼到網頁原始碼中
如果你的網站是將能架設 WordPress 網站,可以安裝 Google 推出的外掛 Site Kit by Google,就不需要動到程式碼 。

3、GTM 的安裝測試

接下來,使用 Chrome 的擴充功能 Tag Assistant,安裝這個工具並啟動 Tag Assistant 後,重新刷新頁面,看看是否相對應的代碼跑出來,如果有出現就大功告成咯!

GTM安裝:安裝測試

4、串接 GA3 或 GA4,啟用最基本的的 page view 功能

安裝好 GTM 以後,接下來就是串接 GA,這樣我們之後就能在 GTM 管理 GA,我們這次就先建立最基礎的事件——page view(頁面瀏覽)作為教學。

第一步:到代碼頁面,新增代碼

第二步:命名資料夾名稱如「GA_Pageviews」,並且選擇代碼類型,請留意通用版 GA 和 GA4 名稱不一樣

GTM 串接GA3 GA4-1

第三步:設定變數 – 追蹤類型選擇「網頁瀏覽」,然後在「選取設定變數欄位」,按下新增變數。回到 GA 的「資源設定」去複製追蹤 ID,貼上並儲存

第四步:設定觸發條件 – 選擇 All Pages

GTM 串接 GA3 或 GA4 2

第五步:記得點擊提交,這樣就完成GTM 與GA 的串接與事件設定了!

快來加入 GTM 吧!

GTM 對行銷人帶來的好處就不多說了,我們強烈建議想要經營網站,尤其是電商網站的行銷人安裝 GTM。不過想要玩轉 GTM,必須先把 GTM 的帳戶架構了解、掌握好,才有利於後續埋設事件等。

如果對本篇內容有任何疑問,或是想對網站做數據健診或 GTM 優化,歡迎點擊聯絡我們,我們很願意與你分享我們做數據分析的實戰經驗喔!

今天就趕快利用 GTM 帶你晉升數據導向的公司,讓你的決策不再只靠直覺,而是有數據佐證,當我們的行銷數據全都一目了然攤在老闆與團隊面前時,相信我們更能確信未來該怎麼走!

延伸閱讀

網站優化建議清單,帶你做好 On-Page SEO

網站優化專案怎麼做?從導入到建立SEO 文化都很重要!

讓「將能」成為您的商業夥伴

用搜尋幫助企業成功

購物車
回到頂端

謝謝您訂閱我們的電子報,我們會把簡報寄送至您的信箱,若多日未收到,請到促銷信件查看!