1# Cloudflare Web Analytics
2 
3Privacy-first web analytics providing Core Web Vitals, traffic metrics, and user insights without compromising visitor privacy.
4 
5## Overview
6 
7Cloudflare Web Analytics provides:
8- **Core Web Vitals** - LCP, FID, CLS, INP, TTFB monitoring
9- **Page views & visits** - Traffic patterns without cookies
10- **Referrers & paths** - Traffic sources and popular pages
11- **Device & browser data** - User agent breakdown
12- **Geographic data** - Country-level visitor distribution
13- **Privacy-first** - No cookies, fingerprinting, or PII collection
14- **Free** - No cost, unlimited pageviews
15 
16**Important:** Web Analytics is **dashboard-only**. No API exists for programmatic data access.
17 
18## Quick Start Decision Tree
19 
20```
21Is your site proxied through Cloudflare?
22├─ YES → Use automatic injection (configuration.md)
23│   ├─ Enable auto-injection in dashboard
24│   └─ No code changes needed (unless Cache-Control: no-transform)
25│
26└─ NO → Use manual beacon integration (integration.md)
27    ├─ Add JS snippet to HTML
28    ├─ Use spa: true for React/Vue/Next.js
29    └─ Configure CSP if needed
30```
31 
32## Reading Order
33 
341. **[configuration.md](configuration.md)** - Setup for proxied vs non-proxied sites
352. **[integration.md](integration.md)** - Framework-specific beacon integration (React, Next.js, Vue, Nuxt, etc.)
363. **[patterns.md](patterns.md)** - Common use cases (performance monitoring, GDPR consent, multi-site tracking)
374. **[gotchas.md](gotchas.md)** - Troubleshooting (SPA tracking, CSP issues, hash routing limitations)
38 
39## When to Use Each File
40 
41- **Setting up for first time?** → Start with configuration.md
42- **Using React/Next.js/Vue/Nuxt?** → Go to integration.md for framework code
43- **Need GDPR consent loading?** → See patterns.md
44- **Beacon not loading or no data?** → Check gotchas.md
45- **SPA not tracking navigation?** → See integration.md for `spa: true` config
46 
47## Key Concepts
48 
49### Proxied vs Non-Proxied Sites
50 
51| Type | Description | Beacon Injection | Limit |
52|------|-------------|------------------|-------|
53| **Proxied** | DNS through Cloudflare (orange cloud) | Automatic or manual | Unlimited |
54| **Non-proxied** | External hosting, manual beacon | Manual only | 10 sites max |
55 
56### SPA Mode
57 
58**Critical for modern frameworks:**
59```json
60{"token": "YOUR_TOKEN", "spa": true}
61```
62 
63Without `spa: true`, client-side navigation (React Router, Vue Router, Next.js routing) will NOT be tracked. Only initial page loads will register.
64 
65### CSP Requirements
66 
67If using Content Security Policy, allow both domains:
68```
69script-src https://static.cloudflareinsights.com https://cloudflareinsights.com;
70```
71 
72## Features
73 
74### Core Web Vitals Debugging
75- **LCP (Largest Contentful Paint)** - Identifies slow-loading hero images/elements
76- **FID (First Input Delay)** - Interaction responsiveness (legacy metric)
77- **INP (Interaction to Next Paint)** - Modern interaction responsiveness metric
78- **CLS (Cumulative Layout Shift)** - Visual stability issues
79- **TTFB (Time to First Byte)** - Server response performance
80 
81Dashboard shows top 5 problematic elements with CSS selectors for debugging.
82 
83### Traffic Filters
84- **Bot filtering** - Exclude automated traffic from metrics
85- **Date ranges** - Custom time period analysis
86- **Geographic** - Country-level filtering
87- **Device type** - Desktop, mobile, tablet breakdown
88- **Browser/OS** - User agent filtering
89 
90### Rules (Advanced - Plan-dependent)
91 
92Create custom tracking rules for advanced configurations:
93 
94**Sample Rate Rules:**
95- Reduce data collection percentage for high-traffic sites
96- Example: Track only 50% of visitors to reduce volume
97 
98**Path-Based Rules:**
99- Different behavior per route
100- Example: Exclude `/admin/*` or `/internal/*` from tracking
101 
102**Host-Based Rules:**
103- Multi-domain configurations
104- Example: Separate tracking for staging vs production subdomains
105 
106**Availability:** Rules feature depends on your Cloudflare plan. Check dashboard under Web Analytics → Rules to see if available. Free plans may have limited or no access.
107 
108## Plan Limits
109 
110| Feature | Free | Notes |
111|---------|------|-------|
112| Proxied sites | Unlimited | DNS through Cloudflare |
113| Non-proxied sites | 10 | External hosting |
114| Pageviews | Unlimited | No volume limits |
115| Data retention | 6 months | Rolling window |
116| Rules | Plan-dependent | Check dashboard |
117 
118## Privacy & Compliance
119 
120- **No cookies** - Zero client-side storage
121- **No fingerprinting** - No tracking across sites
122- **No PII** - IP addresses not stored
123- **GDPR-friendly** - Minimal data collection
124- **CCPA-compliant** - No personal data sale
125 
126**EU opt-out:** Dashboard option to exclude EU visitor data entirely.
127 
128## Limitations
129 
130- **Dashboard-only** - No API for programmatic access
131- **No real-time** - 5-10 minute data delay
132- **No custom events** - Automatic pageview/navigation tracking only
133- **History API only** - Hash-based routing (`#/path`) not supported
134- **No session replay** - Metrics only, no user recordings
135- **No form tracking** - Page navigation tracking only
136 
137## See Also
138 
139- [Cloudflare Web Analytics Docs](https://developers.cloudflare.com/analytics/web-analytics/)
140- [Core Web Vitals Guide](https://web.dev/vitals/)
141- [GraphQL Analytics API Reference](../graphql-api/) - Query server-side analytics (HTTP, Workers, DNS, Firewall, etc.) via GraphQL
142