Analytics Tracking

Integrate Qariyb events with popular analytics platforms for conversion tracking and funnel analysis.

Google Analytics 4

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Event Tickets</title>

  <!-- Google Analytics 4 -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-XXXXXXXXXX');
  </script>
</head>
<body>
  <qariyb-checkout event-id="01HWXYZ123ABC456"></qariyb-checkout>

  <!-- Qariyb config must come BEFORE the SDK script -->
  <script>
    window.QariybConfig = { publishableKey: 'pk_live_...' };
  </script>
  <script src="https://js.qariyb.com/v1/qariyb.min.js"></script>

  <script>
    // Track when checkout loads
    window.addEventListener('qariyb:checkout:event-loaded', (e) => {
      const event = e.detail.data.event;
      gtag('event', 'view_item', {
        currency: event.currency,
        items: event.ticket_types.map(t => ({
          item_id: t.id,
          item_name: t.name,
          price: t.price_cents / 100,
        })),
      });
    });

    // Track checkout steps
    window.addEventListener('qariyb:checkout:step-changed', (e) => {
      const { from, to } = e.detail.data;
      gtag('event', 'checkout_progress', {
        checkout_step: to,
        previous_step: from,
      });
    });

    // Track add to cart
    window.addEventListener('qariyb:checkout:cart-updated', (e) => {
      const { cart, action, ticketName } = e.detail.data;
      if (action === 'add') {
        gtag('event', 'add_to_cart', {
          currency: cart.currency,
          value: cart.totalCents / 100,
          items: [{ item_name: ticketName }],
        });
      } else if (action === 'remove') {
        gtag('event', 'remove_from_cart', {
          items: [{ item_name: ticketName }],
        });
      }
    });

    // Track begin checkout
    window.addEventListener('qariyb:checkout:payment-started', (e) => {
      const { amount, currency } = e.detail.data;
      gtag('event', 'begin_checkout', {
        currency: currency,
        value: amount / 100,
      });
    });

    // Track purchase
    window.addEventListener('qariyb:checkout:success', (e) => {
      const { order, tickets } = e.detail.data;
      gtag('event', 'purchase', {
        transaction_id: order.id,
        value: order.total / 100,
        currency: order.currency,
        items: tickets.map(t => ({
          item_id: t.id,
          item_name: t.ticket_type,
        })),
      });
    });

    // Track errors
    window.addEventListener('qariyb:checkout:error', (e) => {
      const { error, step } = e.detail.data;
      gtag('event', 'exception', {
        description: `Checkout error at ${step}: ${error}`,
        fatal: false,
      });
    });
  </script>
</body>
</html>

Segment

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Event Tickets</title>

  <!-- Segment Analytics -->
  <script>
    !function(){var analytics=window.analytics=window.analytics||[];/* Segment snippet */}();
    analytics.load("YOUR_WRITE_KEY");
    analytics.page();
  </script>
</head>
<body>
  <qariyb-checkout event-id="01HWXYZ123ABC456"></qariyb-checkout>

  <!-- Qariyb config must come BEFORE the SDK script -->
  <script>
    window.QariybConfig = { publishableKey: 'pk_live_...' };
  </script>
  <script src="https://js.qariyb.com/v1/qariyb.min.js"></script>

  <script>
    // Product viewed
    window.addEventListener('qariyb:checkout:event-loaded', (e) => {
      const event = e.detail.data.event;
      analytics.track('Product Viewed', {
        product_id: event.id,
        name: event.title,
        category: event.category?.name,
      });
    });

    // Product added
    window.addEventListener('qariyb:checkout:cart-updated', (e) => {
      const { cart, action, ticketId, ticketName } = e.detail.data;
      if (action === 'add') {
        analytics.track('Product Added', {
          product_id: ticketId,
          name: ticketName,
          cart_id: 'checkout',
        });
      } else if (action === 'remove') {
        analytics.track('Product Removed', {
          product_id: ticketId,
          name: ticketName,
        });
      }
    });

    // Checkout started
    window.addEventListener('qariyb:checkout:step-changed', (e) => {
      const { to } = e.detail.data;
      if (to === 'details') {
        analytics.track('Checkout Started');
      }
    });

    // Checkout step viewed
    window.addEventListener('qariyb:checkout:step-changed', (e) => {
      const { to } = e.detail.data;
      analytics.track('Checkout Step Viewed', {
        step: to,
      });
    });

    // Payment info entered
    window.addEventListener('qariyb:checkout:payment-started', (e) => {
      analytics.track('Payment Info Entered');
    });

    // Order completed
    window.addEventListener('qariyb:checkout:success', (e) => {
      const { order, tickets } = e.detail.data;
      analytics.track('Order Completed', {
        order_id: order.id,
        total: order.total / 100,
        currency: order.currency,
        products: tickets.map(t => ({
          product_id: t.id,
          name: t.ticket_type,
        })),
      });
    });
  </script>
