1# Zaraz Patterns
2 
3## SPA Tracking
4 
5**History Change Trigger (Recommended):** Configure in dashboard - no code needed, Zaraz auto-detects route changes.
6 
7**Manual tracking (React/Vue/Next.js):**
8```javascript
9// On route change
10zaraz.track('pageview', { page_path: pathname, page_title: document.title });
11```
12 
13## User Identification
14 
15```javascript
16// Login
17zaraz.set({ userId: user.id, email: user.email, plan: user.plan });
18zaraz.track('login', { method: 'oauth' });
19 
20// Logout - set to null (cannot clear)
21zaraz.set('userId', null);
22```
23 
24## E-commerce Funnel
25 
26| Event | Method |
27|-------|--------|
28| View | `zaraz.ecommerce('Product Viewed', { product_id, name, price })` |
29| Add to cart | `zaraz.ecommerce('Product Added', { product_id, quantity })` |
30| Checkout | `zaraz.ecommerce('Checkout Started', { cart_id, products: [...] })` |
31| Purchase | `zaraz.ecommerce('Order Completed', { order_id, total, products })` |
32 
33## A/B Testing
34 
35```javascript
36zaraz.set('experiment_checkout', variant);
37zaraz.track('experiment_viewed', { experiment_id: 'checkout', variant });
38// On conversion
39zaraz.track('experiment_conversion', { experiment_id, variant, value });
40```
41 
42## Worker Integration
43 
44**Context Enricher** - Modify context before tools execute:
45```typescript
46export default {
47  async fetch(request, env) {
48    const body = await request.json();
49    body.system.userRegion = request.cf?.region;
50    return Response.json(body);
51  }
52};
53```
54Configure: Zaraz > Settings > Context Enrichers
55 
56**Worker Variables** - Compute dynamic values server-side, use as `{{worker.variable_name}}`.
57 
58## GTM Migration
59 
60| GTM | Zaraz |
61|-----|-------|
62| `dataLayer.push({event: 'purchase'})` | `zaraz.ecommerce('Order Completed', {...})` |
63| `{{Page URL}}` | `{{system.page.url}}` |
64| `{{Page Title}}` | `{{system.page.title}}` |
65| Page View trigger | Pageview trigger |
66| Click trigger | Click (selector: `*`) |
67 
68## Best Practices
69 
701. Use dashboard triggers over inline code
712. Enable History Change for SPAs (no manual code)
723. Debug with `zaraz.debug = true`
734. Implement consent early (GDPR/CCPA)
745. Use Context Enrichers for sensitive/server data
75