If you google "Iframe Tracking with GTM", you will get an end number of articles with the correct solution to track user interactions in Iframe.
So, why am I writing this post?
I am writing this blog because it was requested by one of my blog reader and he wanted me to write this because he finds my writing easier to understand. So, I will try to keep it as simple as possible.
All right, let’s start from the basic.
What is Iframe? Why does the website's use Iframe? Is it mandatory to have a Iframe on the website?
The answer is no. Iframe is not at all required to put on your website "until and unless you want to isolate some content, or you want to put some third-party content on your site".
Have you ever embedded YouTube videos on your site or used Disqus comment service or any third-party contact us form, email subscription or payment form? All these are third party content and are mostly embeded in Iframe.
Here the third party means, contact us forms, videos or comment section which is not hosted on your domain.
For example - My domain is qaror.com. And the comment box (at the end of this page) I am using is of Disqus which is hosted on disqus.com. Here I am using the comment service of third-party company i.e. Disqus.
Now, how to put something in Iframe?
Below are the two examples of Iframe. In the first example, I have passed content of my own domain i.e., "qaror.com" and in the second example, I have embedded the content of third party domain i.e. "disquis.com"
Example 1 - Iframe used to embed content hosted on same domain i.e. qaror.com.
You can interact with the below content in iframe. You can scroll down the content and click on any link.
Example 2 - Iframe used to embed content hosted on third party domain i.e. disqus.com
I believe, now you have some idea of Iframe, its usage & its implementation on a website.
So, let’s move to the original subject of this blog post, i.e., Track User Interaction in Iframe using Google Tag Manager.
So, how to listen the user interactions made on different domains in an Iframe?
In other words – Send message (data) from the Iframe window to the parent site and on the parent site, read that data and send it to the Google Analytics.
Note - Here the parent site is the website page on which the Iframe is embedded.
In simple words, window.postMessage(), as the name depicts, it helps to post or send messages from one window to another window or we can say from the iframe to the parent site.
Now, our requirement is to track successful email subscriptions and send data to Google Analytics using Google Tag Manager.
Solution - Whenever the user clicks on submit button in iframe and lands on the thankyou page, we will use the postMessage method to pass that event & related data to the parent site in a JSON format. And on the parent site, we will read this message and utilize it as per our need.
Below is the script to pass message to the parent site from the Iframe embedded content.
Below is the script to listen message event & read the associated message on the parent site.
Now, we are quite clear that postMessage script need to be implemented on the third party content (in iframe) to post a message on the parent site and the "message" event listener script need to be implemented on the parent site to receive and read that message.
Now, how to put these scripts on both the sites?
We can ask the development team to put these scripts directly on the respective sites or we can implement it using the google tag manager.
For GTM solution, we need to implement GTM container snippet on both the domain, i.e., qaror.com & 000webhost.com. Here, we can use one GTM container for both the site or we can use two different containers. It's up to us.
Let’s learn, how to implement this solution in GTM.
Step 1. Open GTM container implemented on https://qaror.000webhostapp.com/contact-us.html (Iframe content).
Step 2. Now open GTM container implemented on the parent site, i.e., qaror.com.
Note - While implementing this solution in GTM, replace the above domains with the domains you are using.
Now, validate the implementation in GTM preview mode. Enable preview mode of both the GTM containers (in case, if you are using two different GTM containers).
You can see the message associated with the "message" event being passed in the dataLayer. These dataLayer values can be passed in Google Analytics by creating dataLayer variables in GTM.
In the final step, create on GA Event tag in the parent GTM container & pass these dataLayer values in event category, action or label (per your requirement). Use custom event trigger type and pass "email-subscription" in the custom event field.
That's all. Hope now you have a better understanding of Iframe, its usage, logic of post message and receive message and its implementation in the Google Tag Manager.
Please feel free to comment down or write us on firstname.lastname@example.org , in case you have any query.