Tracking Iframes: How to Track Conversions in Iframes with Google Tag Manager

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?

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

Inspecting iframe element by right-clicking and selecting View Frame Source

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. 

Identifying a unique variable for the iframe element using the browser developer tools

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.

iframe trigger configuration for form submission, fires for some forms when 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.

custom HTML tag configuration for postMessage sender

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. 

custom HTML tag configuration for postMessage listener

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. 

Google Analytics iframe form submission event Tag configuration

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.

iframe event Data Layer contents, including event name and postMessageData

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!

JOIN US!

Master Data & Analytics with Measuremasters

Exclusive Courses & Workshops | Ongoing Troubleshooting | Support Resources, Tools & much more
guest
53 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Azfer Saeed
Azfer Saeed
4 years ago

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 »

salman
salman
4 years ago

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 »

salman
salman
4 years ago

Thanks for the reply Julian.

Can you give me some directions on how to debug either of these 2 situations that you’ve highlighted?

salman
salman
4 years ago

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.

Chris Rundle
Chris Rundle
3 years ago

Hi,

The link to the ‘template’ doesn’t link to the code examples that you mentioned that you had prepared?

Lily
Lily
3 years ago

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

Mike Waz
Mike Waz
2 years ago

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 »

Kevin
Kevin
2 years ago

How would you create a Form Submission trigger for an iframe form that only uses a src=”url” and not an ID? For example

Ankit Garg
Ankit Garg
2 years ago

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>

Pablo Mermet
Pablo Mermet
2 years ago

Thanks Julian, this was extremely useful, simple and effective.

Akash
Akash
2 years ago

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.

Wilco
Wilco
2 years ago

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?

Vu Dinh
Vu Dinh
2 years ago

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.

Last edited 2 years ago by Vu Dinh
Colin
Colin
2 years ago

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 »

Jason
Jason
2 years ago

Hi Julian, will this solution inherit the analytics tracking parameters from the main site visit and apply them to the iframe analytics event?

Alex
Alex
1 year ago

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.

Colin
Colin
1 year ago

Why is a new account necessary, can I just create a container within my existing account?

Julien
Julien
1 year ago

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 !

Last edited 1 year ago by Julien
Jack
Jack
1 year ago

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.

Arjaan
Arjaan
1 year ago

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?

Last edited 1 year ago by Arjaan
Nick
Nick
1 year ago

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!

Adam
Adam
1 year ago

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

Stephan
Stephan
1 year ago

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?

Alejandro Zahler
Alejandro Zahler
1 year ago

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.

Crystal Man
Crystal Man
1 year ago

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!

Sam
Sam
1 year ago

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 »

Reddy
Reddy
1 year ago

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?

Matthew
Matthew
1 year ago

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?