1# Web Analytics Patterns
2 
3## Core Web Vitals Debugging
4 
5Dashboard → Core Web Vitals → Click metric → Debug View shows top 5 problematic elements.
6 
7### LCP Fixes
8 
9```html
10<!-- Priority hints -->
11<img src="hero.jpg" loading="eager" fetchpriority="high" />
12<link rel="preload" as="image" href="/hero.jpg" fetchpriority="high" />
13```
14 
15### CLS Fixes
16 
17```css
18/* Reserve space */
19.ad-container { min-height: 250px; }
20img { width: 400px; height: 300px; } /* Explicit dimensions */
21```
22 
23### INP Fixes
24 
25```typescript
26// Debounce expensive operations
27const handleInput = debounce(search, 300);
28 
29// Yield to main thread
30await task(); await new Promise(r => setTimeout(r, 0)); await task2();
31 
32// Move to Web Worker for heavy computation
33```
34 
35| Metric | Good | Poor |
36|--------|------|------|
37| LCP | ≤2.5s | >4s |
38| INP | ≤200ms | >500ms |
39| CLS | ≤0.1 | >0.25 |
40 
41## GDPR Consent
42 
43```typescript
44// Load beacon only after consent
45const consent = localStorage.getItem('analytics-consent');
46if (consent === 'accepted') {
47  const script = document.createElement('script');
48  script.src = 'https://static.cloudflareinsights.com/beacon.min.js';
49  script.setAttribute('data-cf-beacon', '{"token": "TOKEN", "spa": true}');
50  document.body.appendChild(script);
51}
52```
53 
54Alternative: Dashboard → "Enable, excluding visitor data in the EU"
55 
56## SPA Navigation
57 
58```html
59<!-- REQUIRED for React/Vue/etc routing -->
60<script data-cf-beacon='{"token": "TOKEN", "spa": true}' ...></script>
61```
62 
63Without `spa: true`: only initial pageload tracked.
64 
65## Staging/Production Separation
66 
67```typescript
68// Use env-specific tokens
69const token = process.env.NEXT_PUBLIC_CF_ANALYTICS_TOKEN;
70// .env.production: production token
71// .env.staging: staging token (or empty to disable)
72```
73 
74## Bot Filtering
75 
76Dashboard → Filters → "Exclude Bot Traffic"
77 
78Filters: Search crawlers, monitoring services, known bots.  
79Not filtered: Headless browsers (Playwright/Puppeteer).
80 
81## Ad-Blocker Impact
82 
83~25-40% of users may block `cloudflareinsights.com`. No official workaround.
84Dashboard shows minimum baseline; use server logs for complete picture.
85 
86## Limitations
87 
88- No UTM parameter tracking
89- No webhooks/alerts/API
90- No custom beacon domains
91- Max 10 non-proxied sites
92