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 四大組成元素
- 帳戶 (Account)
帳戶是 GTM 中的最高層級,一個帳戶可以用來管理多個網站(也就是可以容納多個容器)。 - 容器 (Container)
容器可以理解成「網站」,一個網站對應一個容器,容器內可以裝載許多代碼和觸發條件。 - 代碼 (Tag)
GTM 代碼用來追蹤和記錄使用者在網站中的行為,並將數據回傳至指定平台,如 GA、 FB 後台等。 - 觸發條件 (Trigger)
用來定義代碼在什麼情況下會進行行為記錄,由「變數」、「運算符號」與「值」三個元素組成。
(1) 變數(Variable):意指觸發條件執行的規則,又分為「內建變數」和「使用者自訂變數」。內建變數是 GTM 系統內預設的值,如點擊連結、頁面滾動深度等,只要進入內建變數的頁面就可以直接選取使用;使用者自訂變數則是可以讓使用者自行定義自己需要用到的變數。
(2) 運算符號 (Operator):用來定義變數與值之間的關係,常見的運算符號有「(不)包含」、「(不)等於」等。
(3) 值(Value):指的是對應到變數的內容,舉例來說「點擊連結」對應的值就會是被點擊的那個連結,而「網頁滾動深度」對應的值就會是%數。
A. 步驟一:設定帳戶和容器
進入 GTM 頁面後,點選頁面右上角的建立帳戶,在彈跳視窗中填入相關資訊。
B. 步驟二:設定追蹤網站
完成帳戶和容器設定後,將視窗中的程式碼提供給架站工程師,或是自行置入網站的 <head> 和 <body> 中,就完成 GTM 設置囉!
若是使用 WordPress 架設的網站,也可以透過安裝「GTM4WP」外掛程式、填入容器 ID 來完成 GTM 安裝。
C. 步驟三:確認是否安裝成功 (使用 Google Tag Assistant)
在操作完上述步驟後,切記要檢查是否有成功安裝 Googe Tag Manager!若是使用 Chrome 瀏覽器,檢查的方式可以透過 Google 推出的擴充功能「Google Tag Assistant」,進入自己的網站後開啟外掛,檢查是否有 GTM 這個項目,項目裡面的編碼如果與容器 ID 一致,且顯示為綠色標籤,就代表 GTM 有安裝成功喔!
GTM 教學 (2):GTM GA4 串接
在追蹤任何單一事件之前,我們需要先將 GA4 代碼植入網站中的每個頁面,後續才能讓 GA4 記錄各個事件的數據資料,這個過程就是俗稱的「網站串接 GA4」或「埋設 GA4」,GTM 教學的第二步就是要來教大家如何透過 GTM 完成 GA4 埋碼的流程。
A. 步驟一:新增 GA4 代碼
首先,我們先在 GTM 介面左側的欄位中找到「代碼」,點選新增後進入代碼設定,選擇「Google Tag 代碼」。
接下來,填入 GA4 的 Data Stream ID(G-xxxxxxxxx 格式的 ID)到代碼 ID 的欄位裡,並將配置設定點開,將配置設定變數選擇「無」、設定配置參數 send_page_view = true,就完成代碼設定囉!
至於我們該如何找到 GA4 中找到要填入 GTM 中的 Data Stream ID 呢?首先我們需要先開啟 GA4,進入左下角的設定選單,找到 Data Streams 的項目並選擇想要查看 ID 網站。接下來進入頁面後,找到 ID 編號進行複製就可以回到 GTM 貼上囉!
B. 步驟二:設定觸發條件:All Pages
完成代碼設定後,接下來在下方的觸發條件選擇「All Pages」,意味著我們希望 GA4 在網站中的每個網頁被瀏覽時都能被觸發,完成這個步驟後,就代表我們成功將 GA4 埋設到網站裡囉!
GTM 教學 (3):GTM 設定事件追蹤
我們使用 GA 的最重要目的是為了要追蹤使用者在網站上活動的數據,例如特定按鈕被點擊多少次、使用者瀏覽網頁的深度等等,接下來我們將以「追蹤 Ranking 網站上登入/註冊按鈕被點擊的次數」為例,一步步帶大家認識如何追蹤特定事件。
A. 步驟一:新增並設定代碼
第一個步驟一樣是新增代碼,但換成 GA4 之後省略了許多繁瑣的設定步驟,只需要依照下圖指示填寫「事件名稱」的欄位,並且和通用 GA 一樣依照自己習慣、方便管理的方式設定即可。以 Ranking 為例,今天要追蹤註冊按鈕的點擊次數,我們就會把這個事件名稱設定為「點擊登入/註冊按鈕」。
B. 步驟二:設定觸發條件「點擊連結」
GA4 事件的觸發條件設定和通用 GA 相通,但在設定觸發條件之前,要先知道「按鈕」本身其實是被網站設計美化過的「連結」,以「登入/註冊按鈕」為例,它背後是導向登入和註冊頁面的連結。也就是說,如果我們要追蹤這個按鈕被點擊的次數,要設定的觸發條件會是「登入和註冊頁面的連結被點擊的次數」。
有了這個概念後,接下來進入實際操作的步驟。點擊觸發條件內的+符號,在跳出視窗內選擇「僅連結」。
再來,我們先選擇將觸發條件的啟動時機選擇「部分的連結點擊」,意指我們只希望在這個頁面的這條連結被點擊時才回傳數據,之後在內建變數的跳出視窗中點選「Click URL」後,把該按鈕代表的連結貼入後面的方框。
如果不知道按鈕對應的連結為何,可以在網頁內按滑鼠右鍵,點選檢視後網頁程式碼會出現在右側資訊欄,點選資訊欄左上角的游標圖示,再將滑鼠移動到按鈕上,就可以從資訊欄中找到對應的連結了!
C. 步驟三:使用預覽確定是否埋設成功
完成上述步驟 1 和步驟 2 我們就已經設立好一個事件追蹤,記得要按下 GTM 介面右上角的提交 GTM 才會正式將這個事件發佈喔!
但提交完畢還不夠,我們還需要檢查它是不是真的有埋設成功,這時候就會用到位於提交按鈕旁邊的「預覽」按鈕。
點選預覽後,將網站的連結貼入下方的方框中並按下 Connect,此時 GTM 會用一個新分頁呈現網站預覽畫面,同時出現 GTM 的另一個工作介面。
該介面中我們會需要觀看的是 Sammary 和 Tags 的部分(如下圖所示),Sammary 用來記錄預覽畫面內執行的動作,而 Tags 則是顯示目前所有埋設的代碼在對應的動作內是否被觸發。
接著,我們只需要在網站預覽介面裡實際進行點擊「登入/註冊按鈕」,再透過 GTM 介面的 Sammary 找到 Link Click,點擊後若在 Tags Fired 中有出現剛設定的「點擊登入/註冊按鈕」,就代表代碼有埋設成功並發動喔!
D. 步驟四:等待資料匯入 GA4
改成 GA4 之後,在匯入資料的部分也不用再另外設定,但會需要等待 24-72 小時讓數據確實被傳入 GA4 後台,檢查的方式則是進入 GA4 的「event(事件)」欄位中,確認是否有我們在 GTM 設定的事件名稱,如果有看到的話代表數據成功被輸入了,但如果超過 72 小時都沒有找到對應的事件名稱,就需要去檢查是不是哪個埋設環節出錯囉!
以上就是 GTM 安裝、串接 GA4 與事件追蹤的相關教學,如果還有任何工具或 SEO 相關問題,都歡迎聯繫 Ranking 的專業顧問團隊,將有專人為您服務!
專家級 SEO 優化公司推薦|Ranking
Ranking 是台灣 SEO 專業品牌,擁有超過百人的專業顧問團隊,並且獨家開發 Ranking SEO 工具,是台灣少數同時具備顧問、工具、教學全方位服務的 SEO 公司。成立至今已操作數千個台灣與跨境客戶專案,成功協助客戶品牌網站搶佔搜尋排名首頁!
看更多客戶成功案例:Ranking 成功案例分享
若想獲得專業 SEO 服務資訊,歡迎預約諮詢,將由專業 SEO 顧問與您聯繫!