Tracking Conversions in iFrames with Google Tag Manager

iFrame, first of all, needs to be clarified for this question.

iFrame is an HTML tag that allows us to embed and display a different web page within another web page. By using the iFrame element, we can seamlessly integrate another website into our own website or display a specific page from a different website within our site.

To track user interactions within the iFrame, you need developer access to the web page inside the iFrame. Otherwise, tracking will not be possible.

How to Transfer Your Data from iFrame to Your Parent Frame?

You can monitor iFrame interactions by sending a JavaScript call named ‘postMessage’ from the iFrame to the parent frame. This ‘postMessage’ JavaScript call can be added for each interaction to be tracked by using code snippets within the iFrame (requested from the iFrame’s developer) or implemented through Google Tag Manager (GTM) within the iFrame.

We will proceed using Google Tag Manager. Even if you have GTM installed on your website,, it won’t be able to collect user interactions occurring within the iFrame. Therefore, GTM must also be installed within the iFrame.

Google Tag Manager operations in iFrame

You will need to decide which user actions you want to track within the iFrame. We will explain our example based on form submissions.

First, we need to set up our trigger so that it fires when the Form ID is equal to “submit”. Here, we want the trigger to always fire when the user performs the action we want to track, but not when the user interacts with the iFrame in other ways.

Now it’s time to proceed with sending the iFrame data to the parent frame, and for this purpose, we are creating a new tag. We will use the postMessage method, which transmits tracking data to the parent frame, to send the data to our parent frame through Google Tag Manager.

We will use the custom HTML tag and select the trigger as “form – submit”.

Operations in Parent Google Tag Manager

Our iFrame will send tracking data to the parent frame, so we need to listen for this data in the parent frame. Therefore, we want this listening tag to fire on the form submission page.

We set our trigger as “Page View” and select the form submission (get-offer) page.

We create a new tag for listening to iFrame data. This tag retrieves the information from postMessage and sends it to the Data Layer.

Transfer of iFrame Data to Google Analytics 4

Now that what we want to track is present in our parent frame’s Data Layer, we can send the iFrame data to the desired tools.

We write the event name used in the postMessage sending process into the Custom Event field, which we selected as the trigger.

And now the GA4 Event:

You can now send the data received from the iFrame to the desired tools. You can control the incoming data also from the dataLayer.

I hope this article has been helpful. Feel free to get in contact with us for any feedback or comments.