Facebook Pixel + Google Tag Manager + fbq活动

Ale*_*r G 4 javascript google-tag-manager facebook-pixel

我正在使用Google跟踪代码管理器来提供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>
Run Code Online (Sandbox Code Playgroud)

但是当代码执行时我得到了一个错误,因为Facebook Pixel是异步加载的,而fbq还没有.

未捕获的ReferenceError:未定义fbq

我该怎么办?

vir*_* us 12

无法获得 Eike 的工作方法,最终得到了以下“肮脏的解决方法”(基本上它只是等到 fbq 被初始化):

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

    waitForFbq(function () {
        fbq('track', 'Registered');
    })
</script>
Run Code Online (Sandbox Code Playgroud)

也许它也会帮助某人


Eik*_*rff 6

使用标签排序功能.这允许以预定义的顺序触发标记,其中后续标记在执行之前等待先前的标记.

创建一个加载FB init代码的标记.在标签触发选项中选择"每页一次"(您只需加载一次,即使它被多个标签使用).

转到您的Facebook活动代码.在高级设置中查找标签排序选项.将其设置为:

在此输入图像描述

(其中Facebook init是你加载FB库的标签,我认为你使用他们的标准引导程序代码).启用最后一个复选框后,如果您的安装标记失败,则不会触发.

由于FB引导程序代码将使用命令队列设置fbq对象,因此您现在可以将数据推送到fbq; 即使库仍在下载,数据也将进入命令队列,并且在下载库时将执行调用.

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