用Google Tag Manager 安裝FB像素(針對WordPress使用者）

Facebook像素能讓您精準追蹤用戶行為，進而優化您的廣告並提高轉化率。對於希望能夠於提升網站性能的WordPress使用者來說，利用Google標籤管理員（GTM）安裝Facebook像素，是加速網站的一個好辦法（可以提升SEO評比）。這篇文章將帶你快速安裝臉書像素。

快速回顧Google Tag Manager

為了專注於本文主題，我們不再詳細介紹Google Tag Manager的設定步驟。如果你是第一次接觸GTM，推薦您先參考我們之前的文章如何使用Google標籤管理員，以獲得基礎的安裝和使用方法。

預設安裝GTM

假設你已經使用GTM4WP外掛在WordPress網站上成功安裝了Google Tag Manager。這為接下來安裝Facebook像素奠定了基礎。

設定觸發條件

在Google標籤管理員中設定觸發條件，是實現精準追蹤的第一步。針對電商網站，常見的GTM事件包括：view_item、add_to_cart、begin_checkout、add_payment_info、purchase。透過這些事件，您可以更好地了解用戶的購買旅程和行為模式。

但是該注意的是，GTM 裡面有一個trigger 叫做view_item_list 這個事件也會觸發我們Facebook 的view_item 事件，因此我會做出一個額外的電商觸發事件，並且之後在設置Tag 的時候排除這個觸發條件

安裝Adsmurai Facebook Pixel

接下來，您需要安裝Adsmurai Facebook, TikTok, Pinterest, Snapchat Pixel & Conversions API (CAPI)標籤模板。這個模板讓安裝Facebook像素變得簡單快速同時也支援其他像素安裝。 只要照著我們下面的步驟就能夠安裝 Adsmurai Facebook Pixel 了

當你將這個模板安裝好後，你就會看到下方的頁面

建立一個Facebook ID 常值

接下來我們要點擊變數，並且新增一個常值，並且將你的變數名稱取名為Facebook Pixel ID, 並將你的Facebook Pixel ID 放置到內部。

尋找你的Facebook Pixel ID

先到你的Facebook Business Manage, 登入後並且案左下方的設定 -> 選擇資料來源裡面的 Pixels 或是Datasets 你就能夠進到Events Manager 內部去看你的Pixel ID了， 或是你可以如下圖一樣直接在這個區域進行複製。

當我們取得Facebook Pixel ID 後就回到Google Tag Manager 並將IＤ貼進我們建立的Facebook ID 常值中

設定資料層變數

接下來我們就需要在變數的區域新增一些資料層變數

透過設定數據參數，你就可以收集更多關於用戶的信息，如姓名、電子郵件、地址和購買行為等。以下是一些關鍵的資料層變數名稱，讓可以用來追蹤e-commerce事件：

基本顧客資訊

• customerBillingEmail：顧客的帳單電子郵件地址，用於追蹤購買者的聯絡資料。
• customerBillingFirstName：顧客的帳單名字，有助於個人化市場推廣策略。
• customerBillingLastName：顧客的帳單姓氏。
• customerBillingPhone：顧客的帳單電話號碼，進一步的個人化聯絡方式。

這個基本顧客資訊只有當這位客人曾經在網站上購買商品，並且登入了帳號才會透過資料層回寄給Facebook

購買行為相關資訊

• ecommerce.currency：交易使用的貨幣類型。
• ecommerce.items.0.id ＆ecommerce.items.0.item_id：產品ID，對於追蹤哪些產品被瀏覽或購買非常關鍵。
• ecommerce.items.0.item_category：產品類別，幫助了解顧客的偏好。
• ecommerce.items.0.item_name：產品名稱，直接顯示產品名稱。
• ecommerce.items.0.price：產品價格。
• ecommerce.items.0.quantity：購買數量。
• ecommerce.value：交易的總價值，對於計算ROI（投資回報率）極為重要。

這些資訊是當有人將商品加入購物車，或是觀看商品時，我們會將這位訪客的行為以及看的產品資訊回傳給Facebook，讓Facebook 知道這位遊客看了哪些商品或是購買了哪些商品，這樣我們在打廣告的時候就會顯示回報率

進階顧客購買資訊

• orderData.customer.billing.city、orderData.customer.billing.country：提供更詳細的地理位置資訊，有助於地區市場分析。
• orderData.customer.billing.email、orderData.customer.billing.first_name、orderData.customer.billing.last_name、orderData.customer.billing.phone：這些資訊可以提供給Facebook，用於匹配和建立顧客檔案，從而實現更精準的廣告定位。

進階顧客購買資訊的資料當顧客到你的網站購買商品時，他們填寫的個人資料會透過這幾個形式進行回傳，但是必須注意的是這個資訊跟我們常看到的customerBillingEmail 不一樣，orderData.customer.billing.email 客人不需要登入只需要有購買的動作，我們就能夠直接把購買資訊傳送回到我們的像素裡。而customerBillingEmail 則是當客人有註冊帳號並且登入後的行為才會被傳送回去。因此我們建議都使用 orderData.customer.billing.email來追蹤購買事件，避免無法順利觸發回傳事件。

實際操作步驟

我們已經安裝了Adsmurai Facebook Pixel 和觸發條件並且也設定好 Facebook ID 常數以及資料層變數接下來就是新增6個Facebook Pixel Tag 來追蹤電商活動了

我們回到Adsmurai Facebook Pixel,並且在Event Name 的下拉選單中可以看到有很多選項，我們第一個需要的就是PageView

在選擇PageView後，我們會看到下方問說我們的觸發方式有pixel 跟 conversion API ,然而我們目前沒有要設定伺服器版本的 Pixel 因此我們先選 Only pixel for web並且點擊下方的 Add Pixel ID，並且點擊右方的變數icon 並且選擇我們剛剛建立的常數（Facebook Pixel ID)

