Facebook Pixel在Vue 2.6上与环境和自定义索引模板集成
Facebook Pixel在Vue 2.6上与环境和自定义索引模板集成
提问于 2021-09-23 09:12:49
当您动态添加meta标签或脚本时，FB Pixel通常会被阻止。如果你有不同的像素账户用于你的测试和生产环境，你需要添加meta标签和脚本，动态地从env文件中获取id和内容。结果是
Failed to load resource: net::ERR_BLOCKED_BY_CLIENT如何成功实现run FB像素？
Stack Overflow用户
发布于 2021-09-23 09:12:49
要实现这一点，一种解决方案是您需要为不同的环境使用不同的index.html模板。默认情况下，vue提示使用public/index.html文件构建应用程序。但我们可以使用vue.config.js更改它，如下所示。
module.exports = {
pluginOptions: {
i18n: {
locale: "en",
fallbackLocale: "en",
localeDir: "locales",
enableInSFC: false
}
},
pages: {
index: {
entry: "src/main.js",
template: process.env.VUE_APP_INDEX_TEMPLATE,
filename: "index.html"
}
},
transpileDependencies: ["vuetify"]
};正如您在模板上看到的，我们使用的是环境变量。
我们需要将这个变量添加到所有的env文件中，在我的例子中我使用
.env.staging
.env.development
.env.production按顺序排列钥匙
VUE_APP_INDEX_TEMPLATE=public/index_staging.html
VUE_APP_INDEX_TEMPLATE=public/index_development.html
VUE_APP_INDEX_TEMPLATE=public/index.html我们需要添加FB Pixel元标记和脚本文件到模板中，根据它自己的像素帐户凭证静态地在head标记中。
<head>
...
<!-- Facebook Pixel Code -->
<meta
name="facebook-domain-verification"
content="FB_DOMAIN_VERIFICATION_CODE_HERE_STATICALLY"
/>
<script>
!(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"
);
fbq("init", "FB_PIXEL_ID_HERE_STATICALLY");
fbq("track", "PageView");
</script>
<noscript
><img
height="1"
width="1"
style="display:none"
src="https://www.facebook.com/tr?id=FB_PIXEL_ID_HERE_STATICALLY&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
</head>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69297190
复制相关文章
相似问题
腾讯云开发者
