mirror of
https://github.com/ksyasuda/dotfiles.git
synced 2026-03-21 06:11:27 -07:00
61 lines
1.7 KiB
Markdown
61 lines
1.7 KiB
Markdown
# Framework Integration
|
|
|
|
**Web Analytics is dashboard-only** - no programmatic API. This covers beacon integration.
|
|
|
|
## Basic HTML
|
|
|
|
```html
|
|
<script defer src='https://static.cloudflareinsights.com/beacon.min.js'
|
|
data-cf-beacon='{"token": "YOUR_TOKEN", "spa": true}'></script>
|
|
```
|
|
|
|
Place before closing `</body>` tag.
|
|
|
|
## Framework Examples
|
|
|
|
| Framework | Location | Notes |
|
|
|-----------|----------|-------|
|
|
| React/Vite | `public/index.html` | Add `spa: true` |
|
|
| Next.js App Router | `app/layout.tsx` | Use `<Script strategy="afterInteractive">` |
|
|
| Next.js Pages | `pages/_document.tsx` | Use `<Script>` |
|
|
| Nuxt 3 | `app.vue` with `useHead()` | Or use plugin |
|
|
| Vue 3/Vite | `index.html` | Add `spa: true` |
|
|
| Gatsby | `gatsby-browser.js` | `onClientEntry` hook |
|
|
| SvelteKit | `src/app.html` | Before `</body>` |
|
|
| Astro | Layout component | Before `</body>` |
|
|
| Angular | `src/index.html` | Add `spa: true` |
|
|
| Docusaurus | `docusaurus.config.js` | In `scripts` array |
|
|
|
|
## Configuration
|
|
|
|
```json
|
|
{
|
|
"token": "YOUR_TOKEN",
|
|
"spa": true
|
|
}
|
|
```
|
|
|
|
**Use `spa: true` for:** React Router, Vue Router, Next.js, Nuxt, Gatsby, SvelteKit, Angular
|
|
|
|
**Use `spa: false` for:** Traditional server-rendered (PHP, Django, Rails, WordPress)
|
|
|
|
## CSP Headers
|
|
|
|
```
|
|
script-src 'self' https://static.cloudflareinsights.com;
|
|
connect-src 'self' https://cloudflareinsights.com;
|
|
```
|
|
|
|
## GDPR Consent
|
|
|
|
```typescript
|
|
// Load conditionally based on consent
|
|
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);
|
|
}
|
|
```
|