Files
dotfiles/dot_claude/skills/cloudflare/references/web-analytics/integration.md
T
Prad NukalaandClaude Fable 5 20891f3910 config(git,claude,ssh): templated gitconfig; claude settings/commands/hooks/skills; ssh config
gitconfig: name/email from chezmoi data, gh credential helper by PATH
lookup (portable to darwin). claude: no credentials, history, projects,
sessions, or plugin caches. ssh config as private_ (0600).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-08-09 14:53:46 -04:00

1.7 KiB

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

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