等待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=!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&ev=PageView&noscript=1"
/></noscript>分析一下，fbq('init', ...)似乎会导致添加一个script标记，并将async属性设置为src，并将其设置为//connect.facebook.net/en_US/fbevents.js。
随后，通过一次重定向，对fbq('track', ...)的调用以某种方式导致对图像的HTTP GET。
如何检测所有步骤都已完成，特别是最终图像加载是否完成？
回答 7
Stack Overflow用户
发布于 2017-06-30 06:58:59
我试过这个。给定一个名为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";开始，这是准确的
Stack Overflow用户
发布于 2017-02-01 17:53:21
如果您想在成功完成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秒后再次尝试触发事件，您可以根据自己的应用逻辑自定义事件触发的时间
Stack Overflow用户
发布于 2019-04-02 08:52:29
由于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可以随时更改他们的代码，从而破坏这一点。
https://stackoverflow.com/questions/41755216
复制相似问题
腾讯云开发者
