MeasureSchool logo
Search
Close this search box.
Search
Close this search box.

GA4 Iframe Tracking with Google Tag Manager

Last Modified on December 27, 2023

Are you looking into iframe tracking in GA4?

Tracking iframes in Google Analytics 4 can sometimes be complicated, but we will show you a method for making it work with Google Tag Manager.

GTM For Beginners

Sign up to the FREE GTM for Beginners Course...

We will dive into the practical steps for iframe tracking with Google Tag Manager, which include identifying iframes, installing GTM, and ensuring accurate data transmission to GA4.

Whether dealing with a simple iframe or a more complex setup, this guide provides essential insights and tips to enhance your tracking capabilities.

Here is an overview of what we’ll cover:

Let’s dive into iframe tracking with Google Tag Manager!

What is an Iframe?

An iframe, or inline frame, is an HTML element that allows you to embed another HTML document within a webpage. It is used to insert content from another source, such as a video, map, or web page, into the current document. This creates a “frame” within the webpage, where the embedded content is displayed independently of the rest of the page’s content.

In our case, we have this demo shop where we have an iframe installed.

Demo shop with an iframe installed

First, how do you know if you are dealing with an iframe? Sometimes, it is not as apparent as in our example.

One clue is when you right-click inside the iframe, you see these two additional options: View Frame Source and Reload Frame.

Additional iframe options upon right-clicking

These options are the first hint that you are dealing with an iframe.

If you click on the View Page Source option, it will open the HTML code on a new tab. Here, you will notice that the URL domain is inconsistent with our demo shop URL.

Iframe URL

Looking at our demo shop, the URL is in a different domain, which is the second hint that we have an iframe.

Demo shop URL

If we open the iframe URL, we open up the other website contained in the iframe.

The website contained in the iframe

Finally, you can check the third hint by right-clicking inside the iframe on the demo shop and selecting Inspect.

Inspecting the demo shop HTML code

It will open the Chrome Developer Tools. Then, look through the DOM tree, and when you see the iframe element, it is a telltale sign that you are working with iframes.

Iframe element in the HTML code of the demo shop

You can see the iframe URL and all the HTML code inside this website.

Now, you need to imagine that an iframe is another website installed within your website. Therefore, Google Tag Manager doesn’t have access to it.

That is why tracking iframes is difficult. Because we only installed Google Tag Manager on the parent frame, iframe tracking in Google Analytics 4 becomes challenging.

Only the parent frame is visible to Google Tag Manager. Once your mouse goes into the iframe, nothing is trackable anymore, and you cannot track any button clicks or form submissions unless you have access to the iframe.

The prerequisite for our GA4 iframe tracking with Google Tag Manager is being able to edit the iframe and install GTM into it.

How to Track Iframes with Google Tag Manager

In our case, our iframe is on Replit. Since I created this website, I can go into Replit and edit the source code myself.

Replit editing workspace

What will we edit here? We want to install Google Tag Manager on this website.

Before that, we must create a separate GTM container for our iframe.

Different GTM containers for the iframe and parent frame

We don’t have any tags yet on our iframe container, and we will create our tags later. First, we have to install our GTM snippet on our website.

💡 Top Tip: Here is a more in-depth guide on installing Google Tag Manager.

Click on the GTM ID to open the code snippet window.

Opening the code snippet window by clicking on the GTM ID

Copy the first snippet of the code.

Copying the first GTM code snippet

Next, paste this code as high up in the head section of our iframe code as possible.

Pasting the first GTM code snippet to the iframe code

Next, copy the second snippet of code.

Copying the second GTM code snippet

Paste this code immediately after opening the body tag.

Pasting the second GTM code snippet to the iframe code

Finally, click Run to save the changes to our code.

Saving the changes to the iframe code

Since our iframe has two pages, we must install this code to both pages for GTM to run correctly. Follow the same steps to install GTM on our thank you page.

Installing the GTM snippet codes in the iframe thank you page

If your iframe has multiple pages, ensure you install GTM on each page.

With that, we should have Google Tag Manager running on our iframe. How can we test it? We can go into the GTM preview mode.

In your GTM container, click Preview.

Entering the GTM preview mode

Next, enter your website URL and click Connect.

Connecting the Tag Assistant to your website

Here we go! We get to the iframe, and the Tag Assistant is now connected. We can now track any interaction on the iframe with the help of Google Tag Manager.

Let’s click the Track Me button.

Clicking the Track Me button

We should reach the thank you page.

Iframe thank you page

When we go to the Tag Assistant, GTM successfully detects our iframe homepage and thank you page.

Successful implementation of GTM on the iframe pages

Since we can now track interactions inside our iframe, we can facilitate iframe tracking with Google Tag Manager. You need to install GTM to make this work.

Unfortunately, if you do not have access to the iframe, iframe tracking with Google Tag Manager will become more difficult. You must ask the developer of the iframe to give you access, install GTM, or provide you the information differently, for example, a data layer push.

💡 Top Tip: If you proceed with the last option, check out our guides on the Data Layer Variable and Scraping Data with the Chrome Developer Tools and GTM, where we utilize custom JavaScript variables.

Fortunately, we have access to our iframe. With our iframe, we can now pick up interactions. For example, we have the Track Me button, and we can install a link click trigger to track whenever users click this button.

Go to GTM and create a new trigger. Select the Click – All Elements trigger configuration. Next, name our trigger.

Creating a button click trigger

Set the firing condition to Click Text contains Track Me for the trigger setup. Finally, click Save.

Button click trigger configuration

Now, we are going to go and connect this trigger to a tag. Let’s create a test tag here.

Create a Custom HTML tag configuration and write a simple HTML code with a start and end script element.

Creating a test custom HTML tag

Select our button trigger, provide a tag name, and click Save.

Test custom HTML tag configuration

Let’s see if this works. Go back into the preview mode and click the Track Me button. In the Tag Assistant, we should have a Click event. Here, the test tag should fire successfully.

Test tag fired on the click event

Sending the Data to Google Analytics 4

Your first instinct may be to install a Google Analytics tag on our iframe and send that data over. The problem with this approach is that it will lead to duplicate tracking.

When a user visits our demo shop, the Google Analytics tag will fire inside the parent frame and again inside the iframe.

What we want to do instead is to transfer this information from the iframe to the parent frame. This way, the parent frame will handle all the data transfer to Google Analytics 4.

To do this, you will need this post message sending API. I have created this little bit of code for you to install, and it has two parts. First, we have this postMessage_Listener code.

Post message listener code

Next, we have the postMessage_Sender code.

Post message sender code

The post message sender code will send over the data, while the post message listener code will receive the data. First, let’s implement the post-message sender code to the iframe.

🚨 Note: Access our postMessage Listener & Sender codes here.

Let’s edit our test custom HTML tag. Paste in our post message sender code.

Pasting the post message sending code to the custom HTML tag

Next, we will alter a few details with our code. But before that, let’s copy the URL of our demo shop page with the parent frame.

Copying the parent frame URL

First, what event should we send to the data layer? We have the iFrameForm Submit, but we will change it to click. Next, determine what other information you want to send over. For example, we want to send the click_text. Let’s set its value to the Click Text variable.

Finally, provide the domain you want to reach and send this information. In our case, it is our demo shop with the parent frame. Paste this URL.

Editing the post message sending code

Let’s change the tag name to something more descriptive. Then, click Save.

Saving the post message sender tag

Preview the implementation and click the Track Me button again. Our post-message sender tag should still fire during the click event.

Successful firing of the post message sender tag

Great! We have sent over the click event with the post-message sender tag. Under the parent frame, however, you won’t see anything yet because we are not listening for any event to import to our GTM container.

Let’s quickly switch to the parent frame GTM container and install our post-message listener tag.

Switching to the parent frame GTM container

In this GTM container, we already have the Google tag installed. This tag essentially stores your tag ID and connects to your GA4 property.

GA4 Google tag in the parent frame GTM container

💡 Top Tip: Follow our guide if you have not installed Google Analytics 4 on your website yet. The Google tag replaces the GA4 configuration tag, and you will use the tag ID instead of the measurement ID upon setup.

We want to set up the tag to receive the information our iframe sent. Go ahead and create another custom HTML tag. Paste the post message listener code and name our tag.

Creating the post-message listener tag

Next, we need the tag to fire only when the user has reached the parent frame page.

Set the trigger configuration to a Page View. Next, we only want it to fire on Some Page Views. Finally, the appropriate condition is whenever the Page Path contains an iframe.

Trigger configuration of the post-message listener

Provide a name for the trigger, and then click Save.

Saving the post-message listener trigger

Finally, save the tag.

Saving the post message listener tag

Go to the preview mode again. Check the Container Loaded event. We can see that we have fired the post-message listener tag successfully.

Successful firing of the post-message listener tag

Go to the parent frame and click the Track Me button again. In the Tag Assistant, we should see a new event that gives us a new message.

In the Outbound Clicks event, go to the Data Layer tab. Here, you can see the information we pushed to the data layer that GTM has picked up.

Information pushed to the data layer

The outbound clicks event was not the event we were expecting. It is likely due to the click being a reserved keyword and is translated as outbound clicks for GA4.

Nonetheless, we can now build from this information in the data layer and send it to Google Analytics 4. It ensures that we have continuity inside our session when we are sending data over to GA4.

To build a new tag for our GA4 event, select the Google Analytics: GA4 Event tag configuration. Next, paste in your measurement ID. Use click for the event name.

Creating a GA4 event tag

Next, we will add event parameters to our tag. But first, we will create a variable that pulls data from the data layer.

Create a Data Layer Variable and use postMessageData.click_text data layer variable name. Provide a name for the variable, and then click Save.

Data layer variable configuration

Back to our tag, set the value of our click_text event parameter to our data layer variable. Next, provide a name for the tag.

Adding event parameters to the GA4 event tag

Finally, create a Custom Event trigger for our click event. Give a name for our trigger, and then Save and apply it to our tag.

Creating a custom event trigger

Enter the preview mode again so we can test out our iframe tracking with Google Tag Manager.

Testing the Implementation

In the demo shop, click the Track Me button inside the iframe. In the Tag Assistant, check the Outbound Clicks event. Confirm that we have fired our GA4 event tag.

Successful firing of the GA4 event tag

Check the GA4 DebugView to confirm if we sent our click event to GA4 correctly.

The click event in the GA4 DebugView

Select the click event and see the parameters we sent over. Under click_text, we should see Track Me, which is the text we see on the button.

The click text event parameter

You can go ahead and implement form tracking on the iframe, but we now will publish our changes live on our website.

Publishing

First, go back to the iframe container and click Submit.

Submitting a version of the GTM container

Provide a descriptive version name, and then click Publish.

Publishing a version of the iframe container

Don’t forget to do the same for the parent frame container.

Publishing a version of the parent frame container

Summary

With this, you have installed iframe clicks and are forwarding the data to GA4 safely. This technique does not work everywhere because you need access to the iframe. It is the first technique we implement when dealing with iframes and if we have access.

Check out these guides on a few techniques for tracking click events in GTM: Button Click Tracking with GTM, How to Track Outbound Link Clicks with GTM, and How to Pull Relative Click Data in GTM.

That is how to do GA4 iframe tracking with Google Tag Manager. Do you implement iframes on your website? How do you handle iframe tracking? Let us know in the comments below.