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