Tracking iframes in Google Analytics 4? It's sometimes a little bit complicated, but I will show you a method on how you can make it work with Google Tag Manager. Here I'm on my case where we have our demo shop, and on that demo shop, we have a frame installed, an iframe installed.
First of all, how do you know that you are actually dealing with an iframe? Because sometimes it's not as obvious as you can see it here. Well, if you right-click on the iframe and you see something called View Frame Source or Reload Frame, you have the first hint of why this could be an iframe.
Now if you click on View Frame Source, it will open up a new tab. And on that tab, you will see that this URL up here is completely different from our parent frame, which already is a hint, again, that this is actually an iframe. If we take away this View Source right here and press Enter, we actually open up the other website that is the frame itself that the user can see through our iframe right here.
Now, a third hint that you might be wanting to look at is right-clicking on the iframe and going to inspect right here. Then you look through the Domtree and sometimes you see this element right here, the iframe. Here we can actually see the source or the URL of the iframe itself and all of the HTML that is inside of it.
Now you need to imagine that an iframe is another website installed on your website itself, and therefore, Google Tag Manager doesn't have access to it. That's why it's hard to actually track that iframe, because Google Tag Manager and Google Analytics for that matter are installed on the parent frame. Only this part can be visible to Google Tag Manager.
Once your mouse goes into the iframe, nothing is trackable anymore and you won't be able to track any button clicks or submits. Unless you have access to the iframe, and this is the prerequisite here, you need to be able to edit the iframe itself and install Google Tag Manager onto it. In our case right here, this is hosted on Replet, which has been created by myself.
I can actually go into Replet and edit this form itself. What do I want to edit right here? Well, inside of Google Tag Manager, we will install a separate Google Tag Manager container, which I have already created, which is called iframe right here.
Now this iframe container doesn't have any tags just yet. We will install them in a second here. We're just going to go to our code here and copy our snippet and put that into our head section of our iframe, and then also our second code here.
Let's put that in the body. With that, we have that saved and now we should have Google Tag Manager running on this parent frame. How can we test it?
We have our URL of the iframe itself and we can just go simply into the preview mode and connect it to our page. Let's do that. Here we go.
We get to the iframe and it's now connected. The interactions that we have on here should be able to be tracked with the help of Google Tag Manager if you choose so, which actually reminds me there is also a thank you page that we also need to tag up. Let me go to the thank you page here and also paste our codes in from Google Tag Manager.
With that, we should be able, if we click on this link, for example, to get to the thank you page and the tag assistant actually changes over as well. We are able to see here, we are on this first page and then we are on the second page. Interactions can now be tracked with Google Tag Manager inside of this iframe right here.
That's what you need to install in order to make this actually work. If you don't have access to the iframe itself and you cannot install code, unfortunately, you are out of luck or need to ask the developer of that iframe to actually give you access or provide you somehow the information differently, for example, through a data layer push. But fortunately, we do have access here, and with our iframe itself, we can now pick up interactions.
Here we have, for example, a button called Track Me, and we can install a link click trigger in order to track this button. Let's go ahead and click on New and choose our all elements click trigger. I'm going to go through this really quickly.
This is a click for our button and then only some clicks where a built-in variable of the click text is track me. Now we are going to connect this to a tag, and I'm just going to create a test tag here. I'm just going to go with a custom HTML tag and write some contents in here.
This is just our test tag, and we are going to connect our trigger, the button click, just so we can see if this actually works. Let's go back into the preview mode, and I'm going to click on our button here, and we had our click and our test tag fired. Now you want to send this over as an event to Google Analytics obviously, but what we don't want to do is to now just install a Google Analytics tag in here and send that data over because the problem is that we will have duplicate tracking as our Google Analytics fires inside of the parent frame and then again inside of the iframe itself.
So duplicating the tracking itself. What we want to do is transfer that information from our to the parent frame itself. That way we can send from the parent frame our data over to Google Analytics 4.
Let's go ahead and make that happen. You can create this with the post message sending API. I have a little bit of code for you to install, and we need to install a post message listener and a post message sender.
This will send the data over to the parent frame. I'm going to go ahead and copy this and now go into our iframe. Again, we are in the iframe.
This time we are going to alter our test tag here and let's go ahead and put that in. Now here we can see some information that we can change around. First of all, what event should later be in the data layer?
We have here iPhone Form Submit. In our case, it should just be a click. Then what information else do we want to send over?
For example, the click text. Let's fill this out with our variable right here. Then very important, where do we want to send this information?
You need to put in the domain that you want to reach in the end. In our case, this is our parent frame and it has this URL. I'm going to copy this and put this into this URL.
This is where our parent frame is located and this is where we want to pick up this information. Very important. Let's give this all a name and let's save this and preview this again.
We have a problem here inside of our HTML. This is line number seven. Yes, apparently I forgot a quotation mark right here that should do it.
Let's preview this. We're going to click on the track me button. Just make sure that our tag has fired here.
Yes, the custom HTML post message sender has transferred the click over. Now, under Parent Frame, you don't see anything just yet because we are not actually listening for the right events to be importing into our Google Tag Manager. On the parent frame now, and this is our parent frame, we need to install a post message listener.
Let's go ahead and close this out here and go over to our parent frame where we also have Google tag manager installed. And in this tag, we already have GA4, the GETag is already installed. To that, we want to now send our information that we will receive.
But first, we need to have our post message listener. Let's go ahead and create another Google Tag Manager custom HTML tag, and we are going to choose the information that we have in here. I'm just going to copy this and let's put this in place right here, give this all a name.
Now as a trigger, we want to choose the page that this actually should listen on. We are going to go ahead and create a page view trigger that fires our tag on the page, that contains iframe. Obviously, this would be different for your page.
Let's go ahead and save this, save that, and preview. Now on our parent frame, we have our iframe installed. We now go into our container loaded event, and we see that our custom HTML has fired.
Now on our parent frame, if we click on track me right here, we should see something inside of our new parent frame that gives us a new message. Let's see. Here we go.
We have an outbound link click, although this is not the event that I was expecting, but it pushes data to the data layer, and this is the information that we are now picking up. It's probably because the click is actually a reserved keyword and it will be translated into outbound clicks for Google Analytics 4. Nonetheless, we can now build off this information that we have in the data layer and send it on to Google Analytics 4, which will ensure that we have continuity as well inside of our session when we are sending data over to GA4.
Let's go ahead and build a new tag of our Google Analytics 4 event. This should be our measurement ID, which I have saved up here in the shortcut, and event name, click, and then event parameter. Let's go ahead as the user property and say click text.
Then the value should be from our data layer itself. Here we have our post message data and a click text is in here. We are going to go ahead and build a new custom variable of the type of data layer variable, and this will be our post message data dot click text.
All right, that should do it. It's our post message data click text, and this is a data layer variable. Let's make this correct from a naming convention and give this all a name, GA4, iframe, click.
As the trigger, we will now choose a custom event that we have created, and this is our click event, so custom event. We'll go with click right here. This is what is going to be pushed into the data layer.
This is a custom and click, and let's save this, save this, and preview. Now we're on the page, we click on track me. This should have fired our click, the iframe click, and that now should show up inside of our debug view instead of Google Analytics 4.
Here we have our page view, and we also have our click right here with the information about the click text. No, it doesn't want to show us the click text. Oh, the click text is under user properties.
That means I have reconfigured something. Let me go quickly into iframe tracking. Yes, I put it under user properties, which is wrong.
We want to put it in the event properties right here. Let's change that around really quickly. Save this, and let's test again.
All right, with the track me button, we should now see an event pop up here in the debug view of Google Analytics for after a few seconds. Here we have our page view and there's our click event. With the parameters.
This time we should have here a click text right here, which is track me, which is the text that we see on our button itself. Now obviously you could go ahead and also do this for a form submit and try this out as well. Important, right now we haven't published any versions yet, so in order to make this go live for your website users, you would need to go into the iframe first of all and submit this as a version.
Don't forget to give it a name so you know what you implemented and do the same for your parent frame as well. With that, you have your iframe clicks installed and are now forwarding on to Google Analytics 4 in a safe manner. Please be aware that this technique doesn't work everywhere because obviously you need to have access to your iframe and so on.
But it's the first technique that I go to when it comes to iframes and I actually have access to it. If you want to see more videos about Google Tag Manager, then click right here.
