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?
- Common problem with tracking iFrames
- How can we inspect iFrames?
- Tracking interactions with an iFrame
- Pushing interactions from the iFrame to the parent frame
- Sending over your tracked data to Google Analytics
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?
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.
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.
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.
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.
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.
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.
Create Form Submission Trigger
Go over to Triggers.
Select the form submission type.
Build a new form trigger for ninja_forms, by the form submission, only for some forms.
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.
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.
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.
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.
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:
- Track Form Submissions in iFrames
- Track Form Field Values in iFrame forms
- Track Conversions in iFrames
- Track Cross-Domain iFrames – Simo Ahava
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.