Files
dotfiles/dot_agents/skills/cloudflare/references/web-analytics/integration.md
T
Prad Nukala 6406208b35 shell: fish functions -> ~/.local/bin executables + bash/zsh ports; manage ~/.agents
- 16 cross-shell utilities converted to sh/bash chezmoi executables:
  ai c2p cp-appid extract_agents fab gdc gh-sonr-org-migrate ghg-clone
  ghn gho git-summary launch_omp_livediff_overlay lc-elir mdcp mdp pj
  (ghg-clone not named ghg: unrelated cargo binary owns that name)
- cwd/history helpers stay per-shell: yy c cd clip-last + ghg/ghn/gho
  cd-wrappers in bash/functions/ and zsh/functions/, loaded by rc files
- fish keeps only shell-state functions; converted ones now hit PATH
- cp-appid ignore gating moved to .local/bin path
- dot_agents/skills: 82 skills materialized from dotstate storage so
  dot_claude skill symlinks resolve on fresh bootstrap; dotstate
  profile/symlinks.json released .agents/skills .bashrc .zshrc
2026-08-10 15:15:06 -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);
}