facebookPixel程式碼安裝詳解

低階碼農312發表於2020-09-03
KPI

 最近接到一個需求，優化獨立站的facebookPixel程式碼，完成後對這個專案進行復盤。首先要介紹facebookPixel的理論知識。

Facebook畫素是一段JavaScript程式碼，其中載入了一個小的函式庫，您可以使用這些函式來跟蹤網站上Facebook廣告驅動的訪問者活動。它依賴於Facebook cookie，這使我們能夠將您的網站訪問者匹配到各自的Facebook使用者帳戶。匹配後，我們可以在Facebook Ads Manager和Analytics（分析）資訊中心中統計他們的操作，以便您使用資料分析網站的轉化流並優化廣告系列。

Facebook Pixel畫素程式碼安裝在獨立站或者合作伙伴的網站上，可以記錄訪客在網頁上的特定瀏覽動作,比如“觀看內容,加入購物車，點選購買按鈕”等等,可以針對使用者這些動作做Facebook廣告和再營銷，還可以看到前端廣告跟後端的資料對比。前端的廣告曝光跟click,有多少轉化,歸因到後端中去了，這對做facebook廣告優化有著非常重要的參考意義。

安裝必備基本程式碼：

基本畫素程式碼在兩個位置包含畫素的ID，如下所示：

<!-- Facebook 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', '{your-pixel-id-goes-here}');
  fbq('track', 'PageView');
</script>
<noscript>
  <img height="1" width="1" style="display:none" 
       src="https://www.facebook.com/tr?id={your-pixel-id-goes-here}&ev=PageView&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->

 安裝前需要了解的基礎知識

標準事件，可以使用使用 fbq('track') 函式來追蹤下列標準事件

活動名稱活動說明物件屬性升級物件的custom_event_type值

AddPaymentInfo

在結帳流程中新增付款資訊時。

一個人單擊“儲存帳單資訊”按鈕。

content_category，content_ids，contents，currency，value

不需要。

ADD_PAYMENT_INFO

AddToCart

將產品新增到購物車時。

一個人單擊新增到購物車按鈕。

content_ids，content_name，content_type，contents，currency，value

不需要。

動態廣告必填：content_type和contents，或content_ids

新增到購物車

AddToWishlist

將產品新增到心願單時。

一個人單擊新增到願望清單按鈕。

content_name，content_category，content_ids，contents，currency，value

不需要。

ADD_TO_WISHLIST

CompleteRegistration

完成登錄檔後。

個人提交完整的訂閱或登錄檔格。

content_name，currency，status，value

不需要。

完成註冊

Contact

當某人通過電話，簡訊，電子郵件，聊天等開始與您的公司聯絡時。

一個人提交有關產品的問題。		 不需要。

聯絡

CustomizeProduct

一個人定製產品時。

一個人選擇一件T恤的顏色。		 不需要。

CUSTOMIZE_PRODUCT

Donate

一個人向您的組織或事業捐款時。

一個人將對人道主義協會的捐款新增到他們的購物車中。		 不需要。  

FindLocation

當某人通過網站或應用程式搜尋您商店的位置而打算訪問該實際位置時。

一個人想在本地商店中找到特定的產品。		 不需要。

FIND_LOCATION

InitiateCheckout

當某人在完成結帳流程之前進入結帳流程時。

一個人單擊結帳按鈕。

content_category，content_ids，contents，currency， num_items，value

不需要。

INITIATE_CHECKOUT

Lead

註冊完成後。

一個人點選定價。

content_category，content_name，currency，value

不需要。

鉛

PageView

這是預設的畫素跟蹤頁面訪問。

一個人登陸您的網站頁面。		 不需要。

頁面預覽

Purchase

購買或結帳流程完成後。

一個人已經完成了購買或結帳流程，並進入了“謝謝”或“確認”頁面。

content_ids，content_name，content_type，contents，currency，num_items，value

必填：currency和value

動態廣告必填： content_type和contents，或content_ids

採購

Schedule

當某人預約訪問您的位置之一時。

一個人選擇預約牙醫的日期和時間。		 不需要。

時間表

Search

搜尋時。

有人在您的網站上搜尋產品。

content_category，content_ids，contents，currency，search_string，value

不需要。

搜尋

StartTrial

當某人開始免費試用您提供的產品或服務時。

一個人選擇遊戲的空閒時間。

currency，predicted_ltv，value

不需要。

START_TRIAL

SubmitApplication

當某人申請您提供的產品，服務或程式時。

一個人申請信用卡，教育計劃或工作。		 不需要。

遞交申請

Subscribe

當某人開始申請您提供的產品或服務的付費訂閱時。

一個人訂閱了您的流媒體服務。

currency，predicted_ltv，value

不需要。

訂閱

ViewContent

訪問您關注的網頁（例如，產品頁面或登入頁面）。ViewContent告訴您是否有人訪問了網頁的URL，但沒有告訴他們他們在該網頁上看到或執行的操作。

一個人登陸產品詳細資訊頁面。

content_ids，content_category，content_name，content_type，contents，currency，value

不需要。

動態廣告必填：content_type和contents，或content_ids

VIEW_CONTENT

自定義事件

可以通過呼叫畫素的fbq('trackCustom')函式來跟蹤自定義事件，以自定義事件名稱和（可選）JSON物件作為其引數。就像標準事件一樣，自定義事件可以在網頁<body>載入或訪問者執行諸如單擊按鈕之類的操作時，在網頁的開啟和關閉標籤之間的任意位置呼叫該函式。自定義事件名稱必須是字串，並且長度不能超過50個字元。

物件屬性（JSON格式）

Property KeyValue TypeParameter Description

content_category

String

Category of the page/product.頁面/產品的類別。

content_ids

Array of integers or strings

Product IDs associated with the event, such as SKUs (e.g. ['ABC123', 'XYZ789']).
與事件關聯的產品ID，例如SKU（例如['ABC123', 'XYZ789']）。

content_name

String

Name of the page/product.頁面/產品的名稱。

content_type

String

Either product or product_group based on the content_ids or contents being passed. If the IDs being passed in content_ids or contents parameter are IDs of products then the value should be product. If product group IDs are being passed, then the value should be product_group.
無論是product或product_group基於content_ids或contents傳遞。如果傳入的ID content_ids或contents引數是產品ID，則值應為product。如果要傳遞產品組ID，則值應為product_group。

contents

Array of objects

An array of JSON objects that contains the quantity and the International Article Number (EAN) when applicable, or other product or content identifier(s). id and quantity are the required fields. e.g. [{'id': 'ABC123', 'quantity': 2}, {'id': 'XYZ789', 'quantity': 2}].
包含數量和國際物品編號（EAN）（如果適用）或其他產品或內容識別符號的JSON物件陣列。id並且quantity是必填欄位。例如[{'id': 'ABC123', 'quantity': 2}, {'id': 'XYZ789', 'quantity': 2}]。

currency

String

The currency for the value specified.value指定的貨幣。

num_items

Integer

Used with InitiateCheckout event. The number of items when checkout was initiated.與InitiateCheckout事件一起使用。發起結帳時的專案數。

predicted_ltv

Integer, float

Predicted lifetime value of a subscriber as defined by the advertiser and expressed as an exact value.由廣告商定義並以精確值表示的訂戶的預測生存期值。

search_string

String

Used with the Search event. The string entered by the user for the search.與Search事件一起使用。使用者為搜尋輸入的字串。

status

Boolean

Used with the CompleteRegistration event, to show the status of the registration.與CompleteRegistration事件一起使用，以顯示註冊狀態。

value

Integer or float

The value of a user performing this event to the business.對企業執行此事件的使用者的價值。

獲得了基本程式碼，並且對事件和物件屬性有了基本的瞭解以後，我們可以開始正式的安裝程式碼了。

要安裝畫素，我們強烈建議您在跟蹤網站訪問者操作的每個頁面的開始和結束標記之間新增其基本程式碼。大多數開發人員將其新增到網站的永久標頭中，因此可以在所有頁面上使用。
將程式碼放置在程式碼中<head>可減少瀏覽器或第三方程式碼阻止畫素執行的機會。它還可以更快地執行程式碼，從而增加在訪客離開您的頁面之前對其進行跟蹤的機會。注意，跟蹤程式碼是非同步的，不會影響網站的效能。

將其新增到網站後，請載入包含畫素的頁面。這應該呼叫fbq('track', 'PageView')，它將PageView在事件管理器中作為事件進行跟蹤。當然，我們不可能僅僅追蹤PageView事件，作為一個電商網站，我們還可能需要追蹤商品詳情頁瀏覽，加入購物車，結賬等操作，這些操作有些需要頁面載入時觸發，有些需要對頁面元素進行操作的時候進行觸發，示例程式碼如下：

頁面載入時觸發商品詳情瀏覽，引數為商品的基本資訊

<!-- Facebook Pixel Code -->
<script>
fbq('track', 'ViewContent', {
  content_name: 'Really Fast Running Shoes',
  content_category: 'Apparel & Accessories > Shoes',
  content_ids: ['1234'],
  content_type: 'product',
  value: 0.50,
  currency: 'USD'
 });
</script>
<!-- End Facebook Pixel Code -->

點選加入購物車按鈕時觸發

<!-- Somewhere there is a button that performs Add to Cart -->
<button id="addToCartButton">Add To Cart</button>

<!-- Add Pixel Events to the button's click handler -->
<script type="text/javascript">
  var button = document.getElementById('addToCartButton');
  button.addEventListener(
    'click', 
    function() { 
      fbq('track', 'AddToCart', {
        content_name: 'Really Fast Running Shoes', 
        content_category: 'Apparel & Accessories > Shoes',
        content_ids: ['1234'],
        content_type: 'product',
        value: 4.99,
        currency: 'USD' 
      });          
    },
    false
  );
</script>

 程式碼安裝完成後，判斷是否安裝成功，需要通過第三方的工具檢測。工具名字叫Facebook Pixel Helper，是谷歌瀏覽器的一個擴充套件，安裝後可以通過頂部的外掛檢測頁面的事件是否載入。切記，檢測的時候開啟翻牆，只有在翻牆狀態下才能夠載入上fb的基礎js，才能進一步的觸發事件。

 如圖所示，標識程式碼已經安裝成功並生效。

 也可以在控制檯檢視有沒有傳送請求。

至此，跟蹤程式碼安裝檢測完成。上線後至少24小時生效。注意對物件屬性的格式一定要按照說明文件來，如果不對的話可能報錯。如果用上面的檢測方法檢測過還報錯的話，有可能就是引數錯誤了，認真檢查即可。

 檢測結果如圖，就證明安裝完成並且完美生效啦！！！

相關文章