Vue 2.6集成Facebook Pixel动态加载触发ERR_BLOCKED_BY_CLIENT如何解决

你遇到的Failed to load resource: net::ERR_BLOCKED_BY_CLIENT报错本质是客户端安装的广告拦截、隐私防护类插件拦截了Facebook相关资源请求。用JS动态注入Pixel代码的方式，是广告拦截规则的重点匹配特征，命中概率远高于静态写在HTML模板里的代码。

步骤1：配置多环境变量 #

在项目对应的环境变量文件（.env.staging、.env.production等）中添加Pixel相关配置，注意Vue 2.6环境变量必须加VUE_APP_前缀才能被webpack识别注入：

# 对应环境的像素ID
VUE_APP_FB_PIXEL_ID=1234567890
# 域名验证用的meta内容，没有的话可以省略对应的meta标签
VUE_APP_FB_DOMAIN_VERIFY_CODE=abcdefghijklmn

步骤2：修改HTML模板静态注入代码 #

直接在public/index.html（或你自定义的HTML模板）的head标签内写入完整的Pixel代码，用ejs模板语法读取环境变量替换对应参数：

<!-- Facebook Pixel Code -->
<% if (process.env.VUE_APP_FB_DOMAIN_VERIFY_CODE) { %>
<meta name="facebook-domain-verification" content="<%= process.env.VUE_APP_FB_DOMAIN_VERIFY_CODE %>" />
<% } %>
<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', '<%= process.env.VUE_APP_FB_PIXEL_ID %>');
  fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
  src="https://www.facebook.com/tr?id=<%= process.env.VUE_APP_FB_PIXEL_ID %>&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

步骤3：按环境打包即可 #

不同环境执行打包命令时，html-webpack-plugin会自动将对应环境的变量值填充到模板中，最终输出的HTML文件包含固定参数的静态Pixel代码，不需要JS动态注入，可大幅降低被拦截的概率。

注意事项 #

• 完全规避ERR_BLOCKED_BY_CLIENT报错不可能，该报错是用户客户端主动拦截行为导致的，只要主流用户场景下Pixel可正常上报数据即可
• 不要在业务代码中用JS动态创建、插入Pixel的script标签或meta标签，这类操作会大幅提升拦截命中概率
• 本地调试可以用Facebook Pixel Helper插件校验Pixel是否正常初始化、上报事件

内容的提问来源于stack exchange，提问作者efirat