Setting the file. One moment.
Chapter 04 · Cloudflare Deploy
Subchapter 4.257
references/web-analytics/integration.mdMarkdown2 KBView on GitHub
Web Analytics is dashboard-only - no programmatic API. This covers beacon integration.
<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 | 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 |
{
"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)
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);
}