Facebook像素+ Google标签管理器+ fbq事件

Question

Facebook像素+ Google标签管理器+ fbq事件

javascriptgoogle-tag-managerfacebook-pixel

14

我使用Google Tag Manager来交付Facebook Pixel。

然后，我使用如下代码触发事件。

  <body>
...
        <script>
            fbq('track', 'ViewContent', { 
                content_type: 'product',
                content_ids: ['1234'],
                content_name: 'ABC Leather Sandal',
                content_category: 'Shoes',
                value: 0.50,
                currency: 'USD'
            });
        </script>
    </body>

但是当代码被执行时，我会遇到一个错误，因为Facebook Pixel是异步加载的，而且fbq还不可用。

Uncaught ReferenceError: fbq is not defined

我该怎么办？

- Oleksandr G

4个回答

10

使用标签排序功能。这允许按预定义顺序触发标签，后续标签在执行之前等待前一个标签。

创建一个标签，加载FB init代码。在标签触发选项中选择“每个页面仅一次”（即使多个标签使用它，您也只需要加载一次）。

转到您的Facebook事件标签。在高级设置中查找标记排序选项。将其设置为：

（其中Facebook init是加载FB库的标签，我假设您使用他们的标准引导代码）。启用最后一个复选框，如果您的设置标签失败，它将不会触发。

由于FB引导代码将使用命令队列设置fbq对象，因此即使库仍在下载中，现在也可以将数据推送到fbq；数据将进入命令队列，当库被下载时，调用将被执行。

标签序列确保在您的事件之前设置了fbq对象。如果这是您唯一的FB事件，则可以简单地将加载器粘贴在您的事件代码上方以避免麻烦。

- Eike Pierstorff

感谢您详细的回答。我发现您的回答，因为我也遇到了“fbq未定义”的错误，即使我已经正确地对标签进行了排序。我设置了Facebook基础像素的Setup-tag，但只有INIT部分。我单独触发PageView事件，它也使用Base Pixel作为其设置标签。我想知道，Facebook是否希望在任何其他事件之前也触发了PageView事件，或者像素的INIT部分足以使所有事件正常工作，而不考虑PageView？ - Henrik Söderlund

这并没有真正回答问题。Viru us的解决方案实际上解决了问题，因为OP要求事件代码在实际模板页面上（可能是为了拉取模板变量，而GTM无法完成这一点）。 - Rich S

0

遇到了同样的错误 - 最终发现问题在于顺序。

当通过WP插件在WordPress网站上通过标签管理器使用时，默认情况下像素会在页脚加载，因此在页脚中声明之前使用的fbq变量在正文中无法识别： WordPress选项的Google标签管理器

我尝试了不同的设置，最终放弃了使用插件 - 只需在我的页面构建器（Thrive Architect = TA）的脚本部分中将其插入标题部分即可： TA中的自定义脚本设置现在一切都正常工作了！

- Yosi Ben Zvi

0

处理此类问题的正确方法

您需要检查窗口引用是否存在，而不是其值是否为null！

虽然您不能使用：

if (fbq !== undefined) {
  // browser code
}
// or 
if (window.fbq !== undefined) {
  // browser code
}

因为这会尝试将一个不存在的变量（window）与未定义进行比较，导致强大的“ReferenceError：window未定义”。您仍然可以使用：

if (typeof window !== "undefined") {
  // browser code
}

因为 typeof 不会尝试评估 "window"，它只会尝试获取其类型。

- dipenparmar12

是的，你解决了崩溃问题，但你的分析无法正确初始化，如果你按照这种方法进行，你将会损坏你的报告。在这个问题的背景下，你只是在掩盖问题，而不是解决它。不要使用这段代码。 - vir us

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- vir us · Accepted Answer

我无法让Eike的方法运行，并最终采用以下“不太正规的解决方案”（基本上它只是等待fbq被初始化）：

<script>
    function waitForFbq(callback){
        if(typeof fbq !== 'undefined'){
            callback()
        } else {
            setTimeout(function () {
                waitForFbq(callback)
            }, 100)
        }
    }

    waitForFbq(function () {
        fbq('track', 'Registered');
    })
</script>

也许这对其他人也有帮助