Ranking 小編
2023/09/28
瀏覽次數

首頁 / SEO知識庫 / 【GTM 教學】Google Tag Manager 設定、埋碼一篇搞定!

【GTM 教學】Google Tag Manager 設定、埋碼一篇搞定!

完成所有行銷規劃,卻不知道如何追蹤成效?Google Tag Manager(簡稱 GTM)讓你不需要學會複雜的程式語言,也能自己完成各種追蹤碼埋設,從此之後成效追蹤不求人!本篇文章將帶給你最完整的 GTM 教學,從 GTM 安裝、串接 GA 到 GTM 埋碼一篇搞定!

目錄

Google Tag Manager 行銷人的代碼管理利器!

Google Tag Manager 簡稱 GTM,是 Google 開發的代碼代管系統,用來集中管理眾多追蹤網站行為的代碼,如 Google Analytics、Google Ads、Facebook Pixel 等。並且,在安裝完畢後,即便行銷人員對程式不熟悉,也能夠透過 GTM 在不更動任何網站程式碼的情形下埋 code,這也是為什麼 GTM 會成為所有行銷人、SEO 操作者必備技能的原因。

 

使用 GTM 的好處?GTM 的 3 大優點一次看!

A. GTM 設定優點 1:簡化埋碼流程

過去只要有新的追蹤碼時,大部分的行銷人員都要請工程師協助更改網站程式碼才能完成埋設,既麻煩又沒效率。但現在只需要完成 Google Tag Manager 安裝,就算你不懂任何程式語言,也能夠自行透過 GTM 輕鬆完成埋碼程序。

 

B. GTM 設定優點 2:降低埋碼失誤

如果是利用更改網站程式碼進行埋碼,就必須要等到網站發布才能確認是否有安裝成功,但 GTM 中有提供預覽功能,讓使用者埋設完畢後可先進行測試,文章後續也會教大家如何使用該功能。

並且,GTM 系統內會留有各版本的修正記錄,若有任何設定環節出錯,都能復原成上一個版本進行修正。 

 

C. GTM 設定優點 3:提升網站速度

相信大家對於「網站速度是影響 SEO 的重要因素」並不陌生,然而過去將追蹤碼片段直接埋設於網站程式碼中的方式,會造成網站內有過多 JavaScript 程式碼拖累網站載入速度。

但 GTM 埋碼不會將追蹤碼寫入網站的 HTML,因此可以有效避免網站體質受到影響,大幅提升網頁載入的速度。

 

釐清 GTM GA 的關係

Google Tag Manager 最常搭配使用的就是大家耳熟能詳的 Google Analytics(簡稱 GA),但大家肯定會好奇,他們兩者之間究竟是什麼關係呢?

我們可以這樣理解:Google Tag Manager 是掌控者,Google Analytics 和其他這種類型的工具是執行者。

GTM 作為控制者,負責管理不同代碼、下達執行指令,而屬於代碼之一的 GA 則是執行者,負責在網站上依據指令監控使用者的行為,並將數據記錄下來以便日後進行分析。兩者在功能面上為互補關係,需要搭配使用才能達成使用者網站行為追蹤的最終目的,接下來我們也將以 GA 為例,教大家如何完成 GTM 與 GA 的串接,趕快繼續看下去吧!

延伸閱讀:GA4功能與差異解析,帶你無痛升級到新版Google Analytics!

 

GTM 教學 (1):如何安裝 GTM

GTM 四大元素

在安裝 GTM 之前,我們需要先了解 GTM 四大組成元素

  1. 帳戶 (Account)
    帳戶是 GTM 中的最高層級,一個帳戶可以用來管理多個網站(也就是可以容納多個容器)。

  2. 容器 (Container)
    容器可以理解成「網站」,一個網站對應一個容器,容器內可以裝載許多代碼和觸發條件。

  3. 代碼 (Tag)
    GTM 代碼用來追蹤和記錄使用者在網站中的行為,並將數據回傳至指定平台,如 GA、 FB 後台等。

  4. 觸發條件 (Trigger)
    用來定義代碼在什麼情況下會進行行為記錄,由「變數」、「運算符號」與「值」三個元素組成。
    (1) 變數(Variable):意指觸發條件執行的規則,又分為「內建變數」和「使用者自訂變數」。內建變數是 GTM 系統內預設的值,如點擊連結、頁面滾動深度等,只要進入內建變數的頁面就可以直接選取使用;使用者自訂變數則是可以讓使用者自行定義自己需要用到的變數。
    (2) 運算符號 (Operator):用來定義變數與值之間的關係,常見的運算符號有「(不)包含」、「(不)等於」等。
    (3) 值(Value):指的是對應到變數的內容,舉例來說「點擊連結」對應的值就會是被點擊的那個連結,而「網頁滾動深度」對應的值就會是%數。

