Fatal编程技术网
  • javascript/
  • Javascript 等待Facebook像素加载

Javascript 等待Facebook像素加载

javascript

Javascript 等待Facebook像素加载,javascript,facebook-pixel,Javascript,Facebook Pixel,我想在我的JavaScript代码中检测到Facebook像素的加载已经完成。这可能吗 以下是Facebook像素跟踪代码供参考： <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

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

以下是Facebook像素跟踪代码供参考：

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


!函数（f，b，e，v，n，t，s）{if（f.fbq）返回；n=f.fbq=function（）{n.callMethod？
n、 callMethod.apply（n，参数）：n.queue.push（参数）}；如果（！f._fbq）f._fbq=n；
n、 push=n；n.load=！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）}（窗口，
文档，'script'，'//connect.facebook.net/en_US/fbevents.js'）；
//在下面插入你的Facebook像素ID。
fbq（'init'，'FB_PIXEL_ID'）；
fbq（“轨迹”、“页面视图”）；
分解它，似乎
fbq（'init'，…）
会导致添加一个
script
标记，并将
async
属性集和
src
设置为
//connect.facebook.net/en_US/fbevents.js

随后，对fbq（'track'，…）的调用以某种方式导致通过一个重定向对图像执行HTTP
GET

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

如果您想在成功完成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>


函数drop\u fb\u pixel（）{
试一试{
//下降FB像素
fbq（'track'、'ViewContent'{
content_id:['12']，
内容类型：“产品”
});
}
捕捉（错误）{
setTimeout（函数（）{drop_fb_pixel（）；}，3000）；
}
}
$（文档）.ready（函数（）{
拖放_fb_像素（）；
});
逻辑非常简单，加载文档后，此脚本将尝试触发FB事件，如果出现错误，则会在3秒后再次尝试触发事件，您可以根据自己的应用程序逻辑自定义事件触发的时间。

love chopra的答案有点不错，但我认为使用
setTimeout（）
当我们谈论网页时，3s延迟并不是最好的解决方案。从我的观点来看，解决方案可能是使用
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);
我试了一下。给定名为
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”时是准确的


参考
既然OP@user2297550说他的最终目标是在事件触发后重定向用户，我将解释如何做到这一点（没有超时或间隔）。以前的一些答案试图检测Facebook pixel
何时完成加载，但这与确定实际事件何时完成并不相同。大概，OP想知道
PageView
事件何时完成。这个解决方案并不适用于每一个用例，但是如果我们没有在页面上发生太多其他事情，它就相当简单了

为了ping他们的服务器并跟踪事件，Facebook的代码创建了一个
newimage（）
，并将其
src
属性设置为类似
https://www.facebook.com/tr/?id=XXXXXX&ev=PageView&{更多参数}
。我通过检查跟踪库并找到这个
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
};


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


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




原始图像=图像；
图像=函数（）{
设oi=新的原始图像（）；
oi.onload=函数（）{
//如果加载的图像确实是Facebook像素
//对于“PageView”事件，重定向
if（this.src.indexOf（'facebook.com/tr/？id=XXXXXX&ev=PageView'）！=-1）
window.location=https://example.com/redirect-here';
};
返回oi；
};
!函数（f，b，e，v，n，t，s）
{if（f.fbq）返回；n=f.fbq=function（）{n.callMethod？
n、 apply（n，参数）：n.queue.push（参数）}；
如果（！f._fbq）f._fbq=n；n.push=n；n.loaded=！0；n.version='2.0'；
n、 队列=[]；t=b.createElement（e）；t.async=！0；
t、 src=v；s=b.getElementsByTagName（e）[0]；
s、 parentNode.insertBefore（t，s）}（窗口，文档，'script'，
'https://connect.facebook.net/en_US/fbevents.js');
fbq（'init'，'XXXXXX'）；
fbq（“轨迹”、“页面视图”）；


当然，您可以跳过Javascript，直接从
块加载图像并添加“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可以随时更改他们的代码，打破这个限制。


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

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

    fbqcheck();

  });
</script>


$（文档）.ready（函数（）{
函数fbqcheck（）{
如果（fbq的类型==‘未定义’）{
设置超时（fbqcheck，5）；
}否则{
警报（“Facebook像素加载”）；
}
}
fbqcheck（）；
});

我知道这是一篇老文章，但是作为Chrome扩展加载到Facebook Pixel Helper怎么样？这会立即告诉您网站上是否有像素加载




所以Kelly Seldens的解决方案看起来很棒，但由于facebook改变了他们的库，所以对我来说不起作用。我的解决方案源自Kelly Seldens，如下所示（适用于facebook 2.9.15）。我为其他正在寻找解决方案的人提供了它，这些解决方案基于加载的facebook像素启动操作

在我的例子中，我让Mautic自己加载fb像素。我需要一种方法来检测何时发生这种情况，这样我就可以触发转换事件（fb-track lead）

我对Kelly代码所做的更改反映了2T

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

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

    fbqcheck();

  });
</script>



(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);
})();