Question

我想在我的JavaScript代码中检测到Facebook像素的负载已经完成。这可能吗？

此处参考的是Facebook Pixel Tracking代码：

<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','//connect.facebook.net/en_US/fbevents.js');
// Insert Your Facebook Pixel ID below. 
fbq('init', 'FB_PIXEL_ID');
fbq('track', 'PageView');
</script>
<!-- Insert Your Facebook Pixel ID below. --> 
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=FB_PIXEL_ID&amp;ev=PageView&amp;noscript=1"
/></noscript>

将其细分，似乎fbq('init', ...)会导致script标记添加async属性集并且src设置为//connect.facebook.net/en_US/fbevents.js。< / p>

随后调用fbq('track', ...)以某种方式通过一次重定向导致HTTP GET到图像。

如何检测所有步骤是否完整，尤其是最终图像加载完成？

Answer 1

我抓住了这个。给定名为myCallback的回调函数和名为myId的私有ID，请使用以下代码：

  (function wait() {
    // check for the generic script
    // easiest check to prevent race condition
    if (fbq.version > '2.0') {
      // now check for the custom script
      // `fbq.on` is now ready (`fbq.once` would be better but has a bug)
     fbq.on('configLoaded', function (name) {
        if (name === myId) {
          myCallback();
        }
      });
    } else {
      setTimeout(wait, 10);
    }
  })();

一切准备就绪后，将调用

myCallback。从fbq.version="2.7.17";

开始，这是准确的

参考https://github.com/poteto/ember-metrics/pull/151

Answer 2

如果要在成功完成FB像素加载后触发特定的FB事件，可以使用下面的代码，这里是代码：

 <script>
        function drop_fb_pixel() {
            try {
                //Drop FB Pixel
                fbq('track', 'ViewContent', {
                    content_ids: ['12'],
                    content_type: 'product' 
                });
            }
            catch (err) {
                setTimeout(function () { drop_fb_pixel(); }, 3000);

            }
        }
        $(document).ready(function () {
            drop_fb_pixel();
        });


    </script>

逻辑非常简单，文档加载后此脚本将尝试触发FB事件，如果出现错误，则会在3秒后再次尝试触发事件，您可以根据自己的应用程序逻辑自定义事件触发时间

Answer 3

由于OP @ user2297550表示他的最终目标是在事件触发后重定向用户，因此我将说明如何做到（没有超时或间隔）。先前的一些答案试图检测Facebook像素<script>何时完成加载，但这与确定何时触发实际事件不同。大概是OP想要知道PageView事件何时完成。对于每个用例来说，这种解决方案都不是一件令人惊奇的事情，但是如果我们在页面上没有其他事情发生的话，这很简单。

为了ping服务器并跟踪事件，Facebook的代码创建了new Image()并将其src属性设置为https://www.facebook.com/tr/?id=XXXXXX&ev=PageView&{more parameters}之类。我通过检查跟踪库并找到此sendGET函数来发现这一点：

this.sendGET = function(b, c, d) {
    b.replaceEntry("rqm", "GET");
    var f = b.toQueryString();
    f = i(c, d) + "?" + f;
    if (f.length < 2048) {
        var g = new Image();
        if (d != null) {
            var h = a.getShouldProxy();
            g.onerror = function() {
                a.setShouldProxy(!0), h || e.sendGET(b, c, d)
            }
        }
        g.src = f;
        return !0
    }
    return !1
};

我们可以通过使用我们的重定向代码填充默认的Image.onload回调来吸引该图像负载。结果是这样的，可以将其放置在标题中普通Facebook像素代码的上方：

OriginalImage = Image;
Image = function(){
  let oi = new OriginalImage();
  oi.onload = function() {
    // if the image that loaded was indeed a Facebook pixel
    // for a "PageView" event, redirect
    if( this.src.indexOf( 'facebook.com/tr/?id=XXXXXX&ev=PageView' ) != -1 )
      window.location = 'https://example.com/redirect-here';
  };
  return oi;
};

