How to Track Conversions Through iFrames with Google Tag Manager

Stuck trying to track your iFrames properly?

In this post, I’ll go over how to track conversions through iFrames with the help of a tool called Google Tag Manager.

What we will cover in this guide:

What are iFrames?

An iFrames is effectively a website that loads within another website. So inside of interacting with the actual website, you are interacting with a portal to a 3rd party website. Payment gateways, like PayPal buttons, are good examples of iFrames you may have come across in the past.

The Problem With Tracking iFrames

The iFrame is another website so unless you are the owner of the website whose iFrame you have on your website, you won’t be able to install GTMor do any tracking at all. Sad times.

🚨 Note: You need developer access to the iframe in question. 80% of the cases I see of people who want to track iFrames are simply not possible because they don’t have access to the iFrame in question.

Inspecting Your iFrame Element

What if you wanted to pick up interactions such as button clicks, form submits and so on with the help of Google Tag Manager within an iFrame? 

Well, you need to have access to that iFrame so you can install Javascript, and potentially also Google Tag Manager. And once you have access, you can track anything in that iframe that you could track on a normal website.

Alright today our journey starts in our demo shop and I have made up a page here called iFrame, and on that page we have already Google Tag Manager, and so as you can see that also we have implemented an iFrame.

Now how do I know that this is an iFrame? You see this frame but it’s not all that apparent in a page itself, what you can do is right-click on where you suspect there’s an iFrame in Chrome, and you would see here that it says View Frame Source. Because what an iFrame essentially is is another website inside of a website. 

inspecting-your-iframe-element

So when we would inspect this element, we see our developer tools pop up here, and we would see another HTML page, a whole another HTML page inside of our existing HTML page, and that would be apparent through this iFrame tag, ’cause another webpage loads within this iFrame tag. 

If we wanted to see what this page would look like, we can also right-click here and go to View Frame Source. 

This would be the HTML of the frame. And if we get rid of this view source here at the beginning, press Enter, this would actually just load the webpage that is inside of this iFrame. 

Inspecting Form Elements

Tracking Interactions Through Your iFrame

Now obviously we want to track what is happening within this iFrame with the help of Google Tag Manager, but to do this we need to have access to the HTML of this iFrame. So we need to be able to actually edit this webpage. If this is not possible in your case, then you are out of luck. There’s no way I can help you track this iFrame unless you have actually access to it and can manipulate what is going on in the background of this page. 

Luckily we are here on a pretty simplistic demo and I have access to this page and can enter whatever I want here in my WordPress blog, and it would appear in this iFrame. But you need to make sure that you have access to the actual HTML of the iFrame.

Tracking Interactions with Your iFrame

Why is this so important? Well when we start checking with Google Tag Manager here, and for example fill out this form, and we send this off. We see the page kind of reloads but only instead of the iFrame, our page up here stays the same, and Google Tag Manager also doesn’t pick anything up as happening inside of the iFrame so there’s no new page view generated. 

Pushing Data From Your iFrame to Your Parent Frame

Installing Another GTM Account Directly Into Your Child iFrame 

Now what we need to do is actually send data from this iFrame into the parent frame. And this is what you call the parent frame here. That’s the webpage that our iFrame is embedded in. Once we have transmitted that data into our parent frame, we can then send it onto Google Tag Manager, and pick it up to forward onto our tools. The process is actually pretty simple. 

Installing Another GTM Account Directly into Your Child iFrame

We will send data via a Javascript call called postMessage over from the iFrame to the parent frame, listen to that with Google Tag Manager, so we can then forward it on to any kind of marketing tool. So let’s go ahead and implement this.

First of all, we need to install Google Tag Manager into this iFrame. We could use the Google Tag Manager account that we have already available. So this one would work as well, but you need to be careful with mixing and matching the different frames, and that’s why I would recommend to actually use a separate Google Tag Manager account to accomplish this. 

I’ve made up a new Google Tag Manager account. Right now we are here in the parent frame, let’s go to our iFrame account. So here we have our iFrame account, and in this Google Tag Manager account, we have nothing implemented. Now I will implement this Google Tag Manager code into this iFrame here. 

Google Tag Manager code into this iFrame here

Now with my WordPress blog this is easily done because I have this in a template file here, and I can just push it in the head, or ideally you would also input the body tag here. We update this file and see if this works. Let’s go into the Preview in debug mode. We load our page. 

And now we see Google Tag Manager loads on the frame page, but also on the iFrame page right here, and it’s a different Google Tag Manager account that is loading in the parent frame. So we have different accounts here across these two frames.

Inspecting Your Form Elements

What will we do with the special frame that is inside of the iFrame? Well we want to track the conversion through our iframe, which in our case, is a form submission event.

Let’s inspect this form, and see what the Form ID is. We have an ID here, ninja_forms_form_1, so we can easily go ahead and set up the trigger. 

Inspecting Form Elements

Create Form Submission Trigger

Go over to Triggers.

Create Trigger

Select the form submission type.

Activate Form Variable

Build a new form trigger for ninja_forms, by the form submission, only for some forms. 

Send Child Frame Data to Parent Frame Using postMessage2

Send Child Frame Data to Parent Frame Using postMessage 

