用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 並將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 容器。一旦您導入了容器,就可以開始將網站的購買事件發送到臉書囉!