GTM Trigger

 

A. 步驟一:設定帳戶和容器

進入 GTM 頁面後,點選頁面右上角的建立帳戶,在彈跳視窗中填入相關資訊。

GTM 設定 帳戶和容器

 

B. 步驟二:設定追蹤網站

完成帳戶和容器設定後,將視窗中的程式碼提供給架站工程師,或是自行置入網站的 <head> 和 <body> 中,就完成 GTM 設置囉!

GTM 設定 設定追蹤網站

若是使用 WordPress 架設的網站,也可以透過安裝「GTM4WP」外掛程式、填入容器 ID 來完成 GTM 安裝。

GTM 設定外掛工具 GTM4WP

C. 步驟三:確認是否安裝成功 (使用 Google Tag Assistant)

在操作完上述步驟後,切記要檢查是否有成功安裝 Googe Tag Manager!若是使用 Chrome 瀏覽器,檢查的方式可以透過 Google 推出的擴充功能「Google Tag Assistant」,進入自己的網站後開啟外掛,檢查是否有 GTM 這個項目,項目裡面的編碼如果與容器 ID 一致,且顯示為綠色標籤,就代表 GTM 有安裝成功喔!

Google Tag Assiatant

 

GTM 教學 (2):GTM GA4 串接

在追蹤任何單一事件之前,我們需要先將 GA4 代碼植入網站中的每個頁面,後續才能讓 GA4 記錄各個事件的數據資料,這個過程就是俗稱的「網站串接 GA4」或「埋設 GA4」,GTM 教學的第二步就是要來教大家如何透過 GTM 完成 GA4 埋碼的流程。

 

A. 步驟一:新增 GA4 代碼

首先,我們先在 GTM 介面左側的欄位中找到「代碼」,點選新增後進入代碼設定,選擇「Google Tag 代碼」。

GTM GA4 串接_新增 GA4 代碼 GTM GA4 串接_Google Tag 代碼

 

接下來,填入 GA4 的 Data Stream ID(G-xxxxxxxxx 格式的 ID)到代碼 ID 的欄位裡,並將配置設定點開,將配置設定變數選擇「無」、設定配置參數 send_page_view = true,就完成代碼設定囉!

GTM GA4 串接_填入 GA4 ID

至於我們該如何找到 GA4 中找到要填入 GTM 中的 Data Stream ID 呢?首先我們需要先開啟 GA4,進入左下角的設定選單,找到 Data Streams 的項目並選擇想要查看 ID 網站。接下來進入頁面後,找到 ID 編號進行複製就可以回到 GTM 貼上囉!

GTM GA4 串接_如何找到 GA4 ID

GTM GA4 串接_如何找到 GA4 ID_2

 

B. 步驟二:設定觸發條件:All Pages

完成代碼設定後,接下來在下方的觸發條件選擇「All Pages」,意味著我們希望 GA4 在網站中的每個網頁被瀏覽時都能被觸發,完成這個步驟後,就代表我們成功將  GA4 埋設到網站裡囉!

設定觸發條件-All-Page

 

GTM 教學 (3):GTM 設定事件追蹤

我們使用 GA 的最重要目的是為了要追蹤使用者在網站上活動的數據,例如特定按鈕被點擊多少次、使用者瀏覽網頁的深度等等,接下來我們將以「追蹤 Ranking 網站上登入/註冊按鈕被點擊的次數」為例,一步步帶大家認識如何追蹤特定事件。

GTM-教學範例

 

A. 步驟一:新增並設定代碼

第一個步驟一樣是新增代碼,但換成 GA4 之後省略了許多繁瑣的設定步驟,只需要依照下圖指示填寫「事件名稱」的欄位,並且和通用 GA 一樣依照自己習慣、方便管理的方式設定即可。以 Ranking 為例,今天要追蹤註冊按鈕的點擊次數,我們就會把這個事件名稱設定為「點擊登入/註冊按鈕」。

GTM 設定事件追蹤_新增並設定代碼

 

B. 步驟二:設定觸發條件「點擊連結」

GA4 事件的觸發條件設定和通用 GA 相通,但在設定觸發條件之前,要先知道「按鈕」本身其實是被網站設計美化過的「連結」,以「登入/註冊按鈕」為例,它背後是導向登入和註冊頁面的連結。也就是說,如果我們要追蹤這個按鈕被點擊的次數,要設定的觸發條件會是「登入和註冊頁面的連結被點擊的次數」。

