各框架最终集成代码

Astro MPA

<script>
  import { createAnalytics } from '@qunqa/analytics'

  createAnalytics({
    url: import.meta.env.PUBLIC_ANALYTICS_URL,
    dev: import.meta.env.DEV,
  }).mount()
</script>

Astro View Transitions

<script>
  import { createAnalytics } from '@qunqa/analytics'

  createAnalytics({
    url: import.meta.env.PUBLIC_ANALYTICS_URL,
    dev: import.meta.env.DEV,
  }).mount({
    subscribe: (cb) => {
      document.addEventListener('astro:page-load', cb)
      return () => document.removeEventListener('astro:page-load', cb)
    }
  })
</script>

Vite Vanilla SPA

// src/main.ts
import { createAnalytics } from '@qunqa/analytics'

const analytics = createAnalytics({
  url: import.meta.env.VITE_ANALYTICS_URL,
  dev: import.meta.env.DEV,
})

analytics.mount({
  subscribe: analytics.onRouteChange,
  initial:   true,   // pushState 不触发首次加载，需要手动触发
})

纯 HTML

<script src="https://beacon.acme.com/sdk/analytics.js"></script>
<script>
  QunqaAnalytics.createAnalytics({
    url: 'https://beacon.acme.com/track',
    dev: location.hostname === 'localhost',
  }).mount()
</script>

Next.js（不变）

<AnalyticsProvider analytics={analytics} />