等待Facebook Pixel Load

Question

等待Facebook Pixel Load

我想在我的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>

Run Code Online (Sandbox Code Playgroud)

将其分解,似乎fbq('init', ...)会导致script使用async属性集添加标记并将其src设置为//connect.facebook.net/en_US/fbevents.js.

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

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

Answer 1

Kel*_*den 6

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

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

Run Code Online (Sandbox Code Playgroud)

myCallback一切准备就绪后将被调用。截至fbq.version="2.7.17";

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

我得到“fbq.on 不是一个函数”。FBQ 版本 2.9.30 (4认同)
@naviram谢谢。我通过最小化并阅读其来源找到了它。不幸的是，这些东西不在他们的文档中。 (3认同)
听所有-[Kelly Selden]（/sf/answers/3138534801/）摇滚。这是准确的答案，并且是整个网络中唯一的答案，我找不到有关此事件的任何参考/文档，只有像素的请求中返回了JS的脚本文件。如果有参考文献，请分享。 (2认同)

Answer 2

小智 5

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

Run Code Online (Sandbox Code Playgroud)

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

看来您的代码没有演示加载 facebook Pixel 后触发代码的任何方法？超时根本不是一个可靠的方法，因为网络可能很慢。 (3认同)
明白了。那么您确实需要更改问题的标题，因为它给人的印象是您只是想知道 Pixel 何时加载。爱的回答就是这样。但您确实想知道各个跟踪事件何时完成，对吗？ (3认同)

Answer 3

Dan*_*Dan 5

由于 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
};

Run Code Online (Sandbox Code Playgroud)

我们可以通过使用重定向代码填充默认回调来挂钩该图像加载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;
};

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

当然，您可以跳过 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>

Run Code Online (Sandbox Code Playgroud)

但我猜想，简单的图像跟踪会降低 Facebook 识别用户的能力。

此策略可能适用于更通用的用例，在这些用例中，您想要检测任意事件何时发送到 Facebook。onload但为普通页面上的每个图像填充回调可能是不明智的。还要知道 Facebook 可以随时更改他们的代码，从而打破这一点。

没错，他们首先加载 JS。但该脚本只是一个用于稍后在页面上进行跟踪的库。我查看了 Facebook 的实际代码，发现了一个名为“sendGET”的函数，用于发送实际的事件请求。它创建了“new Image()”并设置了它的“src”，这给了我挂钩“Image”对象的想法。我针对您的用例对此进行了测试，并且它有效。跟踪事件始终被发送，然后发生重定向。我将把 `sendGet` 定义添加到我的 OP 中，这样我们就可以看到它是如何工作的。 (2认同)

归档时间：	9 年，1 月前
查看次数：	5449 次
最近记录：	6 年，9 月前