臉書廣告(Meta Pixel)像素怎麼埋設,怎麼讓pixel有正確出發事件? 本篇將所有Meta像素埋設需要用到的技術,都會在這一篇總整理,提供給讀者參考。對於電商平台想要投放廣告在Meta,最重要的也是先將臉書像素埋設好,這樣後續才有利於廣告追蹤、受眾包收集後續再行銷使用。
如果你是電商產業,最重要的就是在前端拿到「購買金額」,並透過GTM回傳給Meta像素,讓Meta進行廣告投放的ROAS計算。如果你是要提高「廣告追蹤的精準度」,那就會需要透過伺服器追蹤,將前端的事件,與伺服器的事件分派給Pixel一起進行收集,後續再藉由「EventID」,來將重複的事件Deduplicated即可。
透過臉書廣告投放,建議一定要有設定「伺服器追蹤埋設」,隨著IOS政策,以及使用者越來越多會安裝ADBLOCKER,你的廣告會越來越處於不利的狀態,如果你不懂伺服器運行的原理,可以參考。有伺服器同時也能自訂追蹤網域,讓你的追蹤網址長得跟別人不一樣,減少被廣告攔截器阻擋的機會。
如果讀者是廣代需要幫客戶進行廣告埋設,那你可能會需要注意「是否同時有多Pixel」收集情況;是否有些廠商使用範本,而有些使用自訂html。多種因素下都會導致你埋設的Pixel收集不正確。
章節內容
常見的Meta廣告像素問題
以下是常見的臉書廣告埋設時會遇到的問題,也幫大家整理起來,歡迎閱讀。
- 1. Meta像素事件有重複。
- 2.有正確埋設但事件都觸發不了。
- 3.如何收集購買事件的價值,以計算ROAS。
- 4.要怎麼定義我的轉換事件?
- 5.臉書廣告的事件漏斗製作。
- 6.名單型廣告,追蹤表單提交的客戶(含未完成)。
- 7.名單型廣告,只想收集「有成功提交的客戶」。
- 8.投放潛在客戶 (計時器)。
- 9.要怎麼設定CAPI轉換。
像素埋設實務
新增像素

至企業管理平台中的選單,找到「事件管理工具」。如果你沒有企業管理平台,是否有下過廣告? 如果有你一樣可以從「廣告管理員」找到上圖位置。

點選連結資料來源。

點選網站類型。

輸入你自己的pixel名稱,方便未來識別用。

貼上要追蹤的網址。

複製此像素ID,待會進行GTM設定時會用到。
透過臉書範本埋設

前往GTM(client容器),點選範本,並且點選右上角的Search Gallery (搜尋範本庫)。

找到Facebook Pixel範本,並點選新增。

前往代碼,選擇前一步驟新增的範本。以下是針對上圖的個別欄位進行解說。
Facebook Pixel ID:填入 FBPixel ID
Event Name:輸入你要的事件

- Standard為Meta定義的標準事件。
- Custome為自行輸入的自訂事件。
- Variable為透過變數的動態名稱事件。
Object Properties:物件(追蹤)參數
如果你是電子商務類型,要計算ROAS那一定要回傳購買事件金額給臉書,另外可以再透過前端收集產品ID、產品名稱、並且填入對應的Key中 (詳看上圖範例)。
透過自訂html進行埋設
如果你是喜歡用上一個段落「透過臉書範本」進行埋設,那這一個段落你就可以跳過,因為兩個目的都是傳送事件給臉書,只是代碼的設定不同。透過自訂html你需要埋設初始代碼 (init),再加上你要的事件。基礎代碼GTM中,一個pixel只會放一個init,而事件則是看你有幾個事件,就創造幾個自訂html進行追蹤。

透過企業管理平台=>事件管理工具=>點選手動安裝程式碼。

複製這整個程式碼,並貼在GTM中的自訂HTML。

<!-- Meta Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '123456789123456');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=362148676447605&ev=PageView&noscript=1"
/></noscript>
<!-- End Meta Pixel Code -->
自訂html觸發設定

此為基礎代碼的額外設定,如果你的網站有多個pixel進行,調整代碼的觸發順序,或是修改觸發條件,都可以解決pixel追蹤的衝突,詳細可以參閱這篇文章。主要順序一定要init先啟動,才能繼續運行後面的自訂事件觸發,不然就會導致事件缺漏。
自訂事件埋設

<script>
fbq('track', 'AddToCart', {
value: {{div-value}},
currency: 'TWD',
content_ids: {{Dspyder - item_id}},
content_name:{{Dspyder - dlv - item_name}},
content_type:"product"
});
</script>
如果你是要追蹤購買事件,只需要把上方的「AddToCart」,換成「Purchase」即可。其他的物件陣列參數,都需要你額外透過網站前端的回傳,可以用上面的寫法,如果你不知道怎麼抓取網站前端的事件金額,歡迎參閱。

如果你設定的網站有多個pixel同時運行追蹤,你一定要確保你自己的init是在事件觸發的前面。因此建議Tag Sequensing這邊可以在自訂事件前面觸發init確保正確的流程順序不會跑掉。而最上面的Tag Firing Priority則是適用調整自己的代碼順序,數字越小越優先觸發,適合使用在有多個Pixel並行追蹤。
測試

