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:
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!
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?
Hi Julian,
I figured out the issue. I had to pass the protocol along with the hostname from the iFrame for the postMessage to work.
Hi,
The link to the ‘template’ doesn’t link to the code examples that you mentioned that you had prepared?
true, you would need to download the container and open it in Google Tag manager
Hi Julia,
If I own the iframe and do not have access to the parent frame, can I still implement this tracking within the iframe itself?
Thanks,
L
yes, just the sender part.
Hi Julian, Thank you very much for your tutorial, however there is something we’ve been trying to figure out for the past week but unsuccessfully. I really hope you can help. We have build a small booking form and event organizers have to add it to heir websites through an iframe. When a customer goes to the website and submits the form, the event organizer has to see the source/medium of that submission and this is possible by placing linkers, listeners, and so on on BOTH the source site and the iframe. However, big guys like Eventbrite only ask you… Read more »
their javascript code probably grabs the client ID and transfers it into the iframe so they can continue the session
How would you create a Form Submission trigger for an iframe form that only uses a src=”url” and not an ID? For example
it always depends on the form. So there is no best way. But to answer your question. A CSS query selector you could use it [src=”url”].
Hi Julian,
I have below iframe tag for marekting tool. Can I paste it directly in custom HTML, Will it work? Or I should use the image tag?
<iframe src=”*************.go2cloud.org/aff_l?offer_id=16156&adv_sub=SUB_ID&transaction_id=TRANSACTION_ID” scrolling=”no” frameborder=”0″ width=”1″ height=”1″></iframe>
yes, you could put it into a custom HTML tag.
Thanks Julian, this was extremely useful, simple and effective.
Hi Julian,
Nice tutorial. I followed your steps and want to trigger on button click. Events on iFrame is triggering fine, but i am not able to get it in parent window. I am button click. Iframe is hosted on a seperate page, not on home page.
hard for me to debug from afar. If you are familiar with JS you could build in some console.log statements to see what executes and maybe spot errors in the Developer console.
Hi Julian,
Does this also work when the trigger is a element visibility? I followed all the steps, except my trigger is a visability within the iframe. However the tag get’s triggered once I submit the form. But I don’t see my data from the data layer.
Or has this something to do with the new cross site cookie blocking?
no, it should still work.
Hey Julian, I followed your tutorial and got my solution working. But thats having two separate GTM for the iframe and the parent site. Is there a way to have one GTM that both can use? Im trying to use one GTM for the iframe and sending that info the the same GTM on the parent site but the listener is not firing.
yes, you could also use one GTM account and create the triggers in a way that they only fire in their respective frame. Just a bit harder to do, but doable.
Hey Julian, Great article and video. I need to do something slightly different than what you are doing here. In my case, I need to send cookies I captured on my parent page to the iframe so the form can add those cookies to hidden fields on my form. So I assume in my case I need to follow your instructions, but instead of sending the data from iframe to parent, I need to do it the other way around. Is this possible? I honestly don’t even know if what I am trying to do is possible and could definitely… Read more »
yes, theoretically you could turn it around
Hi Julian, will this solution inherit the analytics tracking parameters from the main site visit and apply them to the iframe analytics event?
yes, you could send data via the query string into the iframe. But it would need to be reloaded, if you wanted it to happen on page load
Hi Julian, thank you for this very useful guide. I’m wondering, haven’t you experienced any issues with this implementation lately? Somehow it stopped working for me a month ago or so, although it did perfectly before.
nope. no problems on my side
Why is a new account necessary, can I just create a container within my existing account?
yes, you can too
Hi Julian, the ressources are not correct. It’s not the script that you implemented on screen. I had to recopy it by pausing the video.
But anyway, thank you very much !
Hi Julian,
thanks a lot for this guide and the video.
We are running an angular app within a iframe and your solution works like a charm.
Now we want to send additional data with the event. Is that possible?
Its a custom event and it contains an id, we want to push to the parent frame. How can we do this? In the tutorial you are only sending fix string values.
you would need to adjust the Sender tag with your dynamic data (this would be done via Variables).
Hi Julian, great stuff!
A quick question. I want to send the Iframe data to my Facebook Business Manager instead of Google Analytics. I would just go through the same process until the point where you use a GA event tag to send it to GA? If I would just replace the GA – Event – FormSubmits Iframe event tag with a Facebook Pixel tag event (custom template of Simo Ahava) this should work fine?
yes, I believe so
Hey Julian, question regarding this method: we’ve implemented it and noticed that attrbituion is a bit off, specifically google / cpc clicks get reported with google / Organic form fill attribution in Google Analytics. Understanding that Analytics reports on non-direct last click, the tests we’ve ran with the correct parameters still have this issue. But it does not occur for our source / meidum combinations, just google / cpc. Wondering if you’ve come accross this anomoly before? Thanks!
sounds a lot like the rogue referral problem (google it). But I can hardly imagine that coming from the iframe technique.
This was just the solution I was looking for. I’m 2/3’s of the way to getting it to work however nothing I seem to do is triggering data to be sent to the datalayer on the main page. The postMessage listener is firing correctly as is the Sender – postMessage within the iframe. Is there a tag timing/priority thing I’m not aware of? I’m at a loss and would love any help or insight you may have. Thanks
no, it should work. Maybe there is something on your page preventing the message to get through
Hi Julian,
we are using an iFrame with a separate GTM and a separate GA. When I include the page as an iFrame, all events fire, but no data is transferred to GA. If the page is loaded without a parent frame, everything works and the data goes into GA.
Any idea?
Thanks Julian. It worked flawlessly 🙂 . I think it’s important to emphasize that only one Listener is needed in the parent frame, no matter how many post messages you’re sending from the iFrame.
Hi Julian, thanks so much for sharing! Very useful indeed.
I have one question in mind, I am trying to implement UA ecommerce tracking which the transaction data only available in the iframe. So after I sent (i) Child Frame Data (transaction date) to Parent Frame and configure the (ii) Listener in parent frame, what would be the next step?
Do I need to implement the ecommerce datalayer (https://developers.google.com/tag-manager/enhanced-ecommerce#purchases) in the page where the iframe located by using the datalayer variables I exacted from (ii) Listener in the parent frame?
Your advices would be very much appreciated!
Hey Julian, As others have mentioned I can see the conversion firing when the form is submitting but I can’t see the iframeFormSubmit trigger firing hence that tag isn’t firing. I believe the issue comes down to the postMessage tag on the child. In the video/tutorial you don’t mention we need to change the example URL given and I’m not sure whether this should be the form URL or the URL the form sits on? Also our form is dynamically loaded Javascript so not sure if that is causing the issue? Any help would be great, have spent 3hrs on… Read more »
if there is an iframe embedded in third party webpage. if we install GTM in the iFrame can it track the website metrics through Google Analytics or should there be a different GTM code installed on the Third Party Webpage as well?
Hi Julian, thanks for sharing your insights here! I’m curious if it’s possible to send that iframe data to more than one google analytics account?
Yes, it needs some configuration, but it’s doable. You just need to configure GTM to send the info to two or more GA accounts.