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

Ian
10 min readSep 20, 2023

--

當創建完 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 並選擇事件名稱,即可協助完成追蹤事件的設定,無需理解複雜且令你感到害怕的程式碼。

Facebook Pixel 範本

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

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

「觸發條件」

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

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

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

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

GTM 觸發條件介紹:我們該在「何時」使用「何種」觸發條件?

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

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

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

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

「變數」

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

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

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

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

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

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

「資料夾」

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

這時,使用資料夾來組織整理將會非常方便。

舉例來說,你可以根據不同廣告平台使用的追蹤代碼進行分類,但如果你已經給每個代碼取了明確的名稱,這個步驟也是可以省略的。

我們曾看過有業主同時委託兩家不同的廣告代理商操作同一個 GTM 帳號的情況,在這種情況下,雙方可能會根據代理商的名稱來命名資料夾,以方便日後查找和整理。

「範本庫」

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

範本庫的好處包括:

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

「預覽」&「提交」

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

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

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

「版本」

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

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

「管理」

使用者管理
針對「 帳戶」的使用者權限管理,擁有「 帳戶」存取權的使用者可以管理該「 帳戶」底下的所有「 容器」。

如果只想要讓該使用者管理特定「 容器」,請到「 容器」中的「 使用者管理 」設定。

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

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

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

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

總結一下

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

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

--

--

Ian
Ian

Written by Ian

我的腦叫我一直寫

No responses yet