Tracking Embedded Ticketing and Booking in Google Tag Manager with Oveit

When embedding ticketing or booking widget in your website, tracking eCommerce events with Google Tag Manager (GTM) can be tricky. If both the website and the embedded form use GTM separately, the standard tracking setup will not record events correctly—because the tracking is present on both sides, but it doesn’t trigger twice.

The solution? Using two GTM accounts—one connected to the ticketing and booking software ( Oveit ) and one on the main attraction or event website. We then pass event data between them using custom JavaScript code. This ensures that all key interactions (viewing tickets, adding them to the cart, beginning checkout, and completing purchases) are properly tracked in Google Analytics.

Let’s go step by step to see how you can implement this.

Step 1: Setting Up Two GTM Accounts #

To make this work, you will need:

1. A GTM account for your main attraction or event website (where eCommerce event data will be recorded).

2. A GTM account for the Oveit booking and ticketing widget (embedded in your website).

Each of these will track the four standard eCommerce events:

• view_item_list (viewing ticket options)

• add_to_cart (selecting a ticket)

• begin_checkout (starting checkout)

• purchase (completing a purchase)

Since the booking and ticketing widget is loaded inside an iframe, these events do not automatically pass to the website’s GTM account. That’s where our custom integration comes in.

Step 2: Sending Event Data from the Oveit Registration Form #

In the GTM account connected to Oveit, we must send eCommerce events to the main website GTM. This is done using postMessage().

Here’s an example of a sender script for the view_item_list event:

<script>
  try {
      var postObject = JSON.stringify({
        event: 'view_item_list', 
        ecommerce: {{DLV ecommerce}}
      });
      parent.postMessage(postObject, 'https://www.funwebsite.com/');
} catch(e) {
  window.console && window.console.log(e);
}
</script>

Important Notes:

• Replace https://www.funwebsite.com/ with the actual URL of your event website.
• You need four separate scripts (one for each event: view_item_list, add_to_cart, begin_checkout, purchase).
• {{DLV ecommerce}} is a Data Layer Variable that captures ecommerce data and sends it along with the event.

Important notes – in your Oveit GTM account, you should:

✅ Define a Data Layer Variable named ecommerce (this will store purchase-related data).

✅ Create User-Defined Variable: Oveit DataLayers, with the Data Layer Variable Name set to ecommerce.items.

✅ Create four tags—one for each event.

✅ Attach the four sender scripts as custom HTML tags in GTM.

Step 3: Receiving and Recording Events in the Main Website GTM #

Now that the event data is being sent from the Oveit GTM, we need to capture it in the main GTM account and push it into Google Analytics.

We do this using a postMessage listener script, which will be added to the event website:

<script type="text/javascript">
(function(window) {
    addEvent(window, 'message', function(message) {
      try {
      var data = JSON.parse(message.data);
      var dataLayer = window.dataLayer || (window.dataLayer = []);
      if (data.event) {
        dataLayer.push({
          'event': data.event,
          'ecommerce': data.ecommerce
        });
      }
      } catch(e) {}
    });

    // Cross-browser event listener
    function addEvent(el, evt, fn) {
      if (el.addEventListener) {
        el.addEventListener(evt, fn);
      } else if (el.attachEvent) {
        el.attachEvent('on' + evt, function(evt) {
          fn.call(el, evt);
        });
      } else if (typeof el['on' + evt] === 'undefined' || el['on' + evt] === null) {
        el['on' + evt] = function(evt) {
          fn.call(el, evt);
        };
      }
    }

})(window);
</script>

What This Does:

✅ Listens for messages sent from the Oveit GTM account.

✅ Reads the event type (view_item_list, add_to_cart, etc.).

✅ Pushes the event data into the main website’s Data Layer.

Step 4: Connecting Everything in GTM #

In the Main Website GTM, you now need to:

✅ Create four event triggers (view_item_list, add_to_cart, begin_checkout, purchase).

✅ Set up four tags to send these events to Google Analytics.

✅ Ensure the Data Layer Variable for ecommerce is set up properly.

Final Thoughts

This approach ensures that all key eCommerce interactions from the embedded form are recorded properly—without missing data or duplicate tracking.

If you’re using Google Analytics 4 (GA4), this setup helps you get:

• Accurate tracking of the ticket purchase flow
• Insights on drop-off points in the attraction booking and ticketing process
• Better conversion optimization for your attraction ticket sales

By following these steps, you can ensure your embedded Oveit registration form tracks every interaction and understand exactly where your conversions (or dropoffs) are coming from.