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

Google_tag_manager

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 並將ID貼進我們建立的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標籤管理員,在文章最下方有如何匯入容器的方式!

臉書電商事件追蹤容器

立即訂閱免費獲得預配置的 GTM 容器。一旦您導入了容器,就可以開始將網站的購買事件發送到臉書囉!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *