Analytics

The plugin includes a comprehensive analytics system that tracks user interactions throughout the ticket purchasing journey. The system uses custom events that can be integrated with Google Tag Manager (GTM) and other analytics platforms.

Overview

The analytics system dispatches custom browser events that track key user interactions during the ticket booking process. These events follow a custom pattern and can be easily integrated with various analytics platforms.

All analytics events are dispatched as custom browser events with the name analytics and you can listen to these events using JavaScript.

Each event contains a type field identifying the specific user action and a data object with relevant contextual information.

These events can be used to integrate with any analytics platform of your choice.

Available Analytics Events

1. View Events (view_events)

Triggered when users view the list of available events.

Data Structure:

{
  type: 'view_events',
  data: {
    space: 'space-uuid',
    events: ['event-uuid-1', 'event-uuid-2']
  }
}

GTM Mapping: view_item_list with event items

2. Select Event (select_event)

Triggered when a user selects a specific event.

Data Structure:

{
  type: 'select_event',
  data: {
    space: 'space-uuid',
    event: 'event-uuid',
    quantity: 2
  }
}

GTM Mapping: select_item event

3. Select Date (select_date)

Triggered when a user picks a date for their visit.

Data Structure:

{
  type: 'select_date',
  data: {
    space: 'space-uuid',
    event: 'event-uuid',
    quantity: 2,
    date: Date
  }
}

GTM Mapping: select_content with content_type 'date'

4. View Sessions (view_sessions)

Triggered when users view available sessions for a selected date.

Data Structure:

{
  type: 'view_sessions',
  data: {
    space: 'space-uuid',
    event: 'event-uuid',
    quantity: 2,
    date: Date,
    sessions: [sessionObjects]
  }
}

GTM Mapping: view_item_list for sessions

5. Select Session (select_session)

Triggered when a user selects a specific session.

Data Structure:

{
  type: 'select_session',
  data: {
    space: 'space-uuid',
    event: 'event-uuid',
    quantity: 2,
    date: Date,
    session: sessionObject
  }
}

GTM Mapping: select_item for session

6. Create Cart (create_cart)

Triggered when a cart is created with selected tickets.

Data Structure:

{
  type: 'create_cart',
  data: {
    space: 'space-uuid',
    event: 'event-uuid',
    quantity: 2,
    date: Date,
    session: sessionObject,
    tickets: [ticketObjects],
    cart: cartObject
  }
}

GTM Mapping: add_to_cart with items and value

7. Add User Info (add_user_info)

Triggered when user information is added to the cart.

Data Structure:

{
  type: 'add_user_info',
  data: {
    cart: cartObject,
    userInfo: userInfoObject
  }
}

GTM Mapping: add_shipping_info event

8. Add Voucher (add_voucher)

Triggered when a voucher is applied to the cart.

Data Structure:

{
  type: 'add_voucher',
  data: {
    cart: cartObject,
    voucher: 'voucher-code'
  }
}

GTM Mapping: select_promotion event

9. Remove Voucher (remove_voucher)

Triggered when a voucher is removed from the cart.

Data Structure:

{
  type: 'remove_voucher',
  data: {
    cart: cartObject,
    voucher: 'voucher-code'
  }
}

GTM Mapping: select_promotion with null promotion_id

10. Select Payment Method (select_payment_method)

Triggered when a payment method is selected.

Data Structure:

{
  type: 'select_payment_method',
  data: {
    cart: cartObject,
    paymentType: 'credit_card|mb_way|paypal',
    phone: 'phone-number' // for MB Way
  }
}

GTM Mapping: add_payment_info event

11. Payment Completed (paid)

Triggered when payment is successfully completed.

Data Structure:

{
  type: 'paid',
  data: {
    cart: cartObject
  }
}

GTM Mapping: purchase event with transaction details

Integration

Google Tag Manager Setup

1. Enable GTM Integration: Include the GTM script in your WordPress site
2. Import GTM Module: The GTM integration automatically listens for analytics events
3. Configure DataLayer: Events are automatically pushed to window.dataLayer

Custom Analytics Platform

To integrate with other analytics platforms, listen for the custom analytics events:

window.addEventListener('analytics', (event) => {
  const { type, data } = event.detail;
  
  // Your custom analytics implementation
  switch(type) {
    case 'view_events':
      yourAnalytics.track('Events Viewed', data);
      break;
    case 'select_event':
      yourAnalytics.track('Event Selected', data);
      break;
    // ... other cases
  }
});

Data Structure Reference

Event Object

{
  uuid: 'event-uuid',
  name: 'Event Name',
  // ... other event properties
}

Session Object

{
  uuid: 'session-uuid',
  start: timestamp,
  end: timestamp,
  availableSeats: number,
  // ... other session properties
}

Ticket Object

{
  ticketType: {
    uuid: 'ticket-type-uuid',
    name: 'Ticket Type Name'
  },
  value: price,
  quantity: number
}

Cart Object

{
  uuid: 'cart-uuid',
  totalValue: number,
  // ... other cart properties
}

Best Practices

1. Privacy Compliance: Ensure GDPR/CCPA compliance when tracking user data as we do not handle consent management
2. Performance: Analytics events are dispatched asynchronously to avoid blocking UI
3. Error Handling: Analytics failures should not affect the user experience
4. Testing: Use browser developer tools to verify events are firing correctly

Debugging

To debug analytics events in development:

// Listen to all analytics events
window.addEventListener('analytics', (event) => {
  console.log('Analytics Event:', event.detail);
});

Monitor the browser's Network tab for GTM requests, or check window.dataLayer in the console.