Tracking web analytics Events in an iFrame: What can go wrong and how can it be fixed?

How iFrames Work and Why They Interfere with Web Analytics

An iframe (short for inline frame) is an HTML element that allows one webpage to be embedded inside another. It’s commonly used when you want to display third-party content—like videos, forms, or apps—without fully integrating that content into your site’s codebase.

Common Examples of iFrame Use:

• Embedded YouTube videos
• Google Maps
• Third-party chat widgets or forms
• Payment gateways

In our case, the chatbot was served via an iframe hosted on a different domain.

We were unable to track chatbot events (such as form submissions) because the chatbot was loaded in an iframe. Our initial solution—placing GTM within the iframe—wasn’t successful due to cross-domain problems. The solution? Using `postMessage` to send data from the iframe to the parent page, then pushing it to the dataLayer.

Why Was Tracking an iFrame with Web Analytics So Challenging?

We needed to monitor significant interactions from our embedded chatbot—form submissions and message types, for example. Under normal circumstances, with Google Tag Manager (GTM), monitoring is relatively easy.

But this chatbot resided within an **iframe**, and that made all the difference.

What Did We Try First?

We thought – Why not simply include GTM within the iframe and trigger events from there?

So we did just that:

• Included GTM in the iframe
• Hardcoded ‘dataLayer.push()’ calls within the chatbot code
• Attempted to capture those events from the parent GTM container

But… nothing appeared in the parent GTM.

Why was the first attempt to track using an Iframe not working? 

It turns out, it was a cross-domain communication issue.

Browsers are designed to isolate iframes from their parent windows, especially when they’re hosted on different domains. This is a security feature known as the same-origin policy, and it exists to prevent malicious scripts from one site accessing sensitive information on another.

In our case, that meant the parent page couldn’t directly access or listen to the dataLayer inside the iframe. Even though both pages were working together functionally, from the browser’s perspective, they were treated as completely separate and untrusted.

This isolation is crucial for protecting users’ data—but it also means that traditional tracking methods (like GTM inside the iframe) don’t work across domains. Without a secure way to bridge the communication gap, key user interactions inside the iframe remain invisible to the analytics tools running on the parent page.

That’s why our first approach failed—and why we needed a more robust, browser-approved way to pass data between the two.

So our solution was broken from the beginning.

What did we need to do to get iframe web analytics working?

We changed to utilising **postMessage**, a browser API for securely communicating between windows—incidentally including iframes and parent pages.

1. Send a message from the iframe

/code/

2. Listen for the message on the parent page

/code/

3. Capture it in GTM

Create a Custom Event Trigger for chatFormSubmitted, and use GTM variables like messageType, name, or email as needed in your tags.

4. The kind of reports to create for chatbot tracking

Once we had tracking in place using postMessage and GTM, we were able to unlock a range of valuable insights from chatbot interactions. Here are some of the key reports you can create to better understand user behaviour and the chatbot’s impact:

1. Form Submission Reports

Track how many users submitted forms through the chatbot. You can break this down further by:

• Message type (e.g., support request, lead inquiry, feedback)
• Completion rates over time

2. Engagement Reports

Understand how users are interacting with the chatbot:

• Number of chatbot sessions
• Average number of messages exchanged
• Drop-off points where users stop engaging

3. Intent & Message Type Analysis

Identify what users are coming to the chatbot for:

• Which message types are most common
• Trends in user intent (e.g., more sales inquiries vs. support questions)

4. Lead Quality Metrics

If your chatbot collects names or emails, you can report on:

• Number of submissions with valid contact information
• Conversion rates based on message types

⚠️ Important Note: While it may be technically possible to capture personal data like names or email addresses, doing so directly in tools like Google Analytics is against Google’s policies and may violate data privacy laws (such as GDPR or CCPA).

Always ensure that personal data is either anonymised or handled through compliant, secure systems—never sent directly to GA4 or stored in the dataLayer in plain text.

5. Conversion Funnel Reports

Visualise the full user journey:

• Users who engaged with the chatbot → submitted a form → completed a key action (like signing up or requesting a demo)
• Compare conversion rates between chatbot users and non-chatbot users

6. Device and Location Reports

Analyse where and how users are engaging:

• Are users mostly on mobile or desktop?
• Which locations or regions show higher chatbot engagement?

These reports can be set up in GA4, Looker Studio, or any other analytics tool you’re using—depending on your tech stack and reporting needs.

What We Learned

• Don’t try to track directly from inside an iframe using GTM—it won’t work across domains.
• Use `postMessage` to bridge communication between the iframe and the main page.
• Always check data received from `postMessage` before using it (we’re simplifying here for the sake of clarity).

Final Thoughts

If you’re putting a chatbot (or any third-party app) inside an iframe, tracking is tricky—but completely possible with proper setup.