Question

我仍然是Javascript的新手，但我想知道在不实际加载“确认”/“谢谢”页面的情况下触发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像素？

Answer 1

编辑：我已经更新了我的代码，因为我之前提到过的代码不起作用。感谢@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>

Answer 2

来自FB docs "How to track in-page events"：

安装基本代码段后，您可以通过在HTML上注册不同的事件处理程序，对转换像素进行_fbq.push（'track'）调用来跟踪页内操作，例如点击按钮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');" />

Answer 3

只需将原始代码移动到您选择的事件中即可。然后只需更改1部分代码即可。您需要做的是使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);
    })();
});

Answer 4

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

首先参考Facebook文档页面

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

如何跟踪多个转化事件

安装基本代码段后，您可以通过为每个转换像素ID进行多次_fbq.push（'track'）调用来跟踪同一网页中的多个转化。例如：

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

如何跟踪页内活动

安装基本代码段后，您可以通过在HTML上注册不同的事件处理程序，对转换像素进行_fbq.push（'track'）调用来跟踪页内操作，例如点击按钮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像素跟踪代码chrome addon并参考facebook pixel helper页面：https://developers.facebook.com/docs/ads-for-websites/pixel-troubleshooting

请参阅下面的解决方案/答案

Facebook跟踪当前页面中的代码（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'}]）;

  <!-- 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>

当ajax表单提交或按钮单击时调用的javascript代码

 <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');
   }
   ......

Answer 5

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

步骤1.在每个页面上，确保页面的 head 元素中的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项的一些示例产品数据：

产品名称：“My Super Awesome T-Shirt”
产品编号：182
产品类别：“服装＆gt;衬衫＆gt; T恤”
用户支付的总金额（包括运费/手续费和税金）：10.84美元

这是你在确认函上打电话的功能：

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

当用户购买多件商品时，该像素会以不同方式处理，不包括产品名称和类别，只发送其ID。因此，让我们假装用户购买了这两项：

产品编号：182和164（衬衫及其他东西）
用户支付的总金额（包括运费/手续费和税金）：$ 24.75

这是您使用该功能的方式：

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

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

其他事件不一定与产品有关：“Lead”，“Search”和“Complete Registration”。您仍然可以将此功能用于这样的关键字。

示例：用户搜索代表“蓝色衬衫”：

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

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

示例：用户提交了一份表格，将其签名为您的简报：

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

Facebook的文件指出，在完成注册表格时应使用“CompleteRegistration”，例如：完整订阅/注册服务。 “Signed Up”字符串是“status”参数，“Newsletter”字符串是“content_name”参数。

示例：用户提交了一份表格，表明他们已为您提供的某项服务免费试用30天（因此他们现在是主管），其中服务名称为“免费” 30天试用服务“并且属于”我的服务“类别下的”免费试用“子类别：

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

Facebook的文档指出“领导”是指注册完成时，例如点击定价，注册试用。我假设服务的名称是参数“content_name”，服务的类别是“content_category”参数。

解雇Facebook转换像素

5 个答案: