如何在Vue单页应用(SPA)的指定页面添加Facebook Pixel代码

因为Vue SPA是客户端路由切换，不会触发整页重载，无法直接在静态HTML中写死页面专属的Pixel代码，所以采用进入路由时动态插入head标签、离开路由时销毁标签的逻辑实现，以下是两种可行方案：

方案1：路由独享守卫实现（推荐） #

直接在/register路由的配置中添加专属守卫，和业务组件解耦，无需修改页面代码：

// router/index.js 路由配置文件示例，兼容Vue Router 3/4
const routes = [
  // 其余路由配置保持不变
  {
    path: '/register',
    name: 'Register',
    component: () => import('../views/Register.vue'),
    // 进入路由前插入Pixel代码
    beforeEnter: (to, from, next) => {
      // 避免重复插入标签
      if (document.querySelector('#fb-register-pixel')) {
        return next()
      }
      // 1. 插入script脚本
      const fbScript = document.createElement('script')
      fbScript.id = 'fb-register-pixel'
      fbScript.innerHTML = `
!(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', 'test');
fbq('track', 'PageView');
fbq('track', 'CompleteRegistration');
      `
      document.head.appendChild(fbScript)

      // 2. 插入noscript标签
      const fbNoscript = document.createElement('noscript')
      fbNoscript.id = 'fb-register-noscript'
      fbNoscript.innerHTML = `<img height="1" width="1" src="https://www.facebook.com/tr?id=1234456789&ev=PageView&noscript=1" />`
      document.head.appendChild(fbNoscript)
      next()
    },
    // 离开路由时销毁插入的标签，避免污染其他页面
    beforeLeave: (to, from, next) => {
      const fbScript = document.querySelector('#fb-register-pixel')
      const fbNoscript = document.querySelector('#fb-register-noscript')
      fbScript && document.head.removeChild(fbScript)
      fbNoscript && document.head.removeChild(fbNoscript)
      // 可选：清理全局fbq变量，避免其他页面误调用
      delete window.fbq
      delete window._fbq
      next()
    }
  }
]

方案2：页面组件生命周期实现 #

如果不想修改路由配置，也可以直接在Register页面组件的生命周期钩子中实现插入/销毁逻辑：

<!-- Register.vue 页面组件 -->
<!-- Vue2 写法 -->
<script>
export default {
  mounted() {
    // 插入标签的逻辑和方案1中beforeEnter的代码完全一致
  },
  beforeDestroy() {
    // 销毁标签的逻辑和方案1中beforeLeave的代码完全一致
  }
}
</script>

<!-- Vue3 写法 -->
<script setup>
import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
  // 插入标签的逻辑同上
})

onUnmounted(() => {
  // 销毁标签的逻辑同上
})
</script>

注意事项 #

• 请把示例代码中的Pixel ID test、noscript地址中的id=1234456789替换为你自己的真实Facebook Pixel ID
• 如果项目配置了内容安全策略（CSP），需要将Facebook相关域名加入允许列表，避免脚本被拦截
• 如果需要给其他页面加不同的Pixel，只要给插入的标签设置不同的id做区分即可，不会互相冲突

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