Nuxt.js 2如何在页面加载及路由切换时调用Facebook追踪逻辑

你的核心问题是router.afterEach仅在路由切换时触发，首次打开网站（无路由切换行为）时不会执行，导致fetch请求和部分追踪逻辑缺失。以下是两种可行的解决方案：

方案一：修改插件代码，补充首次加载逻辑 #

将追踪逻辑封装为独立函数，既保留路由切换监听，又在插件初始化时手动执行一次，覆盖首次加载场景：

export default async ({ app }) => {
  // 封装通用的页面追踪逻辑
  const trackPageView = async (route) => {
    const eventId = Math.floor(Math.random() * 100000).toString()
    
    // 调用Conversion API接口
    try {
      await fetch('/api/event-handle', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          data: [{/* 替换为你的实际追踪数据 */}],
        }),
      })
    } catch (err) {
      console.error('Facebook Conversion API 请求失败:', err)
    }

    // 执行客户端Facebook Pixel追踪
    app.$fb.track('ViewContent', {}, eventId)
  }

  // 监听路由切换事件
  app.router.afterEach(async (to) => {
    await trackPageView(to)
  })

  // 首次加载页面时手动触发一次追踪
  if (process.client) {
    await trackPageView(app.router.currentRoute)
  }
}

方案二：使用全局中间件实现 #

如果更倾向于用中间件统一管理，可创建客户端专属中间件：

1. 在middleware目录下新建facebook-track.js：

export default async ({ app }) => {
  if (process.client) {
    const eventId = Math.floor(Math.random() * 100000).toString()
    
    try {
      await fetch('/api/event-handle', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          data: [{/* 替换为你的实际追踪数据 */}],
        }),
      })
    } catch (err) {
      console.error('Conversion API 请求失败:', err)
    }

    app.$fb.track('ViewContent', {}, eventId)
  }
}

2. 在nuxt.config.js中配置全局中间件：

router: {
  middleware: ['facebook-track']
}

关键说明 #

• router.afterEach仅在路由发生切换动作时触发，首次打开网站无切换行为，因此需要手动补充初始化调用。
• 两种方案均通过process.client确保逻辑仅在客户端执行，避免服务端渲染时出现错误。
• 增加try/catch包裹fetch请求，防止接口失败导致$fb.track无法执行。

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