因此，完整的“绘制用户并重定向”页面可能如下所示：

<html>
<head>
<!-- Facebook Pixel Code -->
<script>
  OriginalImage = Image;
  Image = function(){
    let oi = new OriginalImage();
    oi.onload = function() {
      // if the image that loaded was indeed a Facebook pixel
      // for a "PageView" event, redirect
      if( this.src.indexOf( 'facebook.com/tr/?id=XXXXXX&ev=PageView' ) != -1 )
        window.location = 'https://example.com/redirect-here';
    };
    return oi;
  };

  !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', 'XXXXXX');
  fbq('track', 'PageView');
</script>
<noscript>
  <img height="1" width="1" style="display:none" 
       src="https://www.facebook.com/tr?id=XXXXXX&ev=PageView&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->
</head>
<body></body>
</html>

当然，您可以跳过Javascript，从字面上只是从该<noscript>块加载图像并添加一个'onload'属性，如下所示：

<html>
<head>
<!-- Facebook Pixel Code -->
<img height="1" width="1" style="display:none" 
       src="https://www.facebook.com/tr?id=XXXXXX&ev=PageView&noscript=1"
       onload="window.location = 'https://example.com/redirect-here';"/>
<!-- End Facebook Pixel Code -->
</head>
<body></body>
</html>

但是我想普通图像跟踪会降低Facebook识别用户的能力。

此策略可能适用于您想要检测何时将任意事件发送到Facebook的更通用的用例。但是，对于正常页面上的每个图像，都填充onload回调是不明智的。还知道Facebook可以随时更改其代码，从而破坏了这一点。

Answer 4

因此Kelly Seldens解决方案看起来不错，但由于Facebook更改了其库而对我不起作用。我的解决方案源自Kelly Seldens，其解决方法如下（适用于facebook 2.9.15）。我将其提供给其他人，这些人正在寻找解决方案以基于加载的Facebook像素触发动作。

就我而言，我有Mautic自己加载fb像素。我需要一种方法来检测何时发生这种情况，以便触发转换事件（fb-跟踪线索）。

我对凯利代码的更改反映了两点：

首先，我在条件检查中添加了是否定义了fbq。在执行此操作之前，我收到每次执行超时都未定义fbq的控制台错误。

第二，我删除了fbq.on语句很简单，因为在Mautic加载的像素的2.9.15版本中不再存在该语句。

我最终得到的最终代码是：

(function wait() {
    //first check if the fbq object is defined, then check the version (probably not needed but for good measure

    if ((typeof fbq !== 'undefined') && (fbq.version > '2.9')) {
        //fire off the call back / tracking event
        myCallBack(); //fbq('track', 'Lead');       
    } 
else 
  setTimeout(wait, 10);
})();

Answer 5

@ love-chopra的答案有点好，但我认为使用setTimeout() 3s延迟并不是我们谈论网页时的最佳解决方案。从我的POV中，解决方案可以是setInterval()，以便不断检查它，直到fbevents.js未加载。

  var fbLoaded = false;
  var tryFB = null;

  function drop_fb_pixel() {
    fbLoaded = true;
    try {
      fbq('track', 'ViewContent', {
        content_ids: ['12'],
        content_type: 'product' 
      });
    } catch (err) {
      fbLoaded = false;
    }

    if (fbLoaded) {
      clearInterval(tryFB);
    }
  }

  tryFB = setInterval(function () { 
    drop_fb_pixel();
  }, 100);

Answer 6

<script>
  $(document).ready(function () {

    function fbqcheck() {
      if(typeof fbq === 'undefined') {
        setTimeout(fbqcheck, 5);
      } else {
        alert('Facebook pixel loaded');
      }
    }

    fbqcheck();

  });
</script>

Answer 7

我知道这是一篇旧文章，但是如何将Chrome浏览器扩展程序加载到Facebook Pixel Helper中呢？这会立即告诉您网站上是否有像素加载。

enter image description here

等待Facebook Pixel Load

7 个答案: