Question

Facebook Pixel + Google Tag Manager + fbq 事件

2017-10-27

27305

javascript google-tag-manager facebook-pixel

我正在使用 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

我该怎么办？

Answer 1

无法让 Eike 的方法发挥作用，最终采用以下“肮脏的解决方法”（基本上只是等到 fbq 初始化）：

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

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

也许它也会帮助某些人

Answer 2

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

创建一个加载 FB 初始化代码的标签。在标签触发选项中选择“每页一次”（即使多个标签使用它，也只需加载一次）。

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

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

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

标记序列确保在事件之前设置 fbq 对象。如果这是您唯一的 FB 事件，您可以省去麻烦，只需将加载程序粘贴到事件代码上方即可。

Answer 3

遇到了同样的错误 - 最终一切都与排序有关。

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

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