- In this video we're gonna tackle the question
how to track iFrames with the help of Google Tag Manager?
All and more coming up.
(upbeat music)
Hey there and welcome back to
another video of MeasureSchool.com,
teaching you the data-driven way of digital marketing.
My name is Julian and today we wanna take a look
at how to track iFrames with the help of Google Tag Manager.
Now this is a much requested video actually.
I have gotten a lot of questions
on how to track a particular iFrame,
but I was really hesitant to make a video about it
because in 80% of the cases that I come across
where people want to track interactions within an iFrame,
it's actually not possible
because they don't have access to the iFrame itself.
Now just to explain, iFrames are basically
another website within a website
that loads in that parent frame.
So inside of the actual website
you have another website loading,
and that might actually happen
completely remote on a different website.
So you don't really have access to the iFrame itself
when you work with Google Tag Manager,
when you have Google Tag Manager
installed on the parent frame
because it's a completely different website.
Now 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, we can do a lot here,
and that's what I wanna tackle in this tutorial.
So now we got lots to cover so let's dive in.
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.
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.
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.
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.
So 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.
Now what will we do with the special frame
that is inside of the Iframe?
We'll actually pick up our event.
So in our case this would be a form here.
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.
So go over to Triggers here
and build a new form trigger for ninja_forms,
by the form submission, only for some forms,
and unfortunately I forgot
to actually
activate our variables.
So let's do that quickly.
Here our form variables.
And go back to our Triggers,
and build a new form trigger on ninja_form,
and we're gonna go with Some Forms and the Form ID
equals
ninja_forms_form_1.
Alright let's save this.
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.
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 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.
Now 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.
So let's save this,
refresh our Preview in debug mode, refresh our page,
and now we have our listener for postMessages deployed.
Now let's try this out again.
Let's put in our test data and send this off,
and we see we have an IframeformSubmit.
Now 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.
So we can go ahead in Google Tag Manager
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 actually,
should fire on a 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.
Let's save this again.
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.
So this is how we can send data
from an inner Iframe to the parent frame,
and then forward that on
to the marketing tool like Google Analytics.
Again just to recap, we are here
using the postMessage API of a browser
which allows us to communicate between Iframes.
To install this we need to have access to the Iframe itself.
So we need to be able to edit the HTML here.
Now in our case we implemented Google Tag Manager
onto our page, a different account.
We then implemented a sender message
that sends data from the Iframe to the parent frame.
And on the parent frame inside
of the Google Tag Manager account of the parent frame,
insert a listener that picks up this message
and then forwards it on into the dataLayer
which in turn then informs our tags
that we want to fire to our marketing tool.
Don't forget if you are happy with your result,
then submit this as a version.
I'm just gonna skip this here.
Normally you should give a name,
but also do this for your Iframe
so you're all set and done here as well.
So once this is deployed,
you should be able to track
across your Iframe with Google Tag Manager.
(upbeat music)
Alright so there you have it.
This is how you can track interactions
with the help of Google Tag Manager
within an Iframe if you have access to that Iframe.
Now if you wanted to download
the codes that we have prepared for you,
we have made a template for you at measureschool.com/iframe
that you can download there,
and then upload right into your Google Tag Manager account.
And if you have any more questions about this tutorial,
then leave them in the Comments below.
And if you enjoyed this video,
why not subscribe to our channel right over there
because we'll bring you new tutorials,
marketing tech reviews,
and more opinion pieces also
on this channel every week.
Now my name is Julian.
'Til next time.