GTM 介面探索:深入了解操作介面的基礎功能!

當創建完 GTM 帳號之後,進入到 GTM 的操作介面,想必一定會讓你一頭霧水感到慌張,覺得我是誰?我在哪?這全部都是中文為什麼我都看不懂?

別擔心,這篇文章會盡可能逐一介紹 GTM 介面中,左邊面版的「總覽」、「代碼」、「觸發條件」、「變數」、「資料夾」以及「範本」,還有左上方的「工作區」、「版本」和「管理 」頁籤,讓你知道每個介面各有什麼功用,可以幫助我們達成什麼目的。ㅤ

每個段落中,如果有需要補充解釋的部分,都會在文中提供相關的連結,幫助你可以更進一步了解 GTM。



「工作區」

我們大部分的操作都會在這個頁籤中進行。當公司組織結構較大時,可能會有許多不同部門需要使用 GTM,例如網站開發部門或是行銷部門。為了避免雙方同時更動而影響到「容器」內的代碼產生衝突或是覆蓋設定,可以善用「工作區」的功能,讓大家分別在不同的「工作區」中進行操作和預覽。

更多關於「工作區」的解釋,可以參考這篇文章:GTM 中的「工作區」是指什麼?

「總覽」

在這個界面中,你可以透過中間藍色區塊一目了然地查看新增、修改或是刪除的代碼、觸發條件以及變數的數量,如果今天有多人在使用 GTM 帳戶,這區塊可以幫助你快速了解容器是否有任何改變,並透過最下方「工作區變更」區塊快速查看到底改變了什麼東西。

左上角的「新增代碼」功能可以讓你快速創建代碼,其實與點選左側面板「代碼」 > 「新增」功能相同,這邊就只是一個方便的捷徑。

右上角的綠色區塊顯示了當前在正式網站上的版本號,同時還能告訴你是多久前以及由誰發佈的版本。

順帶一提,如果有其他帳戶共同管理人透過不同「工作區」提交了代碼,你會在「總覽」中看到以下畫面,要求你更新當前「工作區」。

大部分的操作都不會在「總覽」界面進行,我們最常使用的是「代碼」、「觸發條件」以及「變數」界面。不過,當你很久沒有來到 GTM 介面時,這個畫面有助於我們快速了解當前的情況,進而決定下一步該做什麼。

「代碼」

這裡是放置各種追蹤代碼的地方,包括 GA4 追蹤代碼、Meta Pixel 代碼、Google Ad 轉換追蹤碼以及其他廣告平台的追蹤代碼。另外,像是 Hotjar 這類的熱點追蹤工具,也是透過這裡將代碼安裝到網站上,還有如網站的任何追蹤行為,例如點擊等,我們都需要在「代碼」頁面進行設定。

點擊左側面板的「代碼」,你會看到以下畫面。

接著點選右上角「新增」,我們可以看到許多「代碼類型」。

我們可以透過「Google 代碼」安裝 Google Analytics 4 追蹤碼。如果需要追蹤任何 GA4 行為事件,例如電子商務事件或是連結按鈕點擊事件,可以使用代碼類型「Google Analytics(分析)」進行設定。

另外,最常用的 Google Ad 廣告追蹤代碼也可以透過「Google Ads」安裝。如果是其他不在預設名單中的代碼類型,也可以使用「自訂 HTML」代碼來處理,只需將廣告平台提供的追蹤代碼複製貼上到「自訂 HTML」中,即可完成代碼的安裝。

若是知名的廣告平台追蹤碼,可以使用「社群範本庫」中由世界各地 GTM 大神編寫的範本來進行設定。例如,Facebook Pixel 的範本只需填入 Pixel ID 並選擇事件名稱,即可協助完成追蹤事件的設定,無需理解複雜且令你感到害怕的程式碼。

上述提到的 GA4 追蹤代碼、Meta Pixel 追蹤碼以及 Google Ad 轉換追蹤代碼的安裝方法,都將在未來的文章中詳細介紹,我們將提供許多關於「代碼」設定的教學。

但如果你已經迫不及待想要先了解,可以閱讀以下的文章:

如何用 GTM 安裝 GA4 評估 ID 以及 Meta(Facebook) Pixel?

如何用 GTM 安裝 Google Ad 廣告轉換追蹤碼?

