Step-by-Step Guide to Integrating Google Tag Manager (GTM) with the Hubtiger Widget

Sign into Google Tag Manager

Visit Google Tag Manager and sign in.
Select the GTM account you want to use.
Locate your GTM code: You’ll find your GTM ID in the top-right corner of the screen (screenshot included).

Add Your GTM Code in Hubtiger

Log into your Hubtiger account.
Navigate to Settings > Plugins > Website Widget (or click here).
Scroll down to the Google Tag Manager ID field.
Paste your GTM code into the field and click Save Configuration (screenshot included).

That’s it! Now, when the Hubtiger widget detects a GTM code, it will automatically load the GTM script with your unique GTM ID.

Setting Up GTM Tracking for iFrames:

Since the widget may load within an iframe on your site, you need to handle GTM tracking a bit differently. iFrames cannot directly send events to GTM, so we need to pass events from the iframe to the parent page.

Create a Custom Tag in GTM

Go back to Google Tag Manager, select your account.
On the left menu, click Tags > New.
Choose Tag Configuration > Custom HTML.
In the HTML field, paste the following code (adjust as needed):

<!-- Push Google tag events from iFrame to parent page event -->
<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,
          'postMessageData': data
        });
      }
      }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);
        };
      }
    }

  console.log('GTM iframe post event listener ready');

  })(window);
</script>

Set Trigger to Fire on All Pages

Scroll down to the Triggering section.
Choose All Pages as the trigger.
Your setup should now look like this (screenshot included).
Rename the tag to iFrame to Parent Page Event and click Save.
You should now see your tag created. This custom html tag will be loaded when the GTM script executes on the Hubtiger widget.

Implementing the Code on Your Website

Now, you need to adjust your website's code to handle the GTM tracking data sent from the iframe.

Add Scripts to Your Website

6.1 Add GTM to the <head> Section:

Add this first script to your site’s <head> section, replacing GTM-XXXXX with your GTM ID

 <!-- Google Tag Manager -->
 <script>
   (function (w, d, s, l, i) {
     w[l] = w[l] || []; w[l].push({
       'gtm.start':
         new Date().getTime(), event: 'gtm.js'
     }); var f = d.getElementsByTagName(s)[0],
       j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
         'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
   })(window, document, 'script', 'dataLayer', 'GTM-XXXXX');</script>
 <!-- End Google Tag Manager -->

6.2 Add GTM No-Script Tag in <body>:

Add the following right after the <body> open tag:

<!-- Google Tag Manager (noscript) -->
<noscript>
  <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXX"
          height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->

6.3 Add the Event Processor Script to the Bottom of the </body>:

Scroll to the bottom of your page and add this script just above the

<script>
  // Function to listen for messages from the iframe
  window.addEventListener('message', function (event) {
    const eventData = event.data;

    // Ensure the data has the expected format
    if (eventData && eventData.event && eventData.data && eventData.label) {
      // Push the event data to Google Tag Manager
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: eventData.event,
        data: eventData.data,
        label: eventData.label
      });

      console.log('Event sent to GTM from parent page:', eventData);
    }
  }, false);
</script>

Your full HTML should look like this now:

Test Your Setup

7. Use GTM Preview Mode

Go back to Google Tag Manager and click Preview to test.
Enter your website’s URL and click Connect.
You’ll see your site load in a new tab with the GTM debugging tools (screenshot included).
As you interact with the widget, GTM events should be logged (look for the ones from the iframe).
Click on an event to view the detailed event data in the Data Layer tab.

The preview debug screen explained:

At the top of the page it will show all the GTM tags recognized on the website.
It shows your GTM tag was loaded.
Which additional Tags setup is fired and loaded - the one we created to push events from the iframe to the parent page.
The different events from the Hubtiger widget iframe for GTM tracking.
You can click on an event and click on Data Layer to see the event details and data tracked.

Conclusion

That’s it! By following these steps, you’ll have GTM fully integrated and tracking events from the Hubtiger widget, even if it’s loaded in an iframe. If you encounter any issues, use GTM’s Preview Mode to troubleshoot.