Web Analytics 集成

# 框架集成 **Web Analytics 仅支持仪表板查看** - 无程序化 API。以下内容涵盖 beacon 集成。 ## 基础 HTML html 放置在 `` 结束标签之前。 ## 框架示例 | 框架 | 位置 | 注意事项 | |-----------|----------|-------| | React/Vite | `public/index.html` | 添加 `spa: true` | | Next.js App Router | `app/layout.tsx` | 使用 `` | | Next.js Pages | `pages/_document.tsx` | 使用 `` | | Nuxt 3 | `app.vue` 使用 `useHead()` | 或使用插件 | | Vue 3/Vite | `index.html` | 添加 `spa: true` | | Gatsby | `gatsby-browser.js` | 使用 `onClientEntry` 钩子 | | SvelteKit | `src/app.html` | 在 `` 之前 | | Astro | 布局组件 | 在 `` 之前 | | Angular | `src/index.html` | 添加 `spa: true` | | Docusaurus | `docusaurus.config.js` | 在 `scripts` 数组中 | ## 配置 { "token": "YOUR_TOKEN", "spa": true } **以下情况使用 `spa: true`：** React Router, Vue Router, Next.js, Nuxt, Gatsby, SvelteKit, Angular **以下情况使用 `spa: false`：** 传统的服务器渲染应用（PHP, Django, Rails, WordPress） ## CSP 响应头 script-src 'self' https://static.cloudflareinsights.com; connect-src 'self' https://cloudflareinsights.com; ## GDPR 同意机制 typescript // 根据用户同意情况有条件加载 if (localStorage.getItem('analytics-consent') === 'true') { const script = document.createElement('script'); script.src = 'https://static.cloudflareinsights.com/beacon.min.js'; script.defer = true; script.setAttribute('data-cf-beacon', '{"token": "YOUR_TOKEN", "spa": true}'); document.body.appendChild(script); }