然後我們繼續往下滑會看到有個區域叫做[ Data parameters ] , 這個區域就是我們上一個段提到的資料層變數。

每個欄位的對應資料層如下：

• Content name -> 產品名稱 (ecommerce.items.0.item_name)
• Content category -> 產品分類 (ecommerce.items.0.item_category)
• Content type -> 類別（選product 即可）
• Content ID -> 產品ID (ecommerce.items.0.item_id)
• Value -> 總價值(ecommerce.value)
• Currency -> 幣別(ecommerce.currency)
• No of items -> 數量(ecommerce.items.0.quantity)

下一個部分是[Customer information parameters] ，除了Purchase（購買事件）以外，填寫email, phone,first name , last name 時都建議使用上個章節講過的[基本顧客資訊] ，而購買的事件則使用[進階顧客購買資訊]

當我們把[Data parameters] 跟[Customer information parameters] 都設置好了之後就可以到觸發條件的區域設定觸發條件囉。

如我們先前所說，我們將設定Page View, view_item, add_to_cart, begin_checkout, add_payment_info, purchase 這6個活動，因此我們必須新增6個 facebook pixel tag，並且根據你的追蹤活動選擇相對應的觸發條件(Facebook 官方文件說明）

• Page View ->All Page 網頁瀏覽 （原生的觸發條件）
• ViewContent -> view_item (到產品頁）
• AddToCart -> add_to_cart （加入購物車）
• InitialCheckout -> begin_checkout (點擊開始結帳）
• AddPaymentInfo -> add_payment_info (新增付款資訊）
• Purchase -> purchase (購買）

當我們將代碼設置好後就可以案發佈，並且透過預覽來確認是否所有的設定都正常！

直接下載我們設定好的容器

為了避免大家的麻煩我已經先把事件做成jason檔，如果需要的朋友可以直接下載並匯入GTM容器中就能開始使用了

匯入這個容器你需要先點擊[管理] -> [匯入容器] ->[選擇容器檔案] ->[選擇現有的工作區] ->[合併] ->[確認]

詳細操作可以參考我們之前的文章如何使用Google標籤管理員，在文章最下方有如何匯入容器的方式！