1. 首页
  2. 问答
  3. 激发Facebook转换像素

激发Facebook转换像素

2013-10-09 30 views
14

我对Javascript仍然很陌生，但我想知道在没有实际加载“确认”/“谢谢”页面的情况下触发Facebook转换像素（下方）的最佳方式是什么？激发Facebook转换像素

<script type="text/javascript"> 
var fb_param = {}; 
fb_param.pixel_id = 'XXXXXXXXXXX'; 
fb_param.value = '0.00'; 
fb_param.currency = 'USD'; 
(function(){ 
    var fpw = document.createElement('script'); 
    fpw.async = true; 
    fpw.src = '//connect.facebook.net/en_US/fp.js'; 
    var ref = document.getElementsByTagName('script')[0]; 
    ref.parentNode.insertBefore(fpw, ref); 
})(); 
</script> 
<noscript><img height="1" width="1" alt="" style="display:none" 
src="https://www.facebook.com/offsite_event.php?id=XXXXXXXXXX&amp;value=0&amp;currency=USD" /></noscript>

Facebook表示，我们应该堵塞这个到我们的“谢谢你的网页”游客看到他们转换（填写表格，进行购买等）之后。但是，我们的某些表单是旁边的弹出窗口或侧边栏上的表单，我们不希望读者通过确认页面离开。使用Google Analytics（分析），我可以通过触发_gaq.push（['_ trackPageview']）创建一个“隐形”浏览视图。代码可以告诉GA它应该将不可见的网页浏览计为目标完成。

是否有类似的东西，足以说明我的网站触发FB像素？

来源

2013-10-09 dataprointhemaking

回答

13

编辑：我更新了我的代码，因为我以前提到过没有工作。感谢@Flambino指出。

这是我修改后的答案，使用像素而不是脚本来传递转换像素。我参考了How to track a Google Adwords conversion onclick? SO帖子：

<head> 
<script type="text/javascript"> 
function facebookConversionPixel(fb_pixel, fb_value){ 
    var image = new Image(1,1); 
    image.src = "//www.facebook.com/offsite_event.php?id=" + fb_pixel + "&amp;value=" + fb_value + "&amp;currency=USD"; 
} 
</script> 
</head> 

<body> 
<a href="#" onclick="facebookConversionPixel(123456,0.00);">FBCONV</a> 
</body>

来源

2013-10-09 16:07:11 Blexy

+0

谢谢！ 是正确的假设，除去原始像素的这一部分 “” 意味着，即使在装载部分当JavaScript在每个网页浏览加载了Facebook像素，它实际上不会直到onclick代码被点击激活？ – dataprointhemaking

+0

这是正确的。我删除了'

+0

谢谢你清除所有！ – dataprointhemaking

5

只需将整个原始代码移动到您选择的事件中即可。然后只需更改一部分代码。你将不得不做的事是使fb_param全球而不是本地。

下面看到的评论

$('.button').click(function() { 
    window.fb_param = {}; // must be global by adding `window.` 
    fb_param.pixel_id = '123456789'; 
    fb_param.value = '0.00'; 
    fb_param.currency = 'USD'; 
    (function(){ 
     var fpw = document.createElement('script'); fpw.async = true; fpw.src = '//connect.facebook.net/en_US/fp.js'; 
     var ref = document.getElementsByTagName('script')[0]; 
     ref.parentNode.insertBefore(fpw, ref); 
    })(); 
});

来源

2014-02-08 04:18:56 Tallboy

8

从FB文档"How to track in-page events"：安装在底座的代码片段

后，你可以跟踪页面操作，如点击一个按钮，通过通过在HTML DOM元素上注册不同的事件处理程序来为转换像素调用_fbq.push（'track'）。例如：

function trackConversionEvent(val, cny) { 
    var cd = {}; 
    cd.value = val; 
    cd.currency = cny; 
    _fbq.push(['track', '<pixel_id>', cd]); 
} 
<button onClick="trackConversionEvent('10.00','USD');" />

来源

2014-12-24 17:52:34

0

我有类似的问题，我想运行多个添加跟踪像素代码和一些原因，我无法跟踪。我所做的是，在当前页面中，我添加了页脚和JavaScript函数 中的像素代码，以便在我的ajax按钮被提交时调用。

首先参阅Facebook文档页面

https://developers.facebook.com/docs/ads-for-websites/conversion-pixel-code-migration#multi-conv-events

如何追踪多个转换事件

安装在底座的代码片段后，你可以通过多个跟踪同一网页内多次转换_fbq.push（'track'）调用每个转换像素ID。例如：

_fbq.push(['track','<pixel_id1>',{'value':'10.00','currency':'USD'}]); 
_fbq.push(['track','<pixel_id2>']);

如何跟踪页内广告活动

安装在底座的代码段后，您可以跟踪页面操作，如点击一个按钮，通过使_fbq.push （'track'）通过在HTML DOM元素上注册不同的事件处理程序来调用转换像素。例如：

function trackConversionEvent(val, cny) { 
    var cd = {}; 
    cd.value = val; 
    cd.currency = cny; 
_fbq.push(['track', '<pixel_id>', cd]); 
} 
<button onClick="trackConversionEvent('10.00','USD');" />

此外，添加了Facebook像素跟踪代码铬插件，并参考了Facebook像素助手页面：https://developers.facebook.com/docs/ads-for-websites/pixel-troubleshooting

看我下面的解决方案/回答

在当前页面

Facebook的跟踪代码 （函数（）{ VAR _fbq = window._fbq ||（window._fbq = []）; 如果（_fbq.loaded）{ VAR的FBD =使用document.createElement（ '脚本'）！; fbds.async = true; fbds.src ='//connect.facebook.net/en_US/fbds.js'; var s = document.getElementsByTagName（'script'）[0]; s.parentNode.insertBefore（fbds，s）; _fbq.loaded = true; } }）（）; window._fbq = window._fbq || []; window._fbq.push（['track'，'yourid'，{'value'：'1.00'，'currency'：'USD'}]）; 

<!-- Facebook Conversion --> 
    <script>(function() { 
    var _fbq = window._fbq || (window._fbq = []); 
    if (!_fbq.loaded) { 
    var fbds = document.createElement('script'); 
    fbds.async = true; 
    fbds.src = '//connect.facebook.net/en_US/fbds.js'; 
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(fbds, s); 
    _fbq.loaded = true; 
    } 
    })(); 
    window._fbq = window._fbq || []; 
    window._fbq.push(['track', 'yourid', {'value':'1.00','currency':'USD'}]); 
    </script>

和JavaScript代码来调用当AJAX形式提交或点击链接

<script> 
function trackConversionEvent(val, cny) { 
var cd = {}; 
cd.value = val; 
cd.currency = cny; 
_fbq.push(['track', 'yourid1', cd]); 
_fbq.push(['track', 'yourid1', cd]); 

} 
</script>

和呼叫时AJAX称为

jQuery(form).ajaxSubmit({ 

    type:"POST", 

    data: $(form).serialize(), 

    url:"process.php", 

    success: function() { 
    **trackConversionEvent**('1.00','USD'); 
    } 
    ......

来源

2016-02-09 14:20:46

0

Facebook已经更新了他们的像素的功能，所以我创建了我自己的自定义函数来调用，它将动态地将这些参数一起提交给Facebook。

第1步。在每一页上，确保you've initialised your pixel在头页面的元素。

第2步。添加我创建的这个自定义函数（它有点冗长，因为它是第一份草稿，所以我确信有方法可以为您的优势优化它）。

triggerFacebookPixel: function(type, price, product_id, product_name, product_category, num_items) { 
    //See https://developers.facebook.com/docs/ads-for-websites/pixel-events/v2.8#events for documentation 
    //type = "ViewContent"|"AddToCart"|"Search"|"AddToWishlist"|"InitiateCheckout"|"AddPaymentInfo"|"Purchase"|"Lead"|"CompleteRegistration" 
    //product_id = Numeric Product ID. String or Integer accepted for single product events, or an array of integers for multiple products. 
    //price = Decimal/Float number of individual product's price or total price paid in conversion, or the user's status for 'CompleteRegistration' 
    //product_name = Optional. String of individual product's name or string of search query 
    //product_category = Optional. String of product category, hierarchy's accepted. E.g. "Clothing > Shirts > Men's > T-Shirts" 
    //num_items = Optional. Total number of products. 
    var data = { 
     value: typeof(price) == 'string' ? parseFloat(price) : price, 
     currency: 'USD' 
    } 
    switch (type) { 
     case 'Search': 
      data.content_ids = product_id; 
      data.search_string = product_name; 
      if (product_category !== undefined && product_category != '') { 
       data.content_category = product_category; 
      } 
      break; 
     case 'Lead': 
      data.content_name = product_name; 
      data.content_category = product_category; 
      break; 
     case 'CompleteRegistration': 
      data.status = product_id; 
      data.content_name = product_name; 
      break; 
     default: 
      //Product Specific Calls 
      //ViewContent|AddToCart|AddToWishlist|InitiateCheckout|AddPaymentInfo|Purchase 
      if (num_items == 1) { 
       data.content_ids = [typeof(product_id) == 'string' ? parseInt(product_id) : product_id]; 
       data.content_category = product_category; 
       data.content_name = product_name; 
      } else { 
       data.content_ids = product_id; 
      } 
      //"num_items" is only a parameter used in these two types 
      if (type == 'InitiateCheckout' || type == 'Purchase') { 
       data.num_items = num_items 
      } 
      //"content_type" is only a parameter used in these three types 
      if (type == 'Purchase' || type == 'AddToCart' || type == 'ViewContent') { 
       data.content_type = 'product'; 
      } 
      break; 
    } 
    fbq('track', type, data); 
}

第3步。使用适当的参数调用该函数。

为了让您在购买后弹出窗口，如果用户购买1件商品而不是多件商品，则像素会以不同的方式触发。基本上，Facebook接受产品名称和类别的参数（如果它只是一种产品），但如果它是多种产品，则不接受这些参数。

对于下面的例子，这里是购买1件用户的一些样本产品数据：

  • 产品名称：“我的超级真棒T恤”
  • 产品编号：182
  • 产品分类：“服装>衬衫> T恤”
  • 用户支付的总金额（包括运费/手续费&税）：$ 10。84

下面是你会在确认调用该函数：

triggerFacebookPixel('Purchase', 10.84, 182, 'My Super Awesome T-Shirt', 'Clothing > Shirts > T-Shirts', 1);

当用户购买多个项目，像素处理不同的看法，不包括产品名称和类别，只发送他们的ID。因此，让我们假装我们的用户购买了这两个项目：

  • 产品的ID：182和164（衬衫和别的东西）
  • 总额用户支付（包括运费/处理&税）：$ 24.75

这是你如何使用功能：

triggerFacebookPixel('Purchase', 24.75, [182, 164], '', '', 2);

对于其他standard events as defined by Facebook关于产品，您可以使用相同的功能“的Vie wContent“，”AddToCart“，”AddToWishlist“，”InitiateCheckout“和”AddPaymentInfo“。只需将“购买”更改为您通话中的任何关键字。

其他事件不一定与产品相关：“潜在客户”，“搜索”和“完成注册”。你仍然可以使用这个功能来处理这些关键词。

例如：用户搜索“蓝衫”：

triggerFacebookPixel('Search', 0, [], 'blue shirts');

如果你想通过在用户搜索功能的产品类别，你可以传递作为结尾的字符串。我想不出一个用例情景，你可以知道用户正在搜索的是什么类别。除非您在产品出现在搜索结果中并且用户从搜索页​​面点击该产品时使用了该功能。这可能是这个函数的实际用途，但文档不太清楚。如果是这种情况，那么只需将0和空数组更改为从搜索结果页面单击的产品的实际值（分别为价格和产品ID），并将其类别作为字符串添加为最后一个搜索字符串后的参数。

例如：用户提交签署它们备份到你的通讯形式：

triggerFacebookPixel('CompleteRegistration', 0, 'Signed Up', 'Newsletter');

Facebook的文件指出，“CompleteRegistration”应当在完成注册形式使用，例如完成订阅/注册服务。 “已注册”字符串是“状态”参数，“新闻通讯”字符串是“content_name”参数。

示例：用户提交的签署他们为你提供一些服务的30天免费试用的形式（所以他们现在铅），其中服务的名称是“免费试用30天服务”，它是在子类别‘免费试用’类别下的‘我的服务’：

triggerFacebookPixel('Lead', 0, 'Free 30-Day Trial Service', 'My Services > Free Trials');

Facebook的文件指出，‘领导’是当注册完成后，如点击定价，注册试用。我假定服务的名称是参数“content_name”，服务的类别是“content_category”参数。

来源

2017-03-24 14:57:06 Tessa

相关问题

 相关问题