有了這個概念後,接下來進入實際操作的步驟。點擊觸發條件內的+符號,在跳出視窗內選擇「僅連結」。

GTM-教學-設定觸發條件-連結點擊

再來,我們先選擇將觸發條件的啟動時機選擇「部分的連結點擊」,意指我們只希望在這個頁面的這條連結被點擊時才回傳數據,之後在內建變數的跳出視窗中點選「Click URL」後,把該按鈕代表的連結貼入後面的方框。

GTM-教學-設定觸發條件

GTM-教學-設定觸發條件

如果不知道按鈕對應的連結為何,可以在網頁內按滑鼠右鍵,點選檢視後網頁程式碼會出現在右側資訊欄,點選資訊欄左上角的游標圖示,再將滑鼠移動到按鈕上,就可以從資訊欄中找到對應的連結了!

GTM-教學-網頁原始碼查看

 

C. 步驟三:使用預覽確定是否埋設成功

完成上述步驟 1 和步驟 2 我們就已經設立好一個事件追蹤,記得要按下 GTM 介面右上角的提交 GTM 才會正式將這個事件發佈喔!

但提交完畢還不夠,我們還需要檢查它是不是真的有埋設成功,這時候就會用到位於提交按鈕旁邊的「預覽」按鈕。

GTM-教學-預覽檢察功能

點選預覽後,將網站的連結貼入下方的方框中並按下 Connect,此時 GTM 會用一個新分頁呈現網站預覽畫面,同時出現 GTM 的另一個工作介面。

GTM-教學-預覽畫面連接

該介面中我們會需要觀看的是 Sammary 和 Tags 的部分(如下圖所示),Sammary 用來記錄預覽畫面內執行的動作,而 Tags 則是顯示目前所有埋設的代碼在對應的動作內是否被觸發。

GTM-教學-預覽畫面工作介面簡介

接著,我們只需要在網站預覽介面裡實際進行點擊「登入/註冊按鈕」,再透過 GTM 介面的 Sammary 找到 Link Click,點擊後若在 Tags Fired 中有出現剛設定的「點擊登入/註冊按鈕」,就代表代碼有埋設成功並發動喔!

GTM-教學-預覽畫面操作

 

D. 步驟四:等待資料匯入 GA4

改成 GA4 之後,在匯入資料的部分也不用再另外設定,但會需要等待 24-72 小時讓數據確實被傳入 GA4 後台,檢查的方式則是進入 GA4 的「event(事件)」欄位中,確認是否有我們在 GTM 設定的事件名稱,如果有看到的話代表數據成功被輸入了,但如果超過 72 小時都沒有找到對應的事件名稱,就需要去檢查是不是哪個埋設環節出錯囉!

GTM 設定事件追蹤_等待資料匯入 GA4

 

以上就是 GTM 安裝、串接 GA4 與事件追蹤的相關教學,如果還有任何工具或 SEO 相關問題,都歡迎聯繫 Ranking 的專業顧問團隊,將有專人為您服務!

 

專家級 SEO 優化公司推薦|Ranking

Ranking 是台灣 SEO 專業品牌,擁有超過百人的專業顧問團隊,並且獨家開發 Ranking SEO 工具,是台灣少數同時具備顧問、工具、教學全方位服務的 SEO 公司。成立至今已操作數千個台灣與跨境客戶專案,成功協助客戶品牌網站搶佔搜尋排名首頁!

 

看更多客戶成功案例:Ranking 成功案例分享

若想獲得專業 SEO 服務資訊,歡迎預約諮詢,將由專業 SEO 顧問與您聯繫!

 

延伸閱讀:
2023 最新 Google Analytics 完整解析:搞懂GA四大報表與觀察重點!

搶佔 Google 第一頁!關鍵字排名優化重點一次掌握

關於 Ranking 小編:

期許用深入淺出的方式帶你進入 SEO 世界,提供實用性高的優質文章,簡化 SEO 複雜流程及技術,讓每個人都能快速理解 SEO 行銷,一起登上 Ranking 火箭讓排名再創高峰!※若有行銷相關問題或者業務合作歡迎隨時與我們聯繫!

其他人也看了...

想透過 SEO 提升品牌曝光度及網站流量,並獲得更多商機嗎?
SEO 專家|Ranking 提供全方位解決方案,讓你排名一飛沖天!

無料相談お申し込み
(たった30秒で申し込み完了できる!)

ご連絡先をお知らせください。3営業日以内にご連絡し、御社のサイト検索順位の向上をサポートいたします!

預約顧問諮詢

請您選擇感興趣的服務,並留下聯繫資訊,我們將於三個工作天內聯繫您,讓你品牌一躍上首頁!