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

透過 GTM 安裝 GA4 評估 ID 以及 Meta Pixel 幾乎是所有網站使用 GTM 代碼管理工具第一步會需要安裝的代碼,透過這幾種方式讓行銷人員不需要會寫任何代碼就可以輕鬆完成安裝,再也不必麻煩網站工程師處理,從安裝到測試都可以由行銷端這邊獨自完成,大大提升了效率並減少了網站工程師的負擔(轉回到行銷人員自己身上!?)

不用擔心,步驟很簡單,你阿ㄇㄚˋ都會。


用 GTM 安裝 GA4 評估 ID

選擇代碼頁面並新增代碼

GTM 左側面板選擇「代碼」> 右上角選擇「新增

代碼類型選擇 Google 代碼(Google Tag)

點選「Google Analytic(分析)」後選擇「Google 代碼」或是直接選擇都可以,兩者是一樣的。

GTM 左側面板選擇「代碼」 > 右上角「新增」> 代碼類型選擇「 Google 代碼

(撰文當下是 2023/09,Google 剛剛推出 Google Tag,原 GA4 Configuration 已走入歷史,如果你是現在才開始接觸 GTM 的新朋友,不用擔心,過去的不用懂,知道這段歷史就好。)

如果是點擊「Google Analytic 分析」,那會看到以下畫面,選擇「Google 代碼」即可。

GA4 評估 ID 在哪裡?

打開 GA4 介面 > 點擊左下角「齒輪」(1) > 「資源設定」(2) > 「資料收集和修改」(3) > 「資料串流」(4) > 點選右邊該「資料串流網站」(5) > 獲得評估 ID

延伸閱讀 》建立你的第一個 GA4 帳戶以及認識 Google Analytic 4 後台介面

填入 GA4 評估 ID,搞定!

在「代碼 ID 」的位置,填入「GA4 評估 ID」,並將觸發條件選擇為「初始化- 全部頁面」,以確保每次頁面載入時,GA4 的追蹤代碼都可以被觸發。

完成之後給予一個清楚描述的命名,儲存之後進入預覽模式測試,如果代碼都有在每一個頁面上面被觸發,那就表示設定成功了,記得也要回到 GA4 即時報表中,確認是否有收到網站的資料。

如果對於如何進入「GTM 預覽模式」尚不熟悉的朋友,可以參考這篇文章:如何用 GTM 「預覽模式」檢查代碼有無設定成功?

在GTM新增代碼頁面填入GA4評估ID

Tips:將 GA4 評估 ID 設為變數

雖然 GA4 追蹤代碼的設定是一次性的工作,未來我們也不太會再去更動了(除非網站換新或是新增 GA4),但是未來當需要設定 GA4 事件的時候,我們都必須在每次事件設定時,填入 GA4 評估 ID。

雖然複製貼上很方便,但還是要從別的地方先找出 GA4 評估 ID(除非你背下來?),相當擾人,因此我們可以像過去一樣,先將 GA4 評估 ID 設置為一個變數,方便未來直接選用。

GTM 左側面板選擇「變數」 > 下方使用者定義的變數右上角選擇「新增」 > 選擇變數類型「常值(Constant)」> 填入 GA4 評估 ID > 儲存。
新增自訂變數步驟

完成之後右上角點選儲存,接著回到剛剛的 Google 代碼中,將代碼 ID 改成剛剛設定的變數。

代碼 ID 欄位處點擊「+號」會出現選單 > 選擇剛剛設定的「常數」變數

搞定,未來如果遇到有要選擇 GA4 評估 ID 的地方,只要去選擇這個變數就可以了,不用每次再去把 ID 找出來複製貼上,相對來說方便許多。

我們懷念它:舊 GA4 代碼設定畫面

由於「Google 代碼」是最近(2023/09)才推出的,在此之前如果要設定 Google Analytic,是使用代碼類型:「Google Analytic(分析):GA4 設定」以及「Google Analytic(分析):通用 Analytic(分析)」,然後進入到跟上述 Google Tag 差不多的畫面,在原評估 ID 處填入 GA4 評估 ID。

舊版的GA4以及通用GA安裝代碼類型
好不容易才找到一個 GTM 容器還保有這兩個代碼類型的,
大部分或是新建的 GTM 容器基本上都看不到了。

過去的 GA 追蹤代碼設定畫面,針對所選的 GA 類型,只能填入相對應的 GA 追蹤代碼,如今換成 Google Tag 之後,變成所有 Google 服務的代碼都可以填入其中。


用 GTM 安裝 Meta Piexl

如果網站有下 Meta 廣告,那一定會需要安裝 Meta Pixel 在網站上面,方便追蹤來自 Meta 平台的廣告成效以及優化廣告活動,例如再行銷、轉換廣告的優化以及類似受眾的設定, Meta Pixel 也是一段 Javascript 代碼,如下:

Meta Pixel JS 代碼
Meta Pixel

有兩種方法可以安裝 Meta Pixel ,一個是透過社群範本庫,另一個則是使用自訂 HTML 的代碼,前者會較為方便,包含未來如果要新增任何追蹤事件,都可以透過範本庫處理,後者則必須要透過「自訂 HTML」代碼貼上 Javascript 代碼,看管理以及維護上哪個方便,擇一使用就可以。

透過 GTM 範本庫新增 Meta Pixel

GTM 左側面板選擇「代碼」> 「新增」 > 代碼類型選擇「社群範本庫
右上角搜尋「Facebook」> 選擇「Facebook Pixel

將範本庫新增至工作區,接著會看到以下畫面,就跟設定 GA4 評估 ID 時一樣,填入 Meta Pixel 資料集編號。

預設的設定都是 PaveView 事件,如果有其他事件追蹤如:加入購物車、提交表單等需求,可以透過下拉式選單選擇相關事件(必須要另外新增一個事件代碼。)

至於 Meta Pixel 資料集編號可以到 Meta 事件管理工具後台中的設定頁籤 ,就可以看到了。

Meta 事件管理工具畫面
Meta 事件管理工具畫面

搞定!設定完成之後按下儲存,記得到預覽模式測試代碼是否有順利觸發,沒問題後發佈就可以了,如果你擔心範本庫有安全疑慮的話,那你也可以採用「自訂 HTML」的代碼類型進行 Meta Pixel 的安裝。

(同時也可以到 Meta 事件管理工具後台,確認是否有接收到資料。)

Meta 事件管理工具總覽畫面

透過「自訂 Html 」代碼安裝 Meta Pixel

我們一樣來到新增代碼的地方,選擇代碼類型為「自訂 HTML」。

將 Meta 事件管理平台中的 Jacascript 代碼貼上,觸發條件一樣選擇「初始化-全頁觸發」,給予命名之後按下儲存即可。

搞定!接著可以透過預覽模式以及來到 Meta 事件管理工具中,測試 Meta Pixel 是否有正確安裝以及收集到資料。

如果要設定 Meta 廣告其它自訂事件,也是同樣透過自訂 HTML 代碼設定(下圖),設定完成之後依照所要啟動的位置設定觸發條件即可。

到這邊就完成了 Meta Pixel 的設定,除了透過 GTM 預覽模式確認以外,也記得要到 Meta Ad 管理工具中確認有接收到新的資料。

如果對於「自訂 HTML」較不熟悉的朋友,我們建議直接使用社群範本庫內的模板,該模板已經可以滿足大部分的追蹤需求,且設定也較為容易。


延伸閱讀

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

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