Now we need to connect this trigger to a tag, and what tag might that be? Well we won’t send it to Google Analytics or any kind of other tool directly because that would actually happen in the frame itself, and we wouldn’t have complete control of what is actually happening in firing on our website. And that’s why we’re gonna send the data to our parent frame with the help of Google Tag Manager. 

Now for that, we need a special sender tag for our postMessage that we are gonna send. In our case, this will be for form Submits. And we’re gonna go with a custom HTML tag, and then we are gonna enter a syntax that I have prepared here which I’m gonna link up down below.

And what you need to enter here is basically like a dataLayer.push method where you would put an event and then the data that you want to put in. You can put in any kind of key-value pairs, this would then be transmitted to our parent frame. 

So in our case, we have a formSubmit here, and we have a data point that say this is our Contact Us Form. Let’s call our key form, in this case, an event, let’s make it more clear, is the iFrameformSubmit. Alright, that should do it. Let’s connect it to our trigger.

And we can save this. Refresh our Preview in debug mode, go back to our frame in the iFrame. And let’s ignore our current frame for now, and just have a look at this frame here within our test data and see if anything pops up down here. 

We see our GTM.formSubmit happened, our tag fired, and the page reloads, so data should now be sent to the parent frame, and in this parent frame, nothing happens quite yet, because we actually need to build in a listener to listen for any kind of postMessages.

Build a Listener in Your Parent GTM Account to Listen for postMessage From Child Frame 

So let’s do this really quickly. Let’s go over to Google Tag Manager, back to our parent frame. So here we are now in the parent frame, and we’re gonna install a listener for our postMessages. This is again gonna be a custom HTML tag. And I have something prepared here which I’m also gonna link down below. This basically just listens for this postMessage, picks up what is in this postMessage, and pushes it to the dataLayer. 

Build a Listener in Your Parent GTM Account to Listen for postMessage From Child Frame

Now in order for this to work, we just need to deploy it on the right page. Now we could go with All Pages if you wanted to, we could also say that we only want it to listen for these messages on our iFrame page. So let’s do that and let’s say on the Page View we want to deploy the listener on the page path that contains iFrame. 

Let’s save this, refresh our Preview in debug mode, refresh our page, and now we have our listener for postMessages deployed. Let’s try this out again and put in our test data and send this off, and we see we have an iFrameformSubmit.

In the iFrame here, reloads, but we still have our mainframe, our parent frame open, and here we see that there was an iFrameformSubmit. 

Now nothing fires on this because we haven’t attached any tag yet, but something was pushed to the dataLayer and it is exactly the data that we had prepared. We have an event, iFrameFormSubmit. We have the postMessage data which is in a nested object here, so we would need to build the right variable to get to our data, but we have everything available to now fire a tag to Google Analytics. 

Create a Google Analytics Tag to Send iFrame Data to Google Analytics 

We can go ahead to our Parent GTM account and build for example a Google Analytics event tag for FormSubmits. Now you could also say this is only for iFrames, but you could set it up pretty flexible, and that matter because you now have that data available in the dataLayer anyway. So let’s go with our Universal Analytics tag. We already have a settings variable, and we wanna send an event. 

Create a Tag in Parent GTM Account to Capture the Data and Pass it on to Google Analytics

Now in this Label, I would like to actually transmit the data here from our form, Contact Us form. So how would we do this? We would need to build the right dataLayer variable, so I’m just gonna build a new dataLayer variable for our form. This is a dataLayer variable, and now since it’s inside of an object, we need to have the right dot notation, this is postMessageData.form. See this should be correct. Let’s save this and configure our trigger.

Testing 

Now our trigger fires on our custom event which was our iFrameFormSubmit. So in the configuration itself, we will also use this in our custom event here, iFrameFormSubmit.

Let’s save this. Refresh our Preview in debug mode. Refresh our page. And try this all out again. We send this off. 

And our Google Analytics event tag now fired and will show that it is also in our Real-Time reporting that this was successfully transmitted right here. 

Verify that the Form Submission is Recorded in Google Analytics

This is how we can send data from an inner iFrame to the parent frame and send this data over to our marketing tools like Google Analytics.

Don’t forget if you are happy with your result, then submit this as a version in GTM.

Congrats! Once this is deployed, you should be able to successfully track conversions through iFrames with Google Tag Manager. 

What Else Can You Track?

Now that we have installed GTM onto our iFrame and connected it to our parent frame, we can track conversions through Iframes, but we can do so much more. The sky is really the limit in terms of what you can track in your iframe.

See some other guides to:

Summary

Alright, there you have it. This is how you can track conversions through iFrames with the help of Google Tag Manager.

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 upload right into your Google Tag Manager account.

And if you have any more questions about this tutorial, then I’d love to hear from you in the comments below. 

Julian Juenemann
About the author: Julian Juenemann

Julian started and grew venture-backed startups with his unique 'data first' approach to Online Marketing. He then founded MeasureSchool.com to help marketers, like him, the data-driven way of digital marketing.

guest
25 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Azfer Saeed
Azfer Saeed
2 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
1 year 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
1 year 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
1 year 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
1 year ago

Hi,

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

Lily
Lily
10 months 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
6 months 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
5 months 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
4 months 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
4 months ago

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

Akash
Akash
4 months 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 months 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
1 month 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 1 month ago by Vu Dinh
Colin
Colin
1 month 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 »