解雇 Facebook 转化像素

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

5个回答

15

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

这是我修改后的答案,使用像素而不是脚本来传递转化像素。我参考了如何在点击时跟踪Google Adwords转化?的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>

假设删除原始像素的此部分'<noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/offsite_event.php?id=XXXXXXXXXX&value=0&currency=USD" /></noscript>'是否正确,这意味着即使在加载<head>部分时每个页面视图都加载了Facebook像素javascript,它也不会被触发,直到通过单击激活onclick代码? - dataprointhemaking
没错。我删除了<noscript><img height="1" width="1" alt="" style="display:none" src="facebook.com/…; /></noscript>,因为它是为那些关闭JavaScript的访问者提供备用方案的。在我们的情况下,如果您的访问者关闭了js,这个标签就不会触发。然而,将其包含在一个函数中只会使其失去作用。 - Blexy
据我所知,这样做行不通。fb_params是一个局部变量(与原始代码不同,那里是全局变量)。由于它是局部的,插入的脚本将无法访问它,也无法读取pixel_id。这只会获取一个无法执行任何操作的脚本,因为没有ID可以读取。 - Flambino
@Flambino 谢谢你指出这个问题。我仍在学习中,但是你说的很有道理。我已经更新了我的答案。 - Blexy
好的,看起来更好了(我稍微编辑了一下)。它直接ping offsite_event脚本,而不是获取一些JS,然后ping该脚本,因此开销较小。在将这些值用于URL之前,您可能需要对其进行一些encodeURIComponent()处理,但在这种情况下应该没有必要。 - Flambino
显示剩余2条评论

8
从 Facebook 文档 "如何跟踪页面内事件" 中得知:
安装基础代码片段后,您可以通过在 HTML DOM 元素上注册不同的事件处理程序来进行 in-page 操作的跟踪(例如按钮点击),然后通过 _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');" />

5

只需将整个原始代码移动到您选择的事件中。然后只需更改代码的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);
    })();
});

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') 调用来跟踪页面内操作,例如按钮点击。例如:
```javascript document.getElementById('button').addEventListener('click', function() { fbq('track', 'AddToCart'); }); ```
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; } })(); 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');
   }
   ......

0

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件商品”的一些示例产品数据:

  • 产品名称:“我的超级棒T恤”
  • 产品ID: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”。只需在调用中更改“Purchase”为这些关键字中的任何一个即可。

其他事件并不一定与产品相关:“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”参数。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接