Skillintermediate

Framework Integration

**Web Analytics is dashboard-only** - no programmatic API. This covers beacon integration.

Claude Code Knowledge Pack7/10/2026

Overview

Framework Integration

Web Analytics is dashboard-only - no programmatic API. This covers beacon integration.

Basic 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 ``
Next.js Pages	`pages/_document.tsx`	Use ``
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

{
  "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

// 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);
}