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