mirror of
https://github.com/ksyasuda/dotfiles.git
synced 2026-03-21 06:11:27 -07:00
75 lines
2.1 KiB
Markdown
75 lines
2.1 KiB
Markdown
# 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):**
|
|
```javascript
|
|
// On route change
|
|
zaraz.track('pageview', { page_path: pathname, page_title: document.title });
|
|
```
|
|
|
|
## User Identification
|
|
|
|
```javascript
|
|
// 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
|
|
|
|
```javascript
|
|
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:
|
|
```typescript
|
|
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
|
|
|
|
1. Use dashboard triggers over inline code
|
|
2. Enable History Change for SPAs (no manual code)
|
|
3. Debug with `zaraz.debug = true`
|
|
4. Implement consent early (GDPR/CCPA)
|
|
5. Use Context Enrichers for sensitive/server data
|