Skip to main content
All CollectionsReporting
Tracking User Interactions in Our Widget
Tracking User Interactions in Our Widget

Track your event registration journey in Google Analytics via our widget integration, reducing drop off and increasing conversions

Aaron Bird avatar
Written by Aaron Bird
Updated over a month ago

Why Event Tracking Transforms Your Business Results

Unlock powerful insights into your event registration process without technical complexity. By connecting our widget to Google Analytics, you'll identify exactly where potential attendees abandon bookings, understand which events generate the most interest, and discover opportunities to increase conversion rates—all translating directly to improved ticket sales and revenue growth.

Systems Involved in Tracking

Before diving into the specifics of tracking interactions with our widget, let's briefly understand the two key systems involved:

Google Tag Manager (GTM) is a tag management system that allows you to deploy and manage various marketing and analytics tags on your website without modifying the code. Think of it as a container that holds all your tracking codes and determines when they should fire based on specific user actions.

Google Analytics (GA) is an analytics platform that collects, processes, and organises data about user behaviour on your website. It transforms raw interaction data into meaningful reports that help you understand how users engage with your content and features.

While our companion video demonstrates how the tag fires at key interaction points within the widget, this guide will explain how to ensure this valuable data reaches Google Analytics for analysis.

Setting Up the Data Flow from Our Widget to Google Analytics

Step 1: Install the Base GTM Container

  1. Log in to your Google Tag Manager account

  2. Copy your GTM container code (it looks like: GTM-XXXXXXX)

  3. Add this code to your account settings in our platform under "Meta Tags & Tracking" → "Google Tag Manager"

  4. Save your changes

Step 2: Understand Widget Events

Our widget automatically pushes the following events to the data layer during the user journey:

History Change Events

These events track the user's progress through different stages:

  • Ticket Select: When a user selects one or more tickets

    { event: "page_view", gtm: {uniqueEventId: 4, start: 1741249960881}, pageTitle: "Ticket Select" }

  • Participant Form: When a user begins completing the form

  • Checkout: When a user reaches the payment page

  • Checkout Complete: When a user completes the checkout process

Purchase Event

This event fires when a transaction is successfully completed:

{ event: "purchase", gtm: {uniqueEventId: 10, start: 1741249960881}, pageTitle: "Payment Completed", currency: "GBP", value: 4265, transaction_id: "INV_1819933_", items: [ { item_category: "participant", currency: "GBP", price: 4265, discount: 0, item_name: "Tracked Event Half Marathon - Demo User", index: 1, quantity: 1, item_id: 31742, participant: { id: 1750564, occasion_id: 11037, first_name: "Demo", last_name: "User", email: "[email protected]" } } ] }

Step 3: Create Custom Triggers in GTM

  1. In GTM, navigate to "Triggers" and click "New"

  2. Create triggers for History Change events:

    • Name: "Widget - Ticket Select Page"

    • Trigger Type: "Custom Event"

    • Event Name: "page_view"

    • Fire this trigger when: "pageTitle equals Ticket Select"

    • Save the trigger

  3. Repeat for other History Change events (Participant Form, Checkout, Checkout Complete)

  4. Create a Purchase Event trigger:

    • Name: "Widget - Purchase Completed"

    • Trigger Type: "Custom Event"

    • Event Name: "purchase"

    • Save the trigger

Step 4: Create GA4 Tags for Each Event

  1. Go to "Tags" in GTM and click "New"

  2. For History Change events:

    • Name: "GA4 - Page View - Ticket Select"

    • Select "Google Analytics: GA4 Event" as the tag type

    • Enter your GA4 Measurement ID

    • Event Name: "page_view"

    • Parameters:

      • page_title: {{pageTitle}}

    • Select the corresponding trigger ("Widget - Ticket Select Page")

    • Save the tag

  3. For the Purchase event:

    • Name: "GA4 - Purchase Completed"

    • Select "Google Analytics: GA4 Event" as the tag type

    • Enter your GA4 Measurement ID

    • Event Name: "purchase"

    • Parameters:

      • transaction_id: {{transaction_id}}

      • value: {{value}}

      • currency: {{currency}}

      • items: {{items}}

    • Select the "Widget - Purchase Completed" trigger

    • Save the tag

Step 5: Test Your Configuration

  1. Enable Preview mode in GTM

  2. Navigate to your website and interact with the widget

  3. Verify in the GTM debug panel that events are firing correctly

  4. Check Google Analytics real-time reports to confirm data is flowing

Analysing Widget Performance in Google Analytics

Once your tracking is properly configured, you can gain valuable insights from Google Analytics:

Key Reports to Explore

  1. Conversion Funnel Analysis: Create a funnel visualisation from Ticket Select to Purchase Completed to identify drop-off points

  2. Engagement Metrics: Monitor time spent on each step, completion rates, and abandonment points

  3. Revenue Analysis: Track total revenue, average transaction value, and conversion rates

  4. User Segmentation: Analyse performance across different user segments and demographics

Setting Up Custom Reports

  1. In Google Analytics, navigate to "Explore"

  2. Create a new exploration based on your widget events

  3. Add metrics like completion rate, average order value, and conversion time

  4. Segment by user type, device, or traffic source for deeper insights

By leveraging the data flowing from our widget through Google Tag Manager to Google Analytics, you can make data-driven decisions to optimise your forms, improve user experience, and ultimately increase conversions.

Did this answer your question?