安裝Meta Pixel Helper可以查閱網站前端發出去的Pixel追蹤。
查看像素後台

埋設完成後,基本上事件會開始同步收集,你可以隔幾個小時後回到網站後台確認收集的情況。
使用CAPI追蹤真的會比較好嗎?
或許你在投放廣告的時候,有時候會看到META的提醒要埋設CAPI,以提高轉換成效的收集。我也提供一些數據證明埋設CAPI與單純使用瀏覽器追蹤的差異。
以下面這一張ViewContent 、AddToCart、Purchase的 比較 。藍色線是透過「瀏覽器」;橘色線是透過「伺服器」,兩者傳送至META的事件管理工具所收到的一整個月的事件量。你可以看到藍線與橘線還是存在少數落差,尤其是如果發生在轉換事件上,一定量的落差也會導致評估人員無法正確評判廣告成效;影響廣告系統的學習速度,這兩件事都是確定正在每一天重複上的事。



如果你想用伺服器進行追蹤的話,你也可以選擇瀏覽器追蹤與伺服器追蹤同時並存,或者將伺服器追蹤使用在轉換事件上以節省伺服器請求的成本。
更多文章
Looker Studio
- Looker Studio教學|Looker Studio 公式|電商指標
- Looker Studio教學|5個Looker Studio 混和資料功能
- Looker Studio 教學|指標維度是甚麼
- Looker Studio 教學|數據工程師帶你從0學Looker Studio
- Looker Studio教學|導入臉書廣告數據|Adveronix 免費工具
GA4
- GA4教學| 數據保留多久? 延長GA4數據保留時間?
- GA4教學|Measurment Protocol 實例
- GA4教學|GA4 如果有Not Set該怎麼辦
- GA4教學|GA4閾值門檻|GA4資料不正確
- GA4教學|GA4常見來源判定順序
- GA4教學|如何處理GA4重複事件
- GA4教學|自訂探索報表使用解說介紹|洞察來源unassigned
- GA4教學|GA4報表出現Unassigned如何解決
- GA4教學|排除金物流網域|Referrer必備知識
- GA4教學| 一定要知道的GA4資料設定
GTM
- GTM教學|GTM觸發條件常失敗
- GTM教學|設定 Consent Mode 同意聲明模式
- GTM教學|GTM問題總整理
- GTM教學|設定臉書像素|常見Meta問題總整理
- GTM教學|WordPress表單驗證事件|GA4追蹤教學
- GTM教學|手動設定GCP SERVER伺服器配置
- GTM教學|臉書像素重複事件怎麼解決
- GTM教學|GTM常用變數中文解說
- GTM教學|伺服器追蹤|自訂網域追蹤
- GTM教學|伺服器追蹤教學4|Http解說
- GTM教學|追蹤來自部落格轉換成效
- GTM教學|伺服器追蹤教學3 | Facebook轉換Capi設定
- GTM教學|伺服器追蹤教學2 | GA4事件設定
- GTM教學|伺服器追蹤教學 | 伺服器配置設定
- GTM教學|Tiktok廣告電子商務埋設大全3|廣告代碼埋設
- GTM教學|Tiktok廣告電商埋設2
- GTM教學|廣告電商埋設1|電商必要參數抓取
- GTM教學|電商埋設5|GA4電商埋設
- GTM教學|電子商務埋設大全4|GA4電子商務完整埋設
- GTM教學|GTM電商埋設3|抓取ItemName
- GTM教學|GTM電商埋設2|抓取ItemID
- GTM教學|電商埋設1|抓取Value
- GTM教學|提升廣告成效|Adblocker阻擋原理
- GTM教學|GTAG部署方式三大整理
- GTM教學|Google Ads 強轉換 | 購買金額
- GTM教學|自訂網址追蹤|不是只有「UTM」才能做網址追蹤
- GTM教學|AutoEvent追蹤使用者點選的圖片
- GTM教學|CSS Selector抓取表格的值
- GTM教學|了解網站熱門頁面|GTM追蹤點擊事件
- GTM教學|埋設事件|確認GA4有無收到事件
- GTM教學|自訂網址追蹤|不是只有「UTM」才能做網址追蹤
- GTM教學|3分鐘檢查GA4事件重複錯誤
- GTM教學|GA4電子商務事件埋設範本
- GTM教學|DOM抓取電商中的轉換價值
- GTM教學|新的GTM容器一定要做這設定
- GTM教學|設定GA4事件大全
- GTM教學|推薦GTM範本|全新DataLayer寫入方式
- GTM教學|網站計時器埋設|抓出使用者進站停留時間
- GTM教學|如何辨別是否網站為SPA站
- GTM教學|名單型網站追蹤|Thankyou Page 填寫表單事件
- GTM教學|網站通話追蹤|臉書私訊、加LINE
- GTM教學|自訂網址追蹤|不是只有「UTM」才能做網址追蹤
BigQuery
- BigQuery教學|BigQuery預測GA4數據
- BigQuery教學|視覺化報表怎麼製作
- BigQuery教學|基礎必備語法|免費BigQuery資料導入
- BigQuery教學|串接BIgQuery | BIgQuery費用