Zaraz Patterns

SPA Tracking

History Change Trigger (Recommended): Configure in dashboard - no code needed, Zaraz auto-detects route changes.

Manual tracking (React/Vue/Next.js):

// On route change
zaraz.track('pageview', { page_path: pathname, page_title: document.title });

User Identification

// Login
zaraz.set({ userId: user.id, email: user.email, plan: user.plan });
zaraz.track('login', { method: 'oauth' });

// Logout - set to null (cannot clear)
zaraz.set('userId', null);

E-commerce Funnel

Event	Method
View	`zaraz.ecommerce('Product Viewed', { product_id, name, price })`
Add to cart	`zaraz.ecommerce('Product Added', { product_id, quantity })`
Checkout	`zaraz.ecommerce('Checkout Started', { cart_id, products: [...] })`
Purchase	`zaraz.ecommerce('Order Completed', { order_id, total, products })`

A/B Testing

zaraz.set('experiment_checkout', variant);
zaraz.track('experiment_viewed', { experiment_id: 'checkout', variant });
// On conversion
zaraz.track('experiment_conversion', { experiment_id, variant, value });

Worker Integration

Context Enricher - Modify context before tools execute:

export default {
  async fetch(request, env) {
    const body = await request.json();
    body.system.userRegion = request.cf?.region;
    return Response.json(body);
  }
};

Configure: Zaraz > Settings > Context Enrichers

Worker Variables - Compute dynamic values server-side, use as {{worker.variable_name}}.

GTM Migration

GTM	Zaraz
`dataLayer.push({event: 'purchase'})`	`zaraz.ecommerce('Order Completed', {...})`
`{{Page URL}}`	`{{system.page.url}}`
`{{Page Title}}`	`{{system.page.title}}`
Page View trigger	Pageview trigger
Click trigger	Click (selector: `*`)

Best Practices

Use dashboard triggers over inline code
Enable History Change for SPAs (no manual code)
Debug with zaraz.debug = true
Implement consent early (GDPR/CCPA)
Use Context Enrichers for sensitive/server data

2.1 KiB Raw Permalink Blame History