javascript Facebook 像素 + 谷歌标签管理器 + fbq 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46972912/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Facebook Pixel + Google Tag Manager + fbq events
提问by Alexander G
I'm using Google Tag Manager to deliver Facebook Pixel.
我正在使用 Google 标签管理器来提供 Facebook Pixel。
Then, I fire events using code like this
然后，我使用这样的代码触发事件
<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>
But when the code is executed I got an error since Facebook Pixel is loaded asynchronously and fbq is not available yet.
但是当代码执行时，我收到一个错误，因为 Facebook Pixel 是异步加载的，而且 fbq 还不可用。
Uncaught ReferenceError: fbq is not defined
未捕获的 ReferenceError：未定义 fbq
What should I do?
我该怎么办？
回答by Eike Pierstorff
Use the tag sequencing feature. This allows to fire tags in a predefined order, where the subsequent tags wait for the previous ones before they are executed.
使用标签排序功能。这允许以预定义的顺序触发标签，其中后续标签在执行之前等待前一个标签。
Create a tag that loads the FB init code. Select "Once per page" in the tag firing options (you need to load this only once, even if it used by multiple tags).
创建一个加载 FB 初始化代码的标签。在代码触发选项中选择“每页一次”（您只需加载一次，即使它被多个代码使用）。
Go to your Facebook event tag. In the advanced settings look for the tag sequencing options. Set it to:
转到您的 Facebook 活动标签。在高级设置中查找标签排序选项。将其设置为：
(where Facebook init is your tag that loads the FB library, I am asumming that you use their standard bootstrap code). With the last checkbox enabled this will not fire if your setup tag has failed.
（其中 Facebook init 是您加载 FB 库的标签，我假设您使用他们的标准引导程序代码）。启用最后一个复选框后，如果您的设置标签失败，则不会触发。
Since the FB bootstrap code will set up a fbq object with a command queue you can now push data to fbq; even if the library is still downloading the data will enter the command queue and the calls will be executed when the library has been downloaded.
由于 FB 引导程序代码将使用命令队列设置 fbq 对象，因此您现在可以将数据推送到 fbq；即使库仍在下载，数据也会进入命令队列，并在库下载后执行调用。
The tag sequence makes sure that the fbq object is set up before your event. If this is your only FB event you can save yourself the trouble and simply paste the loader above your event code.
标签序列确保在您的事件之前设置 fbq 对象。如果这是您唯一的 FB 事件，您可以省去麻烦，只需将加载程序粘贴到事件代码上方即可。
回答by vir us
Couldn't get Eike's approach to work and ended up with the below "dirty workaround" (basically it just waits till the fbq is inited):
无法获得 Eike 的工作方法，最终得到了以下“肮脏的解决方法”（基本上它只是等到 fbq 被初始化）：
<script>
function waitForFbq(callback){
if(typeof fbq !== 'undefined'){
callback()
} else {
setTimeout(function () {
waitForFbq(callback)
}, 100)
}
}
waitForFbq(function () {
fbq('track', 'Registered');
})
</script>
Maybe it will help someone as well
也许它也会帮助某人
回答by Rob Pod
Solution of Vir usfrom Jul 5 at 12:48 works for me like a charm! Thanks :-)
Vir us从 7 月 5 日 12:48 开始的解决方案对我来说就像一个魅力！谢谢 ：-）
EDIT: In my case, I needed to implement something similar on Wordpress site, where GTM is loaded in the header with FB Pixel. So my code placed right after opening tag looks like this:
编辑：就我而言，我需要在 Wordpress 站点上实现类似的功能，其中 GTM 加载到带有 FB Pixel 的标头中。所以我的代码在打开后立即放置标签看起来像这样：
<script>
function waitForFbq(callback){
if(typeof fbq !== 'undefined'){
callback()
} else {
setTimeout(function () {
waitForFbq(callback)
}, 100)
}
};
waitForFbq(function() {
fbq('track', 'ViewContent', {content_name: '<?php the_title(); ?>'});
});
</script>
回答by Yosi Ben Zvi
Had the same error - in the end it was all about sequencing.
有同样的错误 - 最后都是关于测序。
When used through tag manager on a wordpress site through the WP plugin, the pixel was loaded in the footer by default, so the fbq variable used before being declared in the footer, was not recognised in the body: Google Tag Manager for WordPress options
当通过 WP 插件在 wordpress 站点上通过标签管理器使用时，像素默认加载在页脚中，因此在页脚中声明之前使用的 fbq 变量在正文中无法识别： Google Tag Manager for WordPress options
I tried different settings, and in the end gave up using the plugin - simply inserted it in the header section using the script section of my page builder (Thrive Architect = TA): Custom script setting in TAand it all works fine now!
我尝试了不同的设置，最后放弃了使用插件 - 只需使用我的页面构建器的脚本部分（Thrive Architect = TA）将其插入标题部分：TA中的 自定义脚本设置现在一切正常！
