Google Analytics 4 Integration

TicketingHub Google Analytics 4 Integration

Overview

This document describes how the TicketingHub V2 checkout widget integrates with and sends data to Google Analytics 4 (GA4) via gtag.js. The V2 widget automatically sends e-commerce events to your GA4 property, enabling you to track how visitors interact with your checkout flow, analyze customer behavior, and measure conversion performance.

The widget supports two analytics transports: Google Analytics 4 (gtag.js) and Google Tag Manager (gtm.js). Pick one per widget. This article covers the GA4 transport. See the Google Tag Manager integration article for the GTM path.


How to Install Google Analytics on Your Page

If you already have GA4 installed on your website, the TicketingHub widget will automatically detect and use your existing gtag.js configuration. No additional setup required.

  1. In the TicketingHub Dashboard, go to Checkout Widget Settings
  2. Expand the Google Analytics section
  3. Enable "Enable Google Analytics"
  4. Set "Send events via" to Google Analytics 4 (gtag.js) (this is the default)
  5. Select "Use existing tag" (this is the default)
  6. Save your changes

The widget will detect any GA4 tag present on your page (via window.gtag) and send events to it.


Option 2: Use Custom Measurement ID

If you want to track widget events to a different GA4 property than the one already on your page (or your site doesn't have GA4 yet):

  1. Get your GA4 Measurement ID from Google Analytics:
    • Go to Google Analytics > Admin > Data Streams
    • Select your web stream
    • Copy the Measurement ID (format: G-XXXXXXXXXX)
  1. In the TicketingHub Dashboard:
    • Go to Checkout Widget Settings
    • Expand the Google Analytics section
    • Enable "Enable Google Analytics"
    • Set "Send events via" to Google Analytics 4 (gtag.js)
    • Select "Use custom tag"
    • Enter your Measurement ID (e.g., G-XXXXXXXXXX)
    • Save your changes

The widget will load gtag.js for that Measurement ID on the parent page (skipped automatically if the same tag is already present). Widget events are scoped to your configured Measurement ID via the send_to parameter, so they do not leak into other GA tags registered on the same page.


Debug Mode

To verify events are being sent correctly:

  1. Enable "Enable analytics debug logging" in the Google Analytics section
  2. Open your browser's Developer Console (F12)
  3. Each event the widget sends is logged to the console as it fires (Triggering GA event …)
  4. Use GA4 DebugView in real-time to confirm the events arrive in your property
Debug logging in the widget is widget-side only — it confirms the widget called gtag("event", …). It does not replace GA4 DebugView, which is where you verify that GA4 received and processed the event.When you enable analytics debug logging, the widget also sets debug_mode: true on its GA4 configuration, so events show up in DebugView automatically without extra setup. Remember to turn it off before going live.
Note: Some WordPress caching or optimization plugins can interfere with GA4. Try disabling them temporarily or add GA4 scripts to their exclusion list.


Important: Disable Ad Blockers When Testing

Ad blockers and privacy extensions (such as uBlock Origin, AdBlock Plus, Privacy Badger, Ghostery, etc.) commonly block Google Analytics tracking requests. When testing your GA4 setup:

  • Temporarily disable any ad blocker or privacy extension in your browser
  • Use an incognito/private window without extensions enabled
  • Or whitelist your website and google-analytics.com in your ad blocker settings

If events are not appearing in GA4 DebugView, an ad blocker is often the cause.


Events Sent to Google Analytics 4

The TicketingHub widget sends the following GA4 events via gtag("event", name, params).

1. Page View Events (page_view)

Tracked whenever a customer navigates to a different step in the checkout flow.

Event Parameters:

page_title: string          // e.g., "Booking Success"
page_path: string           // e.g., "success"
page_location: string       // Host URL of the page
widget_id: string           // Widget identifier
start_date: string          // (date_and_time_selection only) ISO8601 format
selected_date: string       // (date_and_time_selection only) ISO8601 format


2. Item Selection Events (select_item)

Triggered when a customer selects a product, variant, gift card, or merchandise item from the main list.

Trigger Points:

  • User selects a product from the sellable list
  • User selects a variant
  • User selects a gift card or merchandise item

Event Parameters:

item_list_id: string        // Product ID or widget ID
item_list_name: string      // "Sellable List", "Variant List", etc.
items: [
  {
    item_id: string         // Product/variant/merchandise ID
    item_name: string       // Product/variant name
    item_category: string   // "Product", "Variant", "Merchandise", "Package"
  }
]
select_item fires only on initial product/package selection from the main list — it does not re-fire for intermediate variant/tier selection, to avoid inflating "Items selected" metrics.


3. Cart and Checkout Events

The full GA4 checkout funnel is supported:

  • add_to_cart
  • view_cart
  • begin_checkout (includes coupon when a discount is applied)
  • add_payment_info (includes payment_type)

All of them carry currency, value, items, widget_id, order_id, locale, and page_location, using the standard GA4 item shape.


4. Purchase Events (purchase)

Triggered when an order is successfully completed. This is the main conversion event for e-commerce tracking.

Event Parameters:

transaction_id: string      // Order reference number
value: number               // Order total (decimal)
currency: string            // Currency code (e.g., "GBP", "USD", "EUR")
items: [
  {
    item_id: string         // Ticket reference
    item_name: string       // Tier name
    item_brand: string      // Product name
    item_category: string   // Tier type
    item_variant: string    // Variant name (if applicable)
    price: number           // Individual ticket price (decimal)
    quantity: number        // Always 1 (one entry per ticket)
  }
]


GA4 Reports You Can Use

With this integration, you can analyze:

  • Funnel Analysis: Track drop-off at each checkout step using page_view events
  • Product Performance: See which products/variants are selected most via select_item events
  • Revenue Reports: Use the purchase event for e-commerce revenue tracking
  • Conversion Rate: Compare visitors to successful purchases
  • Real-time Monitoring: Use DebugView to test your integration


Troubleshooting

Events Not Appearing in GA4

  1. Check analytics debug logging: Enable it in widget settings and check the browser console — you should see Triggering GA event <name> lines as you click through the checkout. If you don't see these, the widget isn't sending.
  2. Verify Measurement ID: Ensure the ID matches your GA4 property. A common mistake is configuring a Measurement ID for a different property than the one you're checking in DebugView.
  3. Check DebugView: With analytics debug logging on, events should appear in GA4 DebugView within a few seconds.
  4. Caching plugins: WordPress caching or optimization plugins may interfere — add GA4 to exclusion lists.
  5. Wait time: Standard GA4 reports can take 24–48 hours; use Realtime / DebugView for immediate verification.


Custom Measurement ID Not Working

If you're using "Use existing tag":

  • Ensure GA4 is properly installed on the parent page before the widget loads (gtag.js must define window.gtag).
  • The widget detects gtag.js implementations only. If your site runs Google Tag Manager without a GA4 Configuration tag exposing window.gtag, the widget will warn and stop. In that case either switch to "Use custom tag" with a Measurement ID, or switch the transport to Google Tag Manager (gtm.js).


I'd rather receive raw events myself

If you'd prefer to handle analytics outside of GA4, the widget always emits raw th:<event_name> postMessages to the parent window in addition to gtag. See: Custom Widget Analytics Integration.



Looking for a custom way of integrating with analytics?

Updated on: 23/04/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!