facebookPixel代碼安裝詳解

本文轉載自查看原文 2020-09-03 21:50 615

最近接到一個需求，優化獨立站的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，是谷歌瀏覽器的一個擴展，安裝后可以通過頂部的插件檢測頁面的事件是否加載。切記，檢測的時候打開FQ，只有在FQ狀態下才能夠加載上fb的基礎js，才能進一步的觸發事件。

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

也可以在控制台查看有沒有發送請求。

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

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Atom運行Python的安裝配置步驟和代碼范例詳解 seaweedfs代碼詳解 FFT代碼詳解 sift代碼實現詳解 Eureka 代碼詳解 GUI編程代碼詳解 wordcount源代碼詳解 dedecms代碼詳解很全面 Ramdisk源代碼詳解網頁代碼上線詳解