// Syntax
zaraz.track(eventName, [eventProperties])

// Basic event
zaraz.track("button_click")

// Event with properties
zaraz.track("purchase", {
  value: 200,
  currency: "USD",
  product_id: "SKU-123"
})

// Async usage
await zaraz.track("signup_complete", { plan: "premium" })

{{ client.value }}
{{ client.`product_id` }}  // Use backticks for special characters

// Syntax
zaraz.set(key, value, [options])

// Page scope (cleared on navigation)
zaraz.set("page_category", "blog", { scope: "page" })

// Session scope (persists during session)
zaraz.set("user_tier", "premium", { scope: "session" })

// Persist scope (localStorage, survives sessions) - DEFAULT
zaraz.set("user_id", "12345", { scope: "persist" })
zaraz.set("user_id", "12345")  // Same as above

// Unset a variable
zaraz.set("user_id", undefined)

// Syntax
zaraz.ecommerce(eventName, eventProperties)

// Product viewed
zaraz.ecommerce("Product Viewed", {
  product_id: "507f1f77",
  sku: "G-32",
  name: "Monopoly",
  price: 18.99,
  category: "Games"
})

// Add to cart
zaraz.ecommerce("Product Added", {
  product_id: "507f1f77",
  name: "Monopoly",
  price: 18.99,
  quantity: 1
})

// Order completed
zaraz.ecommerce("Order Completed", {
  order_id: "50314b8e",
  total: 27.50,
  revenue: 25.00,
  shipping: 3.00,
  tax: 2.00,
  currency: "USD",
  products: [
    {
      product_id: "507f1f77",
      name: "Monopoly",
      price: 18.99,
      quantity: 1
    }
  ]
})

// Manual SPA pageview (advanced use)
zaraz.spaPageview()

/* CSS Examples */
#submit-button        /* ID selector */
.cta-button          /* Class selector */
button[type="submit"] /* Attribute selector */

/* Form selector */
#checkout-form
form[name="contact"]

/* Visibility triggers */
#promo-banner
.video-player

100px     /* Fixed pixel value */
50%       /* Viewport percentage */

Firing Trigger: Pageview
Blocking Trigger: URL contains "/admin"

{
  "analytics": true,
  "advertising": false,
  "functional": true
}

// Wait for API ready
document.addEventListener("zarazConsentAPIReady", () => {
  // Check specific purpose
  const analyticsConsent = zaraz.consent.get("analytics")

  // Get all consent statuses
  const allConsent = zaraz.consent.getAll()

  // Set consent for specific purposes
  zaraz.consent.set({
    analytics: true,
    advertising: false
  })

  // Accept or reject all
  zaraz.consent.setAll(true)   // Accept all
  zaraz.consent.setAll(false)  // Reject all

  // Show consent modal
  zaraz.consent.modal = true
})

// Listen for consent changes
document.addEventListener("zarazConsentChoicesUpdated", () => {
  console.log("User updated consent preferences")
})

// Send queued events after consent
zaraz.consent.sendQueuedEvents()

document.addEventListener("zarazConsentAPIReady", () => {
  // Show modal only for EU visitors
  if (zaraz.consent.purposes.analytics.region === "EU") {
    zaraz.consent.modal = true
  } else {
    zaraz.consent.setAll(true)
  }
})

// Existing GTM code
dataLayer.push({
  event: 'purchase',
  price: '24',
  currency: 'USD'
})

// Automatically converted to
zaraz.track('purchase', { price: '24', currency: 'USD' })

export default {
  async fetch(request) {
    const { system, client } = await request.json()

    // Add weather data
    const weather = await fetch('https://api.weather.com/...')
    client.weather = await weather.json()

    // Redact email addresses
    for (const key in client) {
      if (typeof client[key] === 'string' && client[key].includes('@')) {
        client[key] = '[REDACTED]'
      }
    }

    return new Response(JSON.stringify({ system, client }))
  }
}

// Check if Zaraz is loaded
if (typeof zaraz !== 'undefined') {
  console.log('Zaraz loaded successfully')
}

// Enable Debug Mode in console
// Access real-time event monitoring

import { useEffect } from 'react'

function ProductPage({ product }) {
  useEffect(() => {
    // Track product view
    if (typeof zaraz !== 'undefined') {
      zaraz.ecommerce('Product Viewed', {
        product_id: product.id,
        name: product.name,
        price: product.price,
        category: product.category
      })
    }
  }, [product])

  const handleAddToCart = () => {
    if (typeof zaraz !== 'undefined') {
      zaraz.ecommerce('Product Added', {
        product_id: product.id,
        name: product.name,
        price: product.price,
        quantity: 1
      })
    }
    // Add to cart logic
  }

  return (
    <div>
      <h1>{product.name}</h1>
      <button onClick={handleAddToCart}>Add to Cart</button>
    </div>
  )
}

// components/ConsentBanner.jsx
import { useEffect, useState } from 'react'

export function ConsentBanner() {
  const [showBanner, setShowBanner] = useState(false)

  useEffect(() => {
    const handleReady = () => {
      const allConsent = zaraz.consent.getAll()
      if (Object.keys(allConsent).length === 0) {
        setShowBanner(true)
      }
    }

    document.addEventListener('zarazConsentAPIReady', handleReady)
    return () => document.removeEventListener('zarazConsentAPIReady', handleReady)
  }, [])

  const acceptAll = () => {
    zaraz.consent.setAll(true)
    setShowBanner(false)
  }

  const rejectAll = () => {
    zaraz.consent.setAll(false)
    setShowBanner(false)
  }

  if (!showBanner) return null

  return (
    <div className="consent-banner">
      <p>We use cookies to improve your experience.</p>
      <button onClick={acceptAll}>Accept All</button>
      <button onClick={rejectAll}>Reject All</button>
      <button onClick={() => zaraz.consent.modal = true}>
        Customize
      </button>
    </div>
  )
}

<template>
  <button @click="trackClick">{{ label }}</button>
</template>

<script setup>
import { onMounted } from 'vue'

const props = defineProps({
  label: String,
  eventName: String,
  eventProps: Object
})

onMounted(() => {
  if (typeof zaraz !== 'undefined') {
    zaraz.set('component_loaded', props.label, { scope: 'page' })
  }
})

function trackClick() {
  if (typeof zaraz !== 'undefined') {
    zaraz.track(props.eventName, props.eventProps)
  }
}
</script>

// Step 1: Checkout started
zaraz.ecommerce('Checkout Started', {
  checkout_id: 'CHK-123',
  value: 50.00,
  currency: 'USD',
  products: cartItems
})

// Step 2: Shipping info
zaraz.ecommerce('Shipping Info Entered', {
  checkout_id: 'CHK-123',
  shipping_method: 'standard'
})

// Step 3: Payment info
zaraz.ecommerce('Payment Info Entered', {
  checkout_id: 'CHK-123',
  payment_method: 'credit_card'
})

// Step 4: Order completed
zaraz.ecommerce('Order Completed', {
  order_id: 'ORD-456',
  checkout_id: 'CHK-123',
  total: 53.00,
  revenue: 50.00,
  shipping: 3.00,
  tax: 0,
  currency: 'USD',
  products: cartItems
})