如何在Vue3中添加用于页面跟踪的外部JS脚本？

针对感谢页面的跟踪需求，下面是几种实用的实现方式，按需选择即可：

1. 仅在感谢页面按需加载脚本 #

如果跟踪脚本只需要在感谢页面生效，推荐这种方式，避免不必要的全局资源加载：

在感谢页面的组件中，利用Vue的onMounted钩子动态创建脚本标签：

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  const trackScript = document.createElement('script')
  trackScript.src = '你的第三方跟踪脚本URL'
  trackScript.async = true // 异步加载不阻塞页面渲染

  // 脚本加载完成后执行跟踪初始化
  trackScript.onload = () => {
    // 调用第三方提供的跟踪方法，比如上报页面访问
    window.trackPage('thank-you-page')
  }

  document.body.appendChild(trackScript)
})
</script>

2. 全局加载脚本，仅在感谢页面触发跟踪 #

如果第三方脚本需要全局可用（比如跨页面的用户标识），可以先在public/index.html中引入脚本，再在感谢页面触发跟踪逻辑：

第一步：在index.html中添加脚本 #

<!-- public/index.html -->
<body>
  <div id="app"></div>
  <!-- 全局引入跟踪脚本 -->
  <script src="你的第三方跟踪脚本URL" async></script>
</body>

第二步：在感谢页面组件中触发跟踪 #

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  // 确保脚本已加载完成，避免调用未定义的方法
  if (window.thirdPartyTracker) {
    window.thirdPartyTracker.track({
      page: 'thank-you',
      event: 'page_view'
    })
  }
})
</script>

3. 通过Vue Router导航守卫触发 #

如果感谢页面是独立路由，可以用路由守卫控制脚本加载和跟踪触发，适合路由层面的统一管理：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import ThankYouView from '../views/ThankYouView.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/thank-you',
      name: 'ThankYou',
      component: ThankYouView,
      beforeEnter: (to, from, next) => {
        // 检查脚本是否已加载，防止重复加载
        const existingScript = document.querySelector('script[src="你的第三方跟踪脚本URL"]')
        if (!existingScript) {
          const trackScript = document.createElement('script')
          trackScript.src = '你的第三方跟踪脚本URL'
          trackScript.async = true
          trackScript.onload = () => {
            window.trackThankYouEvent()
            next()
          }
          document.body.appendChild(trackScript)
        } else {
          window.trackThankYouEvent()
          next()
        }
      }
    }
  ]
})

export default router

注意事项 #

• 始终确保在调用第三方跟踪方法前，脚本已经加载完成，可通过onload回调或检查全局变量存在性来避免报错；
• 若涉及用户隐私合规（如GDPR），需在用户同意隐私政策后再加载跟踪脚本；
• 部分第三方跟踪工具提供了Vue插件，可优先考虑官方集成方案，更符合Vue生态。

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