加载Facebook像素异步 [英] Loading Facebook pixel async

问题描述

我正在加载Facebook像素并收到错误消息，因为调用时未加载脚本.看起来像这样:

I'm loading the Facebook pixel and getting an error because the script isn't loaded when the call is made. This is what it looks like:

function Load3rdPartyScripts() {

    (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', undefined, undefined, undefined);

    fbq('init', 'XXXXXXXXXXXXX'); //problem here
    fbq('track', 'PageView');

}

问题是代码运行时未启动fbq.现在我知道我可以将问题代码包装在 setInterval 中，并继续检查直到外部脚本完全加载，但我想知道是否有更好的方法可以做到这一点.

Problem is that fbq isn't initiated when the code runs. Now I know I could wrap the problem code inside a setInterval and keep checking until the external script is fully loaded but I'm wondering if there's a better way to do it.

推荐答案

我试图重现此问题，但徒劳.您的代码可以完美运行.将 fbq 同步添加到( window )(因此无需 timeout )到 window ，它将正常调用.检查一下自己:

I tried to reproduce this problem but in vain. Your code works perfectly. fbq is appended syncronously (So no need to timeout) to window and will be called normally. Check yourself:

(function Load3rdPartyScripts() {

    (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', undefined, undefined, undefined);

    fbq('init', 'XXXXXXXXXXXXX'); // No problem here!
    fbq('track', 'PageView');

})();

有一些可能导致您出错的潜在原因:

There are some potential reasons that may produce your error:

1. 在浏览器外部运行脚本，一个破坏了窗口变量的环境.

1. Running the script outside the browser, An env that ruined the window variable.

在浏览器上运行代码但具有冻结的 window ( Object.freeze(window))会导致 fbq 为未定义

Running code on browser but with a freezed window (Object.freeze(window)) causes that fbq will be undefined

Object.seal(window)也是如此，例如 freeze().这将防止将新属性添加到 window

So also Object.seal(window) like freeze(). It will prevent new properties from being added to window

创建本地作用域命名 window 变量将导致 fbq 未定义

Creating a local scope named window variable will cause fbq to be undefined

function Load3rdPartyScripts() {
    let window = {};  // Notice!
    (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', undefined, undefined, undefined);

    fbq('init', 'XXXXXXXXXXXXX'); //problem here
    fbq('track', 'PageView');

}
Load3rdPartyScripts();

这篇关于加载Facebook像素异步的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！