facebookPixel程式碼安裝詳解

阿新 • • 發佈：2020-09-03

最近接到一個需求，優化獨立站的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 Key	Value Type	Parameter 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小時生效。注意對物件屬性的格式一定要按照說明文件來，如果不對的話可能報錯。如果用上面的檢測方法檢測過還報錯的話，有可能就是引數錯誤了，認真檢查即可。

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

facebookPixel程式碼安裝詳解

facebookPixel程式碼安裝詳解

跳躍表的基本概念以及程式碼實現詳解

Java 二分法檢索演算法程式碼實現詳解

JavaWeb Refresh響應頭程式碼例項詳解

python字串,元組,列表,字典互轉程式碼例項詳解

JAVA類變數及類方法程式碼例項詳解

ActiveMQ訊息簽收機制程式碼例項詳解

序列化模組json程式碼例項詳解

Django呼叫支付寶介面程式碼例項詳解

Kafka Java Producer程式碼例項詳解

debian10 安裝詳解

Python scrapy爬取小說程式碼案例詳解

RocketMq事務訊息傳送程式碼流程詳解

基於VSCode除錯網頁JavaScript程式碼過程詳解

Mysql_二進位制方式安裝詳解

Springboot整合多資料來源程式碼示例詳解

vscode+PyQt5安裝詳解步驟

微信小程式換膚功能實現程式碼(思路詳解)

JavaScript array常用方法程式碼例項詳解

JDK安裝與解除安裝詳解

facebookPixel程式碼安裝詳解

相關推薦