Google Tag Manager 簡稱 GTM,是 Google 開發的代碼代管系統,用來集中管理眾多追蹤網站行為的代碼,如 Google Analytics、Google Ads、Facebook Pixel 等。並且,在安裝完畢後,即便行銷人員對程式不熟悉,也能夠透過 GTM 在不更動任何網站程式碼的情形下埋 code,這也是為什麼 GTM 會成為所有行銷人、SEO 操作者必備技能的原因。
過去只要有新的追蹤碼時,大部分的行銷人員都要請工程師協助更改網站程式碼才能完成埋設,既麻煩又沒效率。但現在只需要完成 Google Tag Manager 安裝,就算你不懂任何程式語言,也能夠自行透過 GTM 輕鬆完成埋碼程序。
如果是利用更改網站程式碼進行埋碼,就必須要等到網站發布才能確認是否有安裝成功,但 GTM 中有提供預覽功能,讓使用者埋設完畢後可先進行測試,文章後續也會教大家如何使用該功能。
並且,GTM 系統內會留有各版本的修正記錄,若有任何設定環節出錯,都能復原成上一個版本進行修正。
相信大家對於「網站速度是影響 SEO 的重要因素」並不陌生,然而過去將追蹤碼片段直接埋設於網站程式碼中的方式,會造成網站內有過多 JavaScript 程式碼拖累網站載入速度。
但 GTM 埋碼不會將追蹤碼寫入網站的 HTML,因此可以有效避免網站體質受到影響,大幅提升網頁載入的速度。
Google Tag Manager 最常搭配使用的就是大家耳熟能詳的 Google Analytics(簡稱 GA),但大家肯定會好奇,他們兩者之間究竟是什麼關係呢?
我們可以這樣理解:Google Tag Manager 是掌控者,Google Analytics 和其他這種類型的工具是執行者。
GTM 作為控制者,負責管理不同代碼、下達執行指令,而屬於代碼之一的 GA 則是執行者,負責在網站上依據指令監控使用者的行為,並將數據記錄下來以便日後進行分析。兩者在功能面上為互補關係,需要搭配使用才能達成使用者網站行為追蹤的最終目的,接下來我們也將以 GA 為例,教大家如何完成 GTM 與 GA 的串接,趕快繼續看下去吧!
延伸閱讀:GA4功能與差異解析,帶你無痛升級到新版Google Analytics!
帳戶是 GTM 中的最高層級,一個帳戶可以用來管理多個網站(也就是可以容納多個容器)。
容器可以理解成「網站」,一個網站對應一個容器,容器內可以裝載許多代碼和觸發條件。
GTM 代碼用來追蹤和記錄使用者在網站中的行為,並將數據回傳至指定平台,如 GA、 FB 後台等。
用來定義代碼在什麼情況下會進行行為記錄,由「變數」、「運算符號」與「值」三個元素組成。
(1) 變數(Variable)
意指觸發條件執行的規則,又分為「內建變數」和「使用者自訂變數」。
內建變數是 GTM 系統內預設的值,如點擊連結、頁面滾動深度等,只要進入內建變數的頁面就可以直接選取使用。
使用者自訂變數則是可以讓使用者自行定義自己需要用到的變數。
(2) 運算符號 (Operator)
用來定義變數與值之間的關係,常見的運算符號有「(不)包含」、「(不)等於」等。
(3) 值(Value)
指的是對應到變數的內容,舉例來說「點擊連結」對應的值就會是被點擊的那個連結,而「網頁滾動深度」對應的值就會是%數。
完成帳戶和容器設定後,將視窗中的程式碼提供給架站工程師,或是自行置入網站的 <head> 和 <body> 中,就完成 GTM 設置囉!
若是使用 WordPress 架設的網站,也可以透過安裝「GTM4WP」外掛程式、填入容器 ID 來完成 GTM 安裝。
在追蹤任何單一事件之前,我們需要先將 GA 代碼植入網站中的每個頁面,後續才能讓 GA 記錄各個事件的數據資料,這個過程就是俗稱的「網站串接 GA」或「埋設 GA」,GTM 教學的第二步就是要來教大家如何透過 GTM 完成 GA 埋碼的流程。
首先,我們先在 GTM 介面左側的欄位中找到「代碼」,點選新增後進入代碼設定,選擇「Google Analytics(分析):通用 Analytics(分析)」,大家通常會將之簡稱為「通用 GA」,也就是我們所知道的舊版 GA、GA3。
接下來,在追蹤類型的地方選擇「網頁瀏覽」,並在 Google Analytics(分析)選取新增變數,會出現追蹤編碼的欄位。
這個欄位需要手動填入 GA 的追蹤 ID,這時候要先打開 GA 介面左下角齒輪圖示中的「資源設定」,裡面可以找到以「UA-」開頭的追蹤 ID,只要將這串文字填入 GTM 中的追蹤編碼就完成代碼設定囉!
完成代碼設定後,接下來在下方的觸發條件選擇「All Pages」,意味著我們希望 GA 在網站中的每個網頁被瀏覽時都能被觸發,完成這個步驟後,就代表我們成功將 GA 埋設到網站裡囉!
我們使用 GA 的最重要目的是為了要追蹤使用者在網站上活動的數據,例如特定按鈕被點擊多少次、使用者瀏覽網頁的深度等等,接下來我們將以「追蹤 Ranking 網站上登入/註冊按鈕被點擊的次數」為例,一步步帶大家認識如何追蹤特定事件。
第一個步驟一樣是新增代碼,並依照下圖指示填寫相關資訊。其中需要注意,「事件追蹤參數」中的各個欄位其實就是資料顯示時的命名邏輯,可以依照自己習慣、方便管理的方式設定。
以 Ranking 為例,「類別」項目我們會填入要追蹤的物件(如:OO 按鈕),「動作」項目就是直觀的填入使用者的行為(如:點擊),而「標籤」則是將上述兩者合併成對這個事件的描述(如:點擊 OO 按鈕)。
在設定觸發條件之前,要先知道「按鈕」本身其實是被網站設計美化過的「連結」,以「登入/註冊按鈕」為例,它背後是導向登入和註冊頁面的連結。也就是說,如果我們要追蹤這個按鈕被點擊的次數,要設定的觸發條件會是「登入和註冊頁面的連結被點擊的次數」。
有了這個概念後,接下來進入實際操作的步驟。點擊觸發條件內的+符號,在跳出視窗內選擇「僅連結」。
再來,我們先選擇將觸發條件的啟動時機選擇「部分的連結點擊」,意指我們只希望在這個頁面的這條連結被點擊時才回傳數據,之後在內建變數的跳出視窗中點選「Click URL」後,把該按鈕代表的連結貼入後面的方框。
如果不知道按鈕對應的連結為何,可以在網頁內按滑鼠右鍵,點選檢視後網頁程式碼會出現在右側資訊欄,點選資訊欄左上角的游標圖示,再將滑鼠移動到按鈕上,就可以從資訊欄中找到對應的連結了!
完成上述步驟 1 和步驟 2 我們就已經設立好一個事件追蹤,記得要按下 GTM 介面右上角的提交 GTM 才會正式將這個事件發佈喔!
但提交完畢還不夠,我們還需要檢查它是不是真的有埋設成功,這時候就會用到位於提交按鈕旁邊的「預覽」按鈕。
點選預覽後,將網站的連結貼入下方的方框中並按下 Connect,此時 GTM 會用一個新分頁呈現網站預覽畫面,同時出現 GTM 的另一個工作介面。
該介面中我們會需要觀看的是 Sammary 和 Tags 的部分(如下圖所示),Sammary 用來記錄預覽畫面內執行的動作,而 Tags 則是顯示目前所有埋設的代碼在對應的動作內是否被觸發。
接著,我們只需要在網站預覽介面裡實際進行點擊「登入/註冊按鈕」,再透過 GTM 介面的 Sammary 找到 Link Click,點擊後若在 Tags Fired 中有出現剛設定的「點擊登入/註冊按鈕」,就代表代碼有埋設成功並發動喔!
在確定代碼都設定好之後,我們還需要讓代碼蒐集到的資訊能夠回傳到 GA,所以最後一個步驟要來教大家如何在 GA 啟用我們剛剛設定的事件代碼。
開啟 GA 介面中左下角的設定鈕,找到位於資料檢視欄位底下的「目標」,並按下新增目標。
在目標設定中選擇「自訂」後,在目標設定內的「名稱」填入希望這個項目在 GA 呈現的名字,並在類型選擇「事件」。
再來會看到目標詳情的欄位,有沒有覺得很眼熟?沒錯,這裡的欄位就和 GTM 代碼設定時一樣,所以只要填入一樣的內容即可。按下儲存之後,就可以在目標的欄位中看見我們新埋設的事件,記得將最右方的欄位調整為啟用,就大功告成了!
未來若想在 GA 中找到這個代碼的記錄,只要到 GA 左側欄位「轉換」中的目標,進入總覽頁面,並在篩選器的下拉選單選擇「點擊登入/註冊」就可以看到相關數據囉!
以上就是 GTM 安裝、串接 GA 與事件追蹤的相關教學,如果還有任何工具或 SEO 相關問題,都歡迎聯繫 Ranking 的專業顧問團隊,將有專人為您服務!
Ranking 是台灣 SEO 專業品牌,擁有超過百人的專業顧問團隊,並且獨家開發 Ranking SEO 工具,是台灣少數同時具備顧問、工具、教學全方位服務的 SEO 公司。成立至今已操作數千個台灣與跨境客戶專案,成功協助客戶品牌網站搶佔搜尋排名首頁!
看更多客戶成功案例:Ranking 成功案例分享
若想獲得專業 SEO 服務資訊,歡迎預約諮詢,將由專業 SEO 顧問與您聯繫!
期許用深入淺出的方式帶你進入 SEO 世界,提供實用性高的優質文章,簡化 SEO 複雜流程及技術,讓每個人都能快速理解 SEO 行銷,一起登上 Ranking 火箭讓排名再創高峰!※若有行銷相關問題或者業務合作歡迎隨時與我們聯繫!
想透過 SEO 提升品牌曝光度及網站流量,並獲得更多商機嗎?
SEO 專家|Ranking 提供全方位解決方案,讓你排名一飛沖天!