Tracking iframes with Google Tag Manager isn’t something similar to a button click or a form submission. There are a number of times, it happens that you want to track a button click or a link click, but you aren’t seeing any output in preview mode.
To deal with this, you need to understand the phenomenon of an iframe. An iframe is basically another website that is embedded within your website. In most cases, you don’t even have access to the source of that iframe.
For example, if you have embedded a Wufoo form on your website, you can’t simply track with GTM. The form you are adding is within an iframe and you don’t have access to that iframe.
Let’s see how we can track if there is an iframe added to your page.
To do this, right click on your website page and select inspect element to open console mode.
On the pop-up window, select console and clear console.
Now, enter the below line of code to figure out if there is an iframe on your page.
jQuery(‘iframe’).length;
Remember that the non-script part of your GTM tracking is also in an iframe. So if the length is 1, it will be because of the GTM iframe.
The second way to see if the element is added within an iframe, right click on that particular element and select inspect.
As you can see in the above image, within the iframe there is another web page loading with separate HTML tags.
The last very way to figure out if it is an iframe, right click the particular element and select ‘view frame source’. You will see the source code on that iframe in a new tab.
Can we track anything within an iframe?
You have now understood the concept of iframe, it’s time to know if you can actually track iframes or not.
There are two cases:
- You don’t have access to the iframe source code -> you can not track with GTM
- You have access to iframe source code -> yes, you can track
There is seriously no better option for the first category. But if you belong to the second category, you will have to follow the below steps.
1. Add GTM code on the iframe page (create a separate container to keep things easier).
2. Create a custom HTML tag that will send a post message when a form is submitted
3. Create a listener in the parent container that listens to the post message
4. Create a tag to fire track the event
If you want any further help, you can follow the step by step guide here. Or find out more by checking our work here.
