# Zaraz Configuration

## Dashboard Setup

1. Domain → Zaraz → Start setup
2. Add tool (e.g., Google Analytics 4)
3. Enter credentials (GA4: `G-XXXXXXXXXX`)
4. Configure triggers
5. Save and Publish

## Triggers

| Type            | When              | Use Case           |
| --------------- | ----------------- | ------------------ |
| Pageview        | Page load         | Track page views   |
| Click           | Element clicked   | Button tracking    |
| Form Submission | Form submitted    | Lead capture       |
| History Change  | URL changes (SPA) | React/Vue routing  |
| Variable Match  | Custom condition  | Conditional firing |

### History Change (SPA)

```
Type: History Change
Event: pageview
```

Fires on `pushState`, `replaceState`, hash changes. **No manual tracking needed.**

### Click Trigger

```
Type: Click
CSS Selector: .buy-button
Event: purchase_intent
Properties:
  button_text: {{system.clickElement.text}}
```

## Tool Configuration

**GA4:**

```
Measurement ID: G-XXXXXXXXXX
Events: page_view, purchase, user_engagement
```

**Facebook Pixel:**

```
Pixel ID: 1234567890123456
Events: PageView, Purchase, AddToCart
```

**Google Ads:**

```
Conversion ID: AW-XXXXXXXXX
Conversion Label: YYYYYYYYYY
```

## Consent Management

1. Settings → Consent → Create purposes (analytics, marketing)
2. Map tools to purposes
3. Set behavior: "Do not load until consent granted"

**Programmatic consent:**

```javascript
zaraz.consent.setAll({ analytics: true, marketing: true })
```

## Privacy Features

| Feature          | Default              |
| ---------------- | -------------------- |
| IP Anonymization | Enabled              |
| Cookie Control   | Via consent purposes |
| GDPR/CCPA        | Consent modal        |

## Testing

1. **Preview Mode** - test without publishing
2. **Debug Mode** - `zaraz.debug = true`
3. **Network tab** - filter "zaraz"

## Limits

| Resource         | Limit |
| ---------------- | ----- |
| Event properties | 100KB |
| Consent purposes | 20    |