Google Tag Manager Integration

TicketingHub Google Tag Manager Integration

Overview

This document describes how the TicketingHub V2 checkout widget integrates with and sends data to Google Tag Manager (GTM). When you choose the GTM transport, the widget pushes e-commerce events to your window.dataLayer so your existing GTM container can route them to GA4, Google Ads, Meta Pixel, or any other tag you already manage from GTM.

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 GTM transport. See the GA4 integration article for the gtag path.


How to Install Google Tag Manager on Your Page

If you already have GTM installed on your website, the TicketingHub widget will push events directly into the container that's already loaded on the page. 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 Tag Manager (gtm.js)
  5. Select "Use existing tag" (this is the default)
  6. Save your changes

The widget will detect any real GTM container on the page (it looks for a GTM-… key on window.google_tag_manager) and push events to its dataLayer. The check runs per-event, so a container that loads slightly after the widget will still pick up later events.


Option 2: Use Custom Container ID

If you want the widget to load and push events into a different GTM container than the one on your site (or your site doesn't have GTM yet):

  1. Get your GTM Container ID from Google Tag Manager:
    • Sign in to Google Tag Manager
    • Open the container
    • Copy the Container ID at the top of the workspace (format: GTM-XXXXXXX)
  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 Tag Manager (gtm.js)
    • Select "Use custom tag"
    • Enter your Container ID (e.g., GTM-XXXXXXX)
    • Save your changes

The widget will inject gtm.js for that container on the parent page (skipped automatically if the same container is already loaded).


Debug Mode

To verify events are being pushed to dataLayer correctly:

  1. Enable "Enable analytics debug logging" in the Google Analytics section
  2. Open your browser's Developer Console (F12)
  3. Each pushed event is logged to the console as it fires (Triggering GTM event …)
  4. Use GTM Preview (Preview button in Tag Manager) to see how your tags fire on the incoming events in real time
Debug logging in the widget is widget-side only — it confirms the widget pushed an event to dataLayer. It does not replace GTM Preview (for tag firing) or GA4 DebugView (for verifying GA4 tags inside GTM).


Note: Some WordPress caching or optimization plugins can interfere with analytics scripts. Try disabling them temporarily or add the relevant 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 GTM and the downstream tags it loads (GA4, Ads, Meta, etc.). When testing your GTM setup:

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

If events are not appearing in GTM Preview or downstream reports, an ad blocker is often the cause.


Events Pushed to window.dataLayer

The widget pushes events using the standard GA4 e-commerce dataLayer shape:

  • Standard GA4 e-commerce fields (currency, value, items, coupon, transaction_id, item_list_id, item_list_name) are nested under an ecommerce object.
  • Everything else (widget_id, page_location, order_id, locale, etc.) stays at the root of the push.
  • When ecommerce data is present, an { ecommerce: null } clear push is sent first so previous values don't leak between events.

Example shape for a generic e-commerce event:

window.dataLayer.push({ ecommerce: null });
window.dataLayer.push({
  event: 'add_to_cart',
  ecommerce: {
    currency: 'GBP',
    value: 42.0,
    items: [ /* … */ ],
    coupon: 'SUMMER10'
  },
  order_id: 'ORD-1234',
  locale: 'en',
  widget_id: 'a756e1cf-…',
  page_location: 'example.com'
});

In GTM, configure your tags to read these via standard GA4 ecommerce variables / built-in {{Ecommerce}} variable, with custom Data Layer Variables for the root-level fields you need (widget_id, order_id, etc.).

The widget pushes the following events:


1. Page View Events (page_view)

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

{
  event: 'page_view',
  page_title: 'Booking Success',
  page_path: 'success',
  page_location: 'example.com',
  widget_id: 'a756e1cf-…',
}

page_view has no e-commerce fields, so nothing is nested under ecommerce.


2. Item Selection Events (select_item)

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

{
  event: 'select_item',
  ecommerce: {
    item_list_id: '<product-id-or-widget-id>',
    item_list_name: 'Sellable List',
    items: [
      {
        item_id: '<product/variant/merchandise id>',
        item_name: '<name>',
        item_category: 'Product' // or 'Variant', 'Merchandise', 'Package'
      }
    ]
  },
  widget_id: 'a756e1cf-…',
  page_location: 'example.com'
}
select_item fires only on initial product/package selection from the main list — it does not re-fire for variant/tier selection, to avoid inflating "Items selected" metrics.


3. Cart and Checkout Events

The full GA4 funnel is supported and uses the same e-commerce shape:

  • add_to_cart
  • view_cart
  • begin_checkout (includes coupon when applicable)
  • add_payment_info (includes payment_type)

All of them follow the same { ecommerce: { currency, value, items, … }, widget_id, order_id, locale, page_location } pattern shown above.


4. Purchase Events (purchase)

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

{
  event: 'purchase',
  ecommerce: {
    transaction_id: 'ORD-1234',
    value: 42.0,
    currency: 'GBP',
    items: [
      {
        item_id: '<ticket reference>',
        item_name: '<tier name>',
        item_brand: '<product name>',
        item_category: '<tier type>',
        item_variant: '<variant name>', // when applicable
        price: 21.0,
        quantity: 1 // always 1 — one entry per ticket
      }
    ]
  },
  widget_id: 'a756e1cf-…',
  order_id: 'ORD-1234',
  locale: 'en',
  page_location: 'example.com'
}


Setting Up Tags in GTM

To turn these dataLayer pushes into reports inside Google Analytics 4:

  1. In Google Tag Manager, create a GA4 Configuration tag (or Google Tag) with your Measurement ID, firing on All Pages.
  2. For each event you want to forward to GA4, create a GA4 Event tag:
    • Event Name: use a Data Layer Variable that reads event (or hard-code purchase, add_to_cart, etc.)
    • Event Parameters: leave empty if you're using the built-in {{Ecommerce}} variable (recommended), or map individual fields as Data Layer Variables.
    • Trigger: Custom Event, with the event name matching purchase, add_to_cart, etc.
  1. For the conversion event, create a Custom Event trigger on conversion and attach your Google Ads conversion / Meta Pixel / etc. tag.


GA4 / GTM 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 — feeds GA4's standard Monetization reports when wired up via the GA4 Event tag
  • Conversion Rate: Compare visitors to successful purchases
  • Real-time Monitoring: Use GTM Preview to confirm tags fire, and GA4 DebugView (or your downstream platform's debug tools) to confirm events arrive


Troubleshooting

Events Not Appearing

  1. Check Debug Mode: Enable analytics debug logging in widget settings and check the browser console — you should see Triggering GTM event <name> lines as you click through the checkout. If you don't see these, the widget isn't pushing.
  2. Check GTM Preview: Open the Tag Manager Preview pane. Each widget event should appear as a row in the Data Layer / Events panel. If pushes appear in the console but not in Preview, you may have the wrong Container ID configured.
  3. Verify Container ID: Ensure the ID matches your active GTM container.
  4. Check your tags: In GTM Preview, click an event and confirm your GA4/Ads/Meta tags fired with the parameters you expect. If dataLayer shows the data but no tag fired, the tag's trigger condition is probably wrong.
  5. Caching plugins: WordPress caching/optimization plugins may strip or defer gtm.js — add it to exclusion lists.
  6. Wait time: GTM Preview is real-time, but standard GA4 reports can take 24–48 hours; use GA4 Realtime / DebugView for immediate verification.


Custom Container ID Not Working

If using "Use existing tag":

  • Make sure GTM is installed on the parent page before the widget loads.
  • The widget specifically looks for a real GTM container key on window.google_tag_manager (matching GTM-…). A page that only runs gtag.js without GTM will not be detected, and events will not be pushed. In that case switch to "Use custom tag" with your Container ID, or switch the transport to GA4.


I'd rather receive raw events myself

If you'd prefer to handle analytics outside of GA/GTM, the widget always emits raw th:<event_name> postMessages to the parent window in addition to whichever transport you chose. 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!