Facebook Pixel

官方文件

  1. 基本用法【PageView】
  2. 轉換率追蹤【Purchasing Event】
  3. 事件與參數用法【Event & Parameter】

範例

基本用法：導入PageView

<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','//connect.facebook.net/en_US/fbevents.js'); 
fbq('init', '這邊放入FB頁面的ID'); 
fbq('track', 'PageView'); 
</script> 

<noscript> 
 <img height="1" width="1" style="display:none" 
src="https://www.facebook.com/tr?id=這邊放入FB頁面的ID&amp;ev=PageView&amp;noscript=1" /> 
</noscript>

進階用法：轉換率追蹤

<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','//connect.facebook.net/en_US/fbevents.js'); 
fbq('init', '這邊放入FB頁面的ID'); 
fbq('track', 'PageView');  
fbq('track', 'Purchase', {currency: '這邊放幣值', value: 這邊放金額}); 
//物件參數還可以設其他的，但是上面2個是必須指定。
//詳細參考事件與參數用法 
</script> 


<noscript> 
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=這邊放入FB頁面的ID&amp;ev=PageView&amp;noscript=1" />  //↓如果有2個事件的話（例如本例），就要指定2組img tag
<img height="1" width="1" border="0" alt="" style="display:none" 
src="https://www.facebook.com/tr?id=107593379985738&amp;ev=Purchase&amp;cd[value]=這邊放金額&amp;cd[currency]=這邊放幣值" />  
//【&amp;】是&的轉換字元，用來連結Purchase事件的物件資料。
//因為本例只有2組物件參數，所以用了一個&amp;連結彼此
//若使用更多物件參數，就需要追加&amp;連接
//用法請參考轉換率追蹤 </noscript>

除錯方法

  1. 準備好FB Pixel程式碼
  2. 下載Chrome外掛程式：Facebook Pixel Helper
  3. 用CODEPEN打開一個PEN，把程式碼貼在HTML的地方
  4. 用Facebook Pixel Helper檢查程式碼有沒有成功執行（成功會有綠色的勾勾）