</body>
</html>

Facebook Pixel

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Event Tickets</title>

  <!-- Facebook Pixel -->
  <script>
    !function(f,b,e,v,n,t,s)
    {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
    n.callMethod.apply(n,arguments):n.queue.push(arguments)};
    if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
    n.queue=[];t=b.createElement(e);t.async=!0;
    t.src=v;s=b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t,s)}(window, document,'script',
    'https://connect.facebook.net/en_US/fbevents.js');
    fbq('init', 'YOUR_PIXEL_ID');
    fbq('track', 'PageView');
  </script>
</head>
<body>
  <qariyb-checkout event-id="01HWXYZ123ABC456"></qariyb-checkout>

  <!-- Qariyb config must come BEFORE the SDK script -->
  <script>
    window.QariybConfig = { publishableKey: 'pk_live_...' };
  </script>
  <script src="https://js.qariyb.com/v1/qariyb.min.js"></script>

  <script>
    // View content
    window.addEventListener('qariyb:checkout:event-loaded', (e) => {
      const event = e.detail.data.event;
      fbq('track', 'ViewContent', {
        content_ids: [event.id],
        content_name: event.title,
        content_type: 'product',
      });
    });

    // Add to cart
    window.addEventListener('qariyb:checkout:cart-updated', (e) => {
      const { cart, action } = e.detail.data;
      if (action === 'add') {
        fbq('track', 'AddToCart', {
          value: cart.totalCents / 100,
          currency: cart.currency,
        });
      }
    });

    // Initiate checkout
    window.addEventListener('qariyb:checkout:payment-started', (e) => {
      const { amount, currency } = e.detail.data;
      fbq('track', 'InitiateCheckout', {
        value: amount / 100,
        currency: currency,
      });
    });

    // Purchase
    window.addEventListener('qariyb:checkout:success', (e) => {
      const { order, tickets } = e.detail.data;
      fbq('track', 'Purchase', {
        value: order.total / 100,
        currency: order.currency,
        content_ids: tickets.map(t => t.id),
        content_type: 'product',
        num_items: tickets.length,
      });
    });
  </script>
</body>
</html>

Mixpanel

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Event Tickets</title>

  <!-- Mixpanel -->
  <script>
    (function(c,a){/* Mixpanel snippet */})(document,window.mixpanel||[]);
    mixpanel.init('YOUR_TOKEN');
  </script>
</head>
<body>
  <qariyb-checkout event-id="01HWXYZ123ABC456"></qariyb-checkout>

  <!-- Qariyb config must come BEFORE the SDK script -->
  <script>
    window.QariybConfig = { publishableKey: 'pk_live_...' };
  </script>
  <script src="https://js.qariyb.com/v1/qariyb.min.js"></script>

  <script>
    // Track page view with event context
    window.addEventListener('qariyb:checkout:event-loaded', (e) => {
      const event = e.detail.data.event;
      mixpanel.track('Checkout Viewed', {
        event_id: event.id,
        event_name: event.title,
        ticket_count: event.ticket_types.length,
      });
    });

    // Track funnel
    window.addEventListener('qariyb:checkout:step-changed', (e) => {
      const { from, to, eventId } = e.detail.data;
      mixpanel.track('Checkout Step', {
        step: to,
        from_step: from,
        event_id: eventId,
      });
    });

    // Track cart changes
    window.addEventListener('qariyb:checkout:cart-updated', (e) => {
      const { cart, action } = e.detail.data;
      mixpanel.track('Cart Updated', {
        action: action,
        total: cart.totalCents / 100,
        items: cart.totalQuantity,
      });
    });

    // Track conversion
    window.addEventListener('qariyb:checkout:success', (e) => {
      const { order, tickets } = e.detail.data;

      mixpanel.track('Purchase', {
        order_id: order.id,
        revenue: order.total / 100,
        currency: order.currency,
        tickets: tickets.length,
      });

      // Set user profile
      mixpanel.people.set({
        '$email': order.billing_email,
        '$name': order.billing_name,
        'last_purchase': new Date().toISOString(),
      });

      // Revenue tracking
      mixpanel.people.track_charge(order.total / 100);
    });
  </script>
</body>
</html>

Unified Analytics Helper

Create a reusable analytics utility that works with multiple platforms:

