Are you having a hard time tracking iframes from third parties on your website?
In this post, I’ll go over how to track conversions through iframes with the help of our favorite tool: Google Tag Manager.
What we will cover in this guide:
Sign up to the FREE GTM for Beginners Course...
- What are iframes?
- Common problem with tracking iframes
- How do you inspect iframes?
- Pushing interactions from the iframe to the parent frame
- Sending your tracking data to Google Analytics
What are Iframes?
An iframe (short for “inline frame”) is effectively a website that loads within another website. (Woah…inception.)
Have you ever used PayPal to charge clients on your website? Or added a Facebook share button to your blog post?
These are good examples of iframes you might be using already!
The iframe is a secure way for users to interact with third-party websites without leaving your website.
How does this work?
The iframe HTML includes the source website and the dimensions of the iframe, plus any additional style or functionality code.
For example, an iframe could be written like this:
<iframe src="https://measureschool.com/" height="300px" width="900px"></iframe>And appear like this:
The Problem with Tracking Iframes
The iframe contains another website, so unless you are the owner of the website in your iframe, you won’t be able to do any tracking at all. Sad times.
If you want to track an iframe, make sure that you will have developer access to the website inside your iframe. If you already have Google Tag Manager installed, then even better.
🚨 Note: To reiterate, you need developer access to the iframe in question. This means the source website’s code, not the iframe HTML on your website. 80% of the cases I see where people are struggling with tracking iframes are simply not possible. Without access to the iframe in question, you cannot install any tracking code.
Inspecting Iframes for Tracking
Not sure if your page element is an iframe? You can do a simple check on the frontend of your website.
To inspect a page element, right-click (or control-click for Mac) wherever you suspect there’s an iframe. If you see the option View Frame Source, then the element is an iframe.
If you click View Frame Source, you’ll see the HTML code for the source website (the child frame), which will look different from the code for the web page you’re on (the parent frame).
How to Push Data From Your Iframe to Your Parent Frame
You can track iframe interactions by sending a Javascript call called postMessage from the iframe to the parent frame. The parent frame listens to the call with Google Tag Manager, then forwards it to your marketing tools.
If that sounds complicated, I promise it’s not. Here’s an overview of how that works in more detail.
Install GTM on Your Child Iframe
Even if you already have GTM installed on the website that contains the iframe, it won’t be able to pick up any user interactions that occur inside the iframe.
So if you want to track any form submissions, button clicks, or element visibility in your iframe, you need to also install GTM onto your child frame.
The important part here is that you should create a new Google Tag Manager account to associate with your child frame.
This doesn’t mean you need a separate Google login, but you’ll want a GTM account and container that are specific to your child frame. Your parent frame should have its own account and container.
If you don’t already have GTM installed on your parent frame (primary website), then check out our GTM Installation Guide to get started.
Inspect Your Iframe Elements
Next, you’ll have to decide which user actions you want to track inside your iframe.
Remember how we checked our iframe code earlier? Here’s where this comes in handy. Right-click on your iframe and select View Frame Source.
Here, you’ll be able to find any identifying information about the element you want to track. If you want to track a form submission, you might look for a form ID. If it’s a button click, you might look for click text or a click class.
Once you’ve found an identifier that will help you track this element (without tracking incorrect elements), copy it. We’ll need it in order to build a Tag trigger.
Create a Trigger for Your Iframe Element
In your child frame’s GTM account, you’ll build a new trigger using the element identifier you just found.
The type of trigger you use will depend on what you want to track. Select the trigger type that best fits your iframe element.
There are other type-specific options that you’ll have to decide on, but the important part here is to make sure that the trigger fires when your variable matches the element identifier.
In this example, the iframe contains a form, so we want the trigger to fire when the following condition is true: Form ID equals ninja_forms_form_1.
This ensures that the trigger will always fire when a user makes the action you want to track, but it doesn’t fire when the user interacts with the iframe in other ways.
Send Child Frame Data to Parent Frame
The next step is to connect this trigger to a Tag.
However, we don’t want to send it directly to Google Analytics or other tools.
Why? Because the interaction would be tracked as coming from the frame’s source website—not from our webpage with the iframe.
If you use your new trigger to send data directly to your tracking tool, you won’t be able to differentiate users who converted on embedded iframe versus the original source website.
This is important for tracking a user’s path to converting. For marketing purposes, it should matter to you where your user was in your funnel when they converted.
And that’s why we’re going to send the data to our parent frame with the help of Google Tag Manager.
In order to do this, we need a special sender Tag for our postMessage that forwards tracking data to the parent frame.
This requires a custom HTML tag. I’ve built one that you can download and import straight into your GTM container here.
Basically, this script consists of a Data Layer push for any key value pairs that you want to track. If you’re comfortable with HTML, you can customize this as much as you like.
Build a Listener in the Parent GTM Account
So now our iframe will send tracking data to the parent frame, but that data is totally lost into the internet ether if the parent frame doesn’t know to listen for that data.
Which leads us to our next step: building a listener tag in your parent frame’s GTM account.
The idea here is that a Tag on your parent frame (host website) fires a Tag in conjunction with the iframe’s Tag.
The parent frame’s Tag basically just listens for the iframe’s Tag, extracts the information in the postMessage, and pushes that information it to the Data Layer.
Again, this requires some custom HTML, which I have a template for here (same link as above).
As for the trigger, you’ll typically choose a Page View just for the page with this iframe. It’s less script for irrelevant pages to load, and it cleans up your tracking data.
Send Iframe Data to Google Analytics
Now that everything you want to track is available in the Data Layer of your parent frame, you can send your iframe data to tools like Google Analytics.
In the parent GTM container, you can create an event Tag that identifies the user action in the iframe using whatever parameters best suit your tracking setup.
Make sure that any new variables that you create for your parameters match the variables in your Data Layer with correct dot notation.
You will also need a new custom event trigger that fires when the event name for your iframe element appears in the Data Layer.
This is how we can send data from an inner iframe to the parent frame, then send this data over to our marketing tools like Google Analytics.
Congrats! Once this is deployed, you should be able to successfully track conversions through iframes with Google Tag Manager.
What Other Tracking Can You Do in Iframes?
The sky is really the limit in terms of what you can track in your iframe!
This post discusses setting up iframe tracking for a conversion, but the same principles apply for tracking any other user actions.
Now that you know how to set up iframe tracking, you can apply this technique to other trackables in your iframes.
See some other guides to learn how to track:
FAQ
How do I inspect iframes for tracking?
To inspect an iframe element, right-click (or control-click for Mac) on the webpage where you suspect there’s an iframe and select “View Frame Source.” If the option is available, it confirms that the element is an iframe.
Do I need to install Google Tag Manager (GTM) on the child iframe?
Yes, even if you have GTM installed on the website containing the iframe, it won’t capture user interactions inside the iframe. You need to install GTM on the child frame and create a separate GTM account and container specific to the child iframe.
How can I send iframe data to Google Analytics?
Once the data you want to track is available in the Data Layer of the parent frame, you can create an event tag in GTM that identifies the user action in the iframe. Configure the event tag with the appropriate parameters and variables matching those in the Data Layer. Finally, create a custom event trigger that fires when the event name for the iframe element appears in the Data Layer.
Summary
Alright, there you have it. This is how you can track conversions through iframes with the help of Google Tag Manager.
Although you have to jump through some extra hoops, hopefully, this post showed you that tracking iframes isn’t so hard to do!
If you wanted to download the code snippets that we used in the video, we have made a template for you that you can download and import right into your Google Tag Manager container!
How do you use iframes on your website? What are some of your favorite use cases in tracking? Leave us an answer (and any questions) in the comments!
Sign up to the FREE GTM for Beginners Course...
Hey Julian, Thanks for posting this, definitely very helpful. I was trying to figure out why the page path of my parent frame does not contain iframe. I have the exact same situation where my iframe source is on one page (domain.com/x/y/page.html) and this is embedded within the parent frame on a different page (domain.com/z/z1). Using your material, I was able to see the Sender – postMessage tag when I use preview pane in GTM for the frame source, domain.com/x/y/page.html. My Listener tag, however, didn’t fire when my parent frame loaded. Looking at the firing trigger for that tag, it’s… Read more »
you will need to adjust the trigger rules to make them work in your case
Hi Julia, Thanks for this helpful article. I’m following your instructions to set up iFrame form submits that happen on my site on different pages. And I’ve run into an issue. The container in the iFrame is firing and capturing the form ID on form submit. However, in the parent frame the custom HTML code is not firing the custom event “iframeFormSubmit” which is being passed from the iFrame. So I cannot attach any tags to this missing event and track the form submit. I’m loading this custom HTML tag on all pages and on DOM ready event. Any ideas… Read more »
no, either your postMessage sender doesn’t send the message or your postMessage receiver doesn’t get the message. Something to look into further
Thanks for the reply Julian.
Can you give me some directions on how to debug either of these 2 situations that you’ve highlighted?