Skip to main content
Scripts

Cloudflare Web Analytics

Copy for LLMs

Cloudflare Web Analytics reports traffic and Web Vitals. Its beacon does not use cookies or local storage, and the company says the product does not collect or use visitors' personal data.

Cloudflare Web Analytics

View source

Nuxt Config Setup

Add this to your nuxt.config.ts to load Cloudflare Web Analytics globally. Alternatively you can use the useScriptCloudflareWebAnalytics composable for more control. 

export default defineNuxtConfig({
  scripts: {
    registry: {
      cloudflareWebAnalytics: {
        token: 'a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4',
        trigger: 'onNuxtReady',
      }
    }
  }
})

This config automatically enables first-party mode (bundle + proxy). See below to customise.

useScriptCloudflareWebAnalytics()

The useScriptCloudflareWebAnalytics composable lets you have fine-grain control over when and how Cloudflare Web Analytics is loaded on your site. 

const { proxy } = useScriptCloudflareWebAnalytics()

// automatic page view tracking

Please follow the Registry Scripts guide to learn more about advanced usage.

First-Party Mode: Privacy Focused Proxy

No extra config needed. The script is bundled from your domain (faster loads, no extra DNS lookup) and runtime requests are reverse-proxied through your server with automatic anonymisation (user IPs stay hidden from Cloudflare Web Analytics, works with ad blockers). Learn more.

Mode
Bundle Proxy Partytown
Privacy
User IP addresses are anonymised. Other request data passes through.
export default defineNuxtConfig({
  scripts: {
    // ✅ First-party mode: bundled + proxied
    registry: {
      cloudflareWebAnalytics: {
        token: 'a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4',
        trigger: 'onNuxtReady',
      },
    },
  },
})

Example

Using Cloudflare Web Analytics in a component with the proxy to send events . 

<script setup lang="ts">
const { proxy } = useScriptCloudflareWebAnalytics()

// noop in development, ssr
// just works in production, client
function handleAction() {
  // automatic page view tracking
}
</script>

<template>
  <div>
    <button @click="handleAction">
      Send Event
    </button>
  </div>
</template>

Default:

  • Trigger: Client The script loads during Nuxt hydration to keep Web Vitals metrics accurate.

This registry fixes the trigger to client. A scriptOptions.trigger value passed by the caller is overwritten, so this integration cannot currently be deferred with a consent or element trigger.

The current runtime always enables SPA tracking, even though Cloudflare documents spa: false as the switch for disabling it. Passing spa: false to this registry currently has no effect.

Loading in app.vue

Register the beacon in app.vue:

app.vue
<script setup lang="ts">
useScriptCloudflareWebAnalytics({
  token: '12ee46bf598b45c2868bbc07a3073f58',
})
</script>

The analytics script creates a window.__cfBeacon object. Access it after the script loads:

const { onLoaded } = useScriptCloudflareWebAnalytics({
  token: '12ee46bf598b45c2868bbc07a3073f58',
})
onLoaded(({ __cfBeacon }) => {
  console.log(__cfBeacon)
})
tokenstring required

The Cloudflare Web Analytics token.

spaboolean = true

Cloudflare Web Analytics enables measuring SPAs automatically by overriding the History API's pushState function and listening to the onpopstate. Hash-based router is not supported.

Edit this page
Markdown For LLMs

Clarity

Load Microsoft Clarity and manage its session-recording consent state.

Crisp

Add a lazy-loaded Crisp chat launcher to your Nuxt app.