<script>
  const QariybAnalytics = {
    init(config = {}) {
      this.ga = config.ga || false;
      this.segment = config.segment || false;
      this.fbPixel = config.fbPixel || false;
      this.mixpanel = config.mixpanel || false;

      this.attachListeners();
    },

    attachListeners() {
      window.addEventListener('qariyb:checkout:event-loaded', (e) => {
        this.trackProductView(e.detail.data.event);
      });

      window.addEventListener('qariyb:checkout:cart-updated', (e) => {
        const { cart, action, ticketId, ticketName } = e.detail.data;
        if (action === 'add') {
          this.trackAddToCart(ticketId, ticketName, cart);
        }
      });

      window.addEventListener('qariyb:checkout:payment-started', (e) => {
        this.trackCheckoutStarted(e.detail.data);
      });

      window.addEventListener('qariyb:checkout:success', (e) => {
        this.trackPurchase(e.detail.data);
      });

      window.addEventListener('qariyb:checkout:error', (e) => {
        this.trackError(e.detail.data);
      });
    },

    trackProductView(event) {
      if (this.ga) {
        gtag('event', 'view_item', {
          currency: event.currency,
          items: [{ item_id: event.id, item_name: event.title }],
        });
      }
      if (this.segment) {
        analytics.track('Product Viewed', { product_id: event.id, name: event.title });
      }
      if (this.fbPixel) {
        fbq('track', 'ViewContent', { content_ids: [event.id] });
      }
      if (this.mixpanel) {
        mixpanel.track('Checkout Viewed', { event_id: event.id });
      }
    },

    trackAddToCart(ticketId, ticketName, cart) {
      if (this.ga) {
        gtag('event', 'add_to_cart', {
          currency: cart.currency,
          value: cart.totalCents / 100,
        });
      }
      if (this.segment) {
        analytics.track('Product Added', { product_id: ticketId, name: ticketName });
      }
      if (this.fbPixel) {
        fbq('track', 'AddToCart', { value: cart.totalCents / 100, currency: cart.currency });
      }
      if (this.mixpanel) {
        mixpanel.track('Cart Updated', { action: 'add', total: cart.totalCents / 100 });
      }
    },

    trackCheckoutStarted({ amount, currency }) {
      if (this.ga) {
        gtag('event', 'begin_checkout', { value: amount / 100, currency });
      }
      if (this.segment) {
        analytics.track('Checkout Started');
      }
      if (this.fbPixel) {
        fbq('track', 'InitiateCheckout', { value: amount / 100, currency });
      }
      if (this.mixpanel) {
        mixpanel.track('Checkout Started', { value: amount / 100 });
      }
    },

    trackPurchase({ order, tickets }) {
      const data = {
        orderId: order.id,
        total: order.total / 100,
        currency: order.currency,
        items: tickets.length,
      };

      if (this.ga) {
        gtag('event', 'purchase', {
          transaction_id: data.orderId,
          value: data.total,
          currency: data.currency,
        });
      }
      if (this.segment) {
        analytics.track('Order Completed', data);
      }
      if (this.fbPixel) {
        fbq('track', 'Purchase', { value: data.total, currency: data.currency });
      }
      if (this.mixpanel) {
        mixpanel.track('Purchase', data);
        mixpanel.people.track_charge(data.total);
      }
    },

    trackError({ error, step }) {
      if (this.ga) {
        gtag('event', 'exception', { description: `${step}: ${error}` });
      }
      if (this.segment) {
        analytics.track('Checkout Error', { error, step });
      }
      if (this.mixpanel) {
        mixpanel.track('Checkout Error', { error, step });
      }
    },
  };

  // Initialize with your platforms
  QariybAnalytics.init({
    ga: true,
    segment: true,
    fbPixel: true,
    mixpanel: true,
  });
</script>

Event Mapping Reference

Qariyb Event	GA4	Segment	Facebook	Mixpanel
`event-loaded`	`view_item`	`Product Viewed`	`ViewContent`	`Checkout Viewed`
`cart-updated` (add)	`add_to_cart`	`Product Added`	`AddToCart`	`Cart Updated`
`step-changed`	`checkout_progress`	`Checkout Step Viewed`	-	`Checkout Step`
`payment-started`	`begin_checkout`	`Payment Info Entered`	`InitiateCheckout`	`Checkout Started`
`discount-applied`	`select_promotion`	`Coupon Applied`	-	`Discount Applied`
`discount-failed`	-	`Coupon Denied`	-	`Discount Failed`
`success`	`purchase`	`Order Completed`	`Purchase`	`Purchase`
`error`	`exception`	`Checkout Error`	-	`Checkout Error`