1# Framework Integration
2 
3**Web Analytics is dashboard-only** - no programmatic API. This covers beacon integration.
4 
5## Basic HTML
6 
7```html
8<script defer src='https://static.cloudflareinsights.com/beacon.min.js' 
9        data-cf-beacon='{"token": "YOUR_TOKEN", "spa": true}'></script>
10```
11 
12Place before closing `</body>` tag.
13 
14## Framework Examples
15 
16| Framework | Location | Notes |
17|-----------|----------|-------|
18| React/Vite | `public/index.html` | Add `spa: true` |
19| Next.js App Router | `app/layout.tsx` | Use `<Script strategy="afterInteractive">` |
20| Next.js Pages | `pages/_document.tsx` | Use `<Script>` |
21| Nuxt 3 | `app.vue` with `useHead()` | Or use plugin |
22| Vue 3/Vite | `index.html` | Add `spa: true` |
23| Gatsby | `gatsby-browser.js` | `onClientEntry` hook |
24| SvelteKit | `src/app.html` | Before `</body>` |
25| Astro | Layout component | Before `</body>` |
26| Angular | `src/index.html` | Add `spa: true` |
27| Docusaurus | `docusaurus.config.js` | In `scripts` array |
28 
29## Configuration
30 
31```json
32{
33  "token": "YOUR_TOKEN",
34  "spa": true
35}
36```
37 
38**Use `spa: true` for:** React Router, Vue Router, Next.js, Nuxt, Gatsby, SvelteKit, Angular
39 
40**Use `spa: false` for:** Traditional server-rendered (PHP, Django, Rails, WordPress)
41 
42## CSP Headers
43 
44```
45script-src 'self' https://static.cloudflareinsights.com;
46connect-src 'self' https://cloudflareinsights.com;
47```
48 
49## GDPR Consent
50 
51```typescript
52// Load conditionally based on consent
53if (localStorage.getItem('analytics-consent') === 'true') {
54  const script = document.createElement('script');
55  script.src = 'https://static.cloudflareinsights.com/beacon.min.js';
56  script.defer = true;
57  script.setAttribute('data-cf-beacon', '{"token": "YOUR_TOKEN", "spa": true}');
58  document.body.appendChild(script);
59}
60```
61