「觸發條件」

觸發條件顧名思義就是用來設定何時啟動「代碼」的地方,在文章「認識 GTM 三大基本元素 – 代碼、觸發條件以及變數」中,我們有解釋了何謂「觸發條件」,尚不熟悉的朋友可以先參閱該篇文章。

左側面板選擇「觸發條件」 > 右上角點選「新增」 > 獲得以下畫面。

要告知何時啟動「代碼」的方法有很多,你可以指定當「網頁的網址 等於 特定網址」時,啟動「代碼」,或是當使用者「點擊的連結網址 等於 特定網址」時,啟動「代碼」。

也可以針對「Youtube 影片」的播放以及觀看行為來觸發特定「代碼」,觸發條件的操作方式族繁不及備載,看到這裡你可能會感到有些複雜,不過別擔心,這些設定方式會在未來的文章中一一進行教學,如果你真等不及,那可以先看看以下文章,如果想要循序漸進的話,則可以先跳過沒關係。

認識 GTM 網頁觸發條件:同意聲明初始化、初始化以及網頁瀏覽

如何用 GTM 設定「網頁捲動」追蹤事件?

如何用 GTM 觸發條件「元素可見度」追蹤站內廣告曝光?

如何用 GTM「記錄變更」& GA4 內建事件追蹤一頁式網站?

「變數」

在之前的文章當中,我們已經詳細介紹了 GTM 中的「變數」代表什麼以及其用途,在 GTM 的操作介面中,變數的介面略有不同,除了我們自己定義的變數之外,GTM 還提供許多「內建」的變數供我們使用。

GTM 左側面板選擇「變數」 > 點擊右上角「設定」叫出「內建變數」 / 點擊下方「新增」可以自行定義所需變數。

點擊右上角的「設定」後,你會看到以下畫面,其中列出了各種「內建變數」。你必須勾選需要的「內建變數」,GTM 才會啟用它們,這樣才能在「代碼」或「觸發條件」中使用。

而當我們點擊下方「使用者定義的變數」區塊右上角的「新增」時,會出現以下畫面。

這裡介紹的是未來在使用 GTM 時會非常實用的功能,比如在設定 GA4 電子商務追蹤時,我們需要善用「資料層變數」來協助進行設定。其他像是「自動事件變數」和「DOM 元素」變數,對於追蹤一頁式網站等其他行為也是很有幫助的,不過這些屬於進階的 GTM 功能,我們會在未來的文章中逐一解釋。

(但如果你不怕因此退坑的話!?可以先看看以下文章,看不懂也沒關係,我們都會在後續解釋。)

GTM 變數介紹:資料層變數(Data Layer Variable)

GTM 變數介紹:自動事件變數(Auto Event Variable),該如何應用?

GTM 變數介紹:DOM 元素(DOM Element) ,如果沒有工程師協助,就讓DOM元素給你幫助

GTM 變數介紹:第一方 Cookie(1st Party Cookie Variable)

GTM 變數介紹:網址變數(URL Variable)

「資料夾」

保持代碼的整潔與有序是相當重要的,不僅可以讓人感覺舒適,更能在未來網站逐漸複雜的情況下,有效管理 GTM 中的代碼、觸發條件和變數,而隨著專案以及行銷目標的改變,你也可能需要定時清理不需要的項目,這時,使用資料夾來組織整理將會非常方便。

舉例來說,你可以根據不同廣告平台使用的追蹤代碼進行分類,但如果你已經給每個代碼取了明確的名稱,這個步驟也是可以省略的,我們也曾看過有業主同時委託兩家不同的廣告代理商操作同一個 GTM 帳號的情況,在這種情況下,雙方可能會根據代理商的名稱來命名資料夾,以方便日後查找和整理。

「範本庫」

除了透過自行設定「代碼」以外,GTM 社群中許多大神以及公司也提供了許多範本,可幫助你簡化設定流程,這些範本通常由 Google 或第三方開發者提供,涵蓋了多個行業以及平台,包括 Google Analytics、Google Ads、Facebook 像素、Hotjar 等。使用範本之後,你就不需要手動設置「代碼」或是「變數」,而是可以通過選擇適合需求的範本,然後進行少量的配置便可立即使用。

範本庫的好處包括:

  1. 節省時間: 無需從頭開始設置標籤,可以從範本庫中選擇一個合適的範本,並進行簡單且必要的設定。這可以節省大量的時間和精力。
  2. 降低錯誤: 代碼、觸發條件和變數的設置可能很複雜,並且容易出錯,使用範本可以減少錯誤的可能性,因為它們已經經過了測試和驗證。

「預覽」&「提交」

在完成「代碼」、「觸發條件」或是「變數」設定之後,可以點擊「預覽」按鈕來觀看代碼在網站上的運作情況,確保是否如預期。 雖然你會看到代碼在網站上實際運作的樣子,但其實只有你自己看得到,因為代碼還沒有被「提交」到正式站。

當在「預覽模式」之下確認代碼都沒問題之後,我們就可以將網站「提交」到正式網站,此時所有在網路上訪問網站的使用者,可以看到「代碼」帶來的變更或是開始被追蹤特定行為。

關於預覽模式的操作方式,可以參考這篇文章:如何用 GTM 「預覽模式」檢查代碼有無設定成功?


「版本」

在「版本」頁籤中,可以看到我們歷來發佈的 GTM 版本歷史紀錄,除了版本發佈以及建立時間之外,也可以看到發布者的帳號為何,協助我們在網站出問題的時候進一步除錯。

如果在提交代碼之後,發現網站出現了錯誤,我們也可以在這邊將「前一版本」設為最新版本,讓網站回到「最新版本」提交之前的狀態,快速排除網站的錯誤。


「管理」

帳戶設定
在創建 GTM 帳號時,已經設定好的「帳戶」名稱如果需要更改,可以在這邊調整,如果需要設定兩階段驗證的話以維 GTM 帳戶安全,也可以透過這邊進行設定。

帳戶活動
可以看到有誰對「帳戶」做了何種更動,當然,如果你今天只有一個人管理帳戶的話,這個功能對你來說就不是那麼重要了。

使用者管理
針對「帳戶」的使用者權限管理,擁有「帳戶」存取權的使用者可以管理該「帳戶」底下的所有「容器」,如果只想要讓該使用者管理特定「容器」,請到「容器」中的「使用者管理」設定。

容器設定
在創建 GTM 帳號時,已經設定好的「容器」名稱如果需要更改,可以在這邊調整。

容器活動
可以看到有誰對「容器」做了何種更動,當然,如果你今天只有一個人管理的話,這個功能對你來說就不是那麼重要了。

使用者管理
如果只想要讓該使用者管理特定「容器」,請從這邊設定。

安裝 Google 代碼管理工具」
如果想要再叫出 GTM 程式碼,除了可以透過「預覽」按鈕旁邊的代碼編號「GTM-xxxxxx」叫出以外,也可以在後台的這邊獲得 GTM 程式碼。

匯入容器
網路上有些 GTM 大神會提供一些特定追蹤行為的「代碼」、「觸發條件」以及「變數」容器文件,我們只要將其透過後台的「匯入容器」匯入到我們自家的 GTM 容器當中,並修改幾個特定設定,就可以應用在我們的網站上面。

環境
關於環境的介紹,可以參考這篇文章:認識 GTM 帳戶結構:容器、工作區、版本以及環境是什麼? 而其相關設定便是在這邊執行。

容器通知
當有人發佈新版本或是建立新版本時,可以透過 Email 獲得通知信件。

代碼涵蓋範圍
當 GTM 在網站上運行一段時間之後,系統會自動偵測出 GTM 沒有正常運作的頁面,方便我們進一步除錯。


總結一下

恭喜!你終於「逛」完了 GTM 介面基礎以及重要的功能的介紹,希望看完這篇文章之後,你下次使用 GTM 操作介面時不會再感到恐慌害怕!?

接下來,我們就可以開始進入實際設定的部分,即使你可能對於代碼、觸發條件以及變數的操作還感到有些困惑,但相信我們,只要多做幾次這些操作設定,你就會逐漸熟悉這個宛如無字天書的介面了。


延伸閱讀

如果你很喜歡這篇文章並且覺得內容有幫助,又剛有些多餘時間,歡迎你看看其它文章,繼續探索(這坑?這地獄?這片樂土?)

同時,如果對於內容有疑問或是建議,也歡迎你留言告訴我們:)