## 目的
本文件主要向非技術人員說明該如何檢查使用 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

裝好 Meta Pixel Helper，在檢查時，能看到代碼是否觸發的即時提示：


使用上的優點為清楚明瞭，會依照不同 pixel id 分類；缺點是：當出現錯誤訊息時，很難清楚得知導致錯誤的原因。

>如果本來就會使用 Meta Pixel Helper 進行檢查，可以使用此擴充直接操作、檢查，但需注意 pixel id 是否正確，如果同時有多家廠商埋設 Meta pixel，可能會被別人的事件影響。

### 2. Google Tag Assistant
通常只有工程師需要實際在 Google Tag Manager (GTM) 內進行代碼埋設，所以通常也只有工程師會使用到 Tag assistant，但這裡一樣介紹一下這個工具。

在埋設代碼時，我們會先透過 GTM 的「預覽」功能，檢查代碼是否照指定的行為觸發：


點擊預覽之後會跳出 Tag Assistant 的分頁，需要填入欲檢查的網址、再點擊 Connect：


除了跳出一個新的預覽視窗，Tag Assistant 的頁面也會顯示已連接：


接著我們就可以在預覽視窗內操作，而 Tag Assistant 的頁面也會有所有使用者行為的記錄，可以再根據需求，查看代碼是否正常運作和觸發的詳細內容：


使用 Tag Assistant 的優點，在於我們可以在代碼發布到現行網站前，就先清楚看到代碼是否觸發，對於 GA、Google ADs 等平台，Tag Assistant 也有進行整合，能直接看到代碼是否正常運作。

但對 Meta Pixel 來說，我們只能看到代碼是否觸發，卻不能確定收數是否正常，因此我們需要使用下一個工具進行完整的檢查。

### 3. 瀏覽器的開發者工具 (DevTools)
在進行追蹤碼檢查時，我們推薦使用瀏覽器原生的開發者工具 (DevTools)。
>雖然名稱內有「開發者」，但其實就檢查追蹤碼觸發這件事來說，你不需要寫程式或看很多文件，只需要點點滑鼠，複製、貼上，就能夠自己進行檢查。
>
>簡單來說：這不是只有工程師才能用的工具。

我們可以先打開想要檢查的網頁：


滑鼠右鍵 > 檢查

恭喜你，你已經叫出開發者工具了 (右邊黑壓壓的這一個區塊)：


我們需要的東西在「網路」這一頁，裡面會有頁面上的所有資源，包含載入的圖片、觸發追蹤碼的記錄等等：


在「網路」頁籤的上方，我們可以輸入資訊、對所有資源進行篩選。

而通常我們會勾選「保留記錄檔」和「停用快取」這兩個功能，確保資料不會因為頁面刷新而被清空，或是被快取功能影響。


對於 Meta pixel 的代碼檢查，我們只需要在篩選條件內放入 pixel id，就可以篩出所有關於這個 pixel 的資源。

每一個資源點擊後，都可以看見更詳細的資料，而我們經常需要看的是裡面的「承載」頁面，以 Meta pixel 來說，`ev` 欄位代表的是事件名稱。

所以下面截圖的含意是： `pixel id = 949142992748102` 的 PageView 已經觸發了一次。


在實際進行檢查前，你需要知道下面兩點：

1. Meta pixel 的基本代碼內，有你的 pixel id => `fbq("init", "你的 pixel id 在這裡")`
2. 事件成功觸發時，會回傳事件名稱，可以利用事件名稱來辨別有無觸發。

文件後半段皆使用開發者工具進行代碼觸發檢查、除錯，我們有一些常用的檢查範例供你參考。

## 檢查範例

在檢查前，通常會有一份整理好的代碼文件供你參考，良好的代碼文件會清楚標示每個代碼需要埋在哪裡。

一份整理好的代碼文件內會有：

- 需要埋設的代碼
- 代碼埋設位置 (頁面、按鈕、埋設的 GTM 容器編號等)

如果你手邊沒有整理好的文件，請生出一份，你絕對不會想變成那個一問三不知的人。

### GTM 容器
如果客戶使用 GTM 來管理代碼，你可以先在欲檢查的網頁中，檢查是否埋入 GTM 容器，若頁面沒有埋入容器，代碼是不會觸發的。

在要檢查的頁面打開開發者工具，來到「元素」頁面：


按下 Ctrl+F > 搜尋欄內搜尋「GTM」


如果頁面有埋設 GTM 容器，就會看到對應的 GTM 編號


### 基本代碼 Base code
下圖是 Meta pixel 的基本代碼，根據官方文件說明，我們可以透過 GTM 將基本代碼埋設在網站的每一頁 (全站頁面瀏覽)，也就是同個網站中的每個頁面，在頁面載入後就會觸發一次：


- `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，可以重新整理、刷新頁面：

#### 部分頁面瀏覽
下圖為一個自訂事件的代碼：


我們希望記錄使用者抵達訂單完成頁的次數，所以將事件綁定在訂單完成頁上，觸發條件：URL 內含有 `action=cartStep3`。

一樣開啟開發者工具的「網路」頁、輸入 pixel id 進行篩選，接著依照實際購物流程，一直執行到最後的訂單完成頁，可以看到觸發一次 PV 和一次自訂事件 `CFcustom_CFfinal`：


這代表我們的事件已經成功綁定在訂單完成頁上了。

### 按鈕事件
相對於頁面瀏覽事件，按鈕事件簡單的多，只需要檢查點擊按鈕，是否成功觸發代碼。

下圖為一個自訂事件的代碼：


我們希望記錄使用者點擊「前往結帳」按鈕的次數，所以將事件綁定在此按鈕上：


在此頁開啟開發者工具的「網路」頁，在點擊按鈕前，我們可以在開發者工具內看到觸發的一次 PV：


在點擊按鈕後，可以發現在載入新頁面的 PV 之前，多了一個帶著自訂事件名稱的事件資訊出現：

這代表我們的事件已經成功綁定在「前往結帳」按鈕上了，可以重複點擊按鈕，事件應該要跟著重複觸發。

### 表單事件
下面是一個自訂的表單事件代碼：


我們希望記錄使用者點擊「立即預約」按鈕的次數，所以將事件綁定在此按鈕上：


一樣打開開發者工具的「網路」頁 > 重整頁面並填入 pixel id 進行篩選，我們可以看到已經觸發了一次 PV：


#### 表單防呆
接著，在未填資料或缺少表單資料的情況下，點擊「立即預約」按鈕：


我們還是只有看到先前觸發的 PV 事件，這代表表單有做好資料驗證與防呆，事件收數比起未防呆的表單更加精確。

接著，填入完整資料、點擊「立即預約」按鈕，會送出表單並跳轉至感謝頁：


可以看到在下一個 PV 與感謝頁事件觸發之前，觸發了我們的自訂事件 `CFgeneratelead`，這樣表單事件就算成功觸發。

## 相關名詞
- 追蹤碼：用來追蹤使用者在網頁上的行為，將收到的數據回傳到 Google Analytics、Meta Business Suite 等系統後台，提供商家進行商業分析。
- GTM ( Google Tag Manager )：Google 代碼管理工具，用來集中管理不同平台的網頁追蹤碼，讓商家只需埋入一組 GTM 容器，就可以同時管理多平台的追蹤碼。
- 無痕模式: 可於瀏覽器設定，不會儲存記錄的模式，可避免檢查受到其他因素影響。
- 開發者工具: 瀏覽器提供的工具，可以看到網站傳送資料 (追蹤) 的紀錄。

## 參考文件