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.

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:

• What is an Iframe?
• How to Track Iframes with Google Tag Manager
• Sending Data to Google Analytics 4
• Testing the Implementation

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.

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.

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.

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

If we open the iframe URL, we open up the other 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.

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.

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.

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.

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.

Copy the first snippet of the code.

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

Next, copy the second snippet of code.

Paste this code immediately after opening the body tag.

Finally, click Run to save the changes to our 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.

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.

Next, enter your website URL and click Connect.

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.

We should reach the thank you page.

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

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.

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

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.

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

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.

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.

Next, we have the postMessage_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.

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.

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.

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

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

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.

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

💡 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.

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.

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

Finally, save the 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.

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.

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.

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.

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.

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.

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.

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

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.

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.

Provide a descriptive version name, and then click Publish.

Don’t forget to do the same for 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.