16

我对 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 像素?

4

5 回答 5

15

编辑:我已经更新了我的代码,因为我之前提到的内容不起作用。感谢@Flambino 指出。

这是我使用像素而不是脚本来传递转换像素的修改后的答案。我参考了如何跟踪 Google Adwords 转化 onclick?所以帖子:

<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-09T16:07:11.570 回答
8

来自 FB 文档“如何跟踪页内事件”

安装基本代码片段后,您可以通过在 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-24T17:52:34.503 回答
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-08T04:18:56.340 回答
0

我遇到了类似的问题,我想运行多个添加来跟踪像素代码,并且由于某种原因我无法跟踪。我所做的是,在当前页面中,我在页脚和 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 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');" />

此外,添加 facebook 像素跟踪代码 chrome 插件并参考 facebook 像素帮助页面: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; } })(); 窗口._fbq = 窗口._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');
   }
   ......
于 2016-02-09T14:20:46.730 回答
0

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

第 1 步。在每个页面上,确保已在页面的head元素中初始化像素。

第 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);

对于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 的文档指出,“Lead”是指完成注册,例如点击定价、注册试用。我假设服务的名称是参数“content_name”,服务的类别是“content_category”参数。

于 2017-03-24T14:57:06.537 回答