--- # System prepended metadata title: Meta Pixel 追蹤碼檢查 tags: [Meta Pixel, 查追蹤碼, GTM] --- ## 目的 本文件主要向非技術人員說明該如何檢查使用 GTM 埋設 Meta pixel 的案例，幫助確定追蹤碼是否正常運作，進而提高追蹤轉換與數據收集的準確性。 > 免責聲明： > 1.本文件使用客戶提供之代碼埋設案例作為截圖範例，僅供公司內部教學使用與參考，請勿外傳。 > 2.本文件僅針對使用 GTM 埋設的案例進行說明，若不是使用 GTM 埋設，則此文件不適用此情況，請再向技術人員詢問。 > 3.隨著 Meta pixel 更新，文件內容可能也會有些許差異，如果有任何代碼使用方法上的差異，我們會盡快更新此文件。 ## 步驟 1. 正式客戶網站檢查前，需先完成前置作業，確定檢查的項目符合數據需求且檢查環境無干擾 - 確認追蹤碼文件內容符合需求 - 完成瀏覽器設定和開發者工具設定，避免因環境影響檢查結果 - 於客戶網站檢查是否埋設 GTM 容器，才能進行後續檢查 2. 在開發者工具上填入正確資訊，並按照不同事件動作來觸發追蹤碼 > 以上步驟的詳細細節請見以下內容，也可以對照索引來快速瀏覽 ## 索引 - [目的](#目的) - [步驟](#步驟) - [前置作業](#前置作業) - [追蹤碼文件](#追蹤碼文件) - [瀏覽器設定](#瀏覽器設定) - [開發者工具設定](#開發者工具設定) - [檢查 GTM 容器](#檢查GTM容器) - [檢查追蹤碼](#檢查追蹤碼) - [瀏覽事件](#瀏覽事件) - [全站瀏覽事件](#全站瀏覽事件) - [部分瀏覽事件](#部分瀏覽事件) - [按鈕事件](#按鈕事件) - [表單事件](#表單事件) - [相關名詞](#相關名詞) - [參考文件](#參考文件) ## 檢查工具 有下列三種常用的檢查工具： 1. Meta Pixel Helper 2. Google Tag Assistant 3. 瀏覽器的開發者工具 (DevTools) 你可以使用自己原本就會使用的工具進行檢查，但我們還是推薦使用瀏覽器的開發者工具進行檢查。 ### 1. Meta Pixel Helper ![Chrome 擴充](https://i.imgur.com/Qq7Q5pm.png) 裝好 Meta Pixel Helper，在檢查時，能看到代碼是否觸發的即時提示： ![](https://i.imgur.com/bI3fXS9.jpg) 使用上的優點為清楚明瞭，會依照不同 pixel id 分類；缺點是：當出現錯誤訊息時，很難清楚得知導致錯誤的原因。 >如果本來就會使用 Meta Pixel Helper 進行檢查，可以使用此擴充直接操作、檢查，但需注意 pixel id 是否正確，如果同時有多家廠商埋設 Meta pixel，可能會被別人的事件影響。 ### 2. Google Tag Assistant 通常只有工程師需要實際在 Google Tag Manager (GTM) 內進行代碼埋設，所以通常也只有工程師會使用到 Tag assistant，但這裡一樣介紹一下這個工具。 在埋設代碼時，我們會先透過 GTM 的「預覽」功能，檢查代碼是否照指定的行為觸發： ![](https://i.imgur.com/rFRVGNW.png) 點擊預覽之後會跳出 Tag Assistant 的分頁，需要填入欲檢查的網址、再點擊 Connect： ![](https://i.imgur.com/qqnYSyg.png) ![](https://i.imgur.com/QSdHqRz.png) 除了跳出一個新的預覽視窗，Tag Assistant 的頁面也會顯示已連接： ![](https://i.imgur.com/Rp0LVn7.png) 接著我們就可以在預覽視窗內操作，而 Tag Assistant 的頁面也會有所有使用者行為的記錄，可以再根據需求，查看代碼是否正常運作和觸發的詳細內容： ![這是一個pv 觸發的詳細資訊](https://i.imgur.com/wFTGOG8.png) 使用 Tag Assistant 的優點，在於我們可以在代碼發布到現行網站前，就先清楚看到代碼是否觸發，對於 GA、Google ADs 等平台，Tag Assistant 也有進行整合，能直接看到代碼是否正常運作。 但對 Meta Pixel 來說，我們只能看到代碼是否觸發，卻不能確定收數是否正常，因此我們需要使用下一個工具進行完整的檢查。 ### 3. 瀏覽器的開發者工具 (DevTools) 在進行追蹤碼檢查時，我們推薦使用瀏覽器原生的開發者工具 (DevTools)。 >雖然名稱內有「開發者」，但其實就檢查追蹤碼觸發這件事來說，你不需要寫程式或看很多文件，只需要點點滑鼠，複製、貼上，就能夠自己進行檢查。 > >簡單來說：這不是只有工程師才能用的工具。 我們可以先打開想要檢查的網頁： ![](https://i.imgur.com/FXPqPng.jpg) 滑鼠右鍵 > 檢查 ![](https://i.imgur.com/XZ4hkFP.jpg) 恭喜你，你已經叫出開發者工具了 (右邊黑壓壓的這一個區塊)： ![](https://i.imgur.com/e8boyKJ.jpg) 我們需要的東西在「網路」這一頁，裡面會有頁面上的所有資源，包含載入的圖片、觸發追蹤碼的記錄等等： ![](https://i.imgur.com/xZEUZbe.jpg) 在「網路」頁籤的上方，我們可以輸入資訊、對所有資源進行篩選。 而通常我們會勾選「保留記錄檔」和「停用快取」這兩個功能，確保資料不會因為頁面刷新而被清空，或是被快取功能影響。 ![](https://i.imgur.com/ecdlC2N.png) 對於 Meta pixel 的代碼檢查，我們只需要在篩選條件內放入 pixel id，就可以篩出所有關於這個 pixel 的資源。 每一個資源點擊後，都可以看見更詳細的資料，而我們經常需要看的是裡面的「承載」頁面，以 Meta pixel 來說，`ev` 欄位代表的是事件名稱。 所以下面截圖的含意是： `pixel id = 949142992748102` 的 PageView 已經觸發了一次。 ![](https://i.imgur.com/tZNXORk.png) 在實際進行檢查前，你需要知道下面兩點： 1. Meta pixel 的基本代碼內，有你的 pixel id => `fbq("init", "你的 pixel id 在這裡")` 2. 事件成功觸發時，會回傳事件名稱，可以利用事件名稱來辨別有無觸發。 文件後半段皆使用開發者工具進行代碼觸發檢查、除錯，我們有一些常用的檢查範例供你參考。 ## 檢查範例 在檢查前，通常會有一份整理好的代碼文件供你參考，良好的代碼文件會清楚標示每個代碼需要埋在哪裡。 一份整理好的代碼文件內會有： - 需要埋設的代碼 - 代碼埋設位置 (頁面、按鈕、埋設的 GTM 容器編號等) 如果你手邊沒有整理好的文件，請生出一份，你絕對不會想變成那個一問三不知的人。 ### GTM 容器 如果客戶使用 GTM 來管理代碼，你可以先在欲檢查的網頁中，檢查是否埋入 GTM 容器，若頁面沒有埋入容器，代碼是不會觸發的。 在要檢查的頁面打開開發者工具，來到「元素」頁面： ![](https://i.imgur.com/rVBCd1r.jpg) 按下 Ctrl+F > 搜尋欄內搜尋「GTM」 ![](https://i.imgur.com/gaPGwyT.png) 如果頁面有埋設 GTM 容器，就會看到對應的 GTM 編號 ![](https://i.imgur.com/H1nuLRE.png) ### 基本代碼 Base code 下圖是 Meta pixel 的基本代碼，根據官方文件說明，我們可以透過 GTM 將基本代碼埋設在網站的每一頁 (全站頁面瀏覽)，也就是同個網站中的每個頁面，在頁面載入後就會觸發一次： ![](https://i.imgur.com/kkma7nm.png) - `fbq("init", "949142992748102")`，後面那一長串數字，就是我們用來檢查的 pixel id。 - `fbq("track", "PageView")`，代表的是 Meta pixel 的標準事件「頁面瀏覽」。 ### 頁面瀏覽事件 頁面瀏覽事件可以分為下面兩種： - 全站頁面瀏覽：網站內每個頁面，載入後都會觸發。 - 部分頁面瀏覽：特定頁面載入後觸發。 所以一般來說，我們講的 Page view ，指的是全站頁面瀏覽，隨著使用者的動線進到的每一個頁面，都被算進 PV 計數。 而當今天我們想要個別計算進到購物車頁面，或進到付款完成感謝頁的人數時，則需要將事件設定為部分頁面瀏覽，通常會提供購物車頁面或感謝頁的 URL，作為設定條件。 > 舉個例子： > > 電商購物車頁的 URL 為 `https://shop.com/cart` > 付款完成的感謝頁 URL 為 `https://shop.com/payment/thankyoupage` > > 當使用者進到購物車頁，會觸發一次 PV 和一次購物車頁的事件；當使用者付款完成進到感謝頁，會觸發一次 PV 和一次感謝頁的事件。 理解了兩種頁面瀏覽事件的差異，就可以進到實際檢查的例子了： #### 全站頁面瀏覽 在前一節的基本代碼介紹中，我們知道全站頁面瀏覽 `fbq("track", "PageView")`。 來到需要檢查 PV 的頁面，開啟開發者工具的「網路」頁、輸入 pixel id 進行篩選，可以看到我們的 PageView 事件已經觸發，如果沒看見 PageView，可以重新整理、刷新頁面： ![](https://i.imgur.com/N0WFKWk.jpg) #### 部分頁面瀏覽 下圖為一個自訂事件的代碼： ![](https://i.imgur.com/IeLDjtL.png) 我們希望記錄使用者抵達訂單完成頁的次數，所以將事件綁定在訂單完成頁上，觸發條件：URL 內含有 `action=cartStep3`。 一樣開啟開發者工具的「網路」頁、輸入 pixel id 進行篩選，接著依照實際購物流程，一直執行到最後的訂單完成頁，可以看到觸發一次 PV 和一次自訂事件 `CFcustom_CFfinal`： ![](https://i.imgur.com/Yn9fPHm.png) 這代表我們的事件已經成功綁定在訂單完成頁上了。 ### 按鈕事件 相對於頁面瀏覽事件，按鈕事件簡單的多，只需要檢查點擊按鈕，是否成功觸發代碼。 下圖為一個自訂事件的代碼： ![](https://i.imgur.com/dagEmom.png) 我們希望記錄使用者點擊「前往結帳」按鈕的次數，所以將事件綁定在此按鈕上： ![](https://i.imgur.com/vxZhJ3n.png) 在此頁開啟開發者工具的「網路」頁，在點擊按鈕前，我們可以在開發者工具內看到觸發的一次 PV： ![](https://i.imgur.com/rl8Koox.png) 在點擊按鈕後，可以發現在載入新頁面的 PV 之前，多了一個帶著自訂事件名稱的事件資訊出現： ![](https://i.imgur.com/aYA100Y.png) 這代表我們的事件已經成功綁定在「前往結帳」按鈕上了，可以重複點擊按鈕，事件應該要跟著重複觸發。 ### 表單事件 下面是一個自訂的表單事件代碼： ![](https://i.imgur.com/zVLekim.png) 我們希望記錄使用者點擊「立即預約」按鈕的次數，所以將事件綁定在此按鈕上： ![](https://i.imgur.com/ZKOALkh.png) 一樣打開開發者工具的「網路」頁 > 重整頁面並填入 pixel id 進行篩選，我們可以看到已經觸發了一次 PV： ![](https://i.imgur.com/PbYmGmC.png) #### 表單防呆 接著，在未填資料或缺少表單資料的情況下，點擊「立即預約」按鈕： ![](https://i.imgur.com/VXddrjA.png) 我們還是只有看到先前觸發的 PV 事件，這代表表單有做好資料驗證與防呆，事件收數比起未防呆的表單更加精確。 接著，填入完整資料、點擊「立即預約」按鈕，會送出表單並跳轉至感謝頁： ![](https://i.imgur.com/pPGVflZ.png) 可以看到在下一個 PV 與感謝頁事件觸發之前，觸發了我們的自訂事件 `CFgeneratelead`，這樣表單事件就算成功觸發。 ## 相關名詞 - 追蹤碼：用來追蹤使用者在網頁上的行為，將收到的數據回傳到 Google Analytics、Meta Business Suite 等系統後台，提供商家進行商業分析。 - GTM ( Google Tag Manager )：Google 代碼管理工具，用來集中管理不同平台的網頁追蹤碼，讓商家只需埋入一組 GTM 容器，就可以同時管理多平台的追蹤碼。 - 無痕模式: 可於瀏覽器設定，不會儲存記錄的模式，可避免檢查受到其他因素影響。 - 開發者工具: 瀏覽器提供的工具，可以看到網站傳送資料 (追蹤) 的紀錄。 ## 參考文件