Track User Interactions in Iframe with Google Tag Manager

Practitioner - Awanish Dubey 12-Jan-2020

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?

We can do it using below JavaScript code. Also we can put any content in the Iframe by passing the content URL in the "src" attribute. The content can be on your domain or any third party domain.

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.

For the same domain Iframe content, we can track user interaction by the default GTM trigger options or by custom javascript code to listen different events. I will try to write a separate post for it.

But for 3rd Party Iframe content, we won’t be able to access the DOM elements (element class name, element id) using GTM trigger of JavaScript selector code.

So, how to listen the user interactions made on different domains in an Iframe?

As there is no direct way to grab class name or id of Iframe content hosted on a 3rd party domain from the parent site (site on which the Iframe is embedded), we will have to write some JavaScript code on the 3rd Party site which will send user interaction related data to the parent site and on the parent site, we will have to write some JavaScript code to receive & read that message.

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.

Now, to convert the above logic into code, we will be utilizing below JavaScript methods.

  • window.postMessage() - The postMessage interface allows windows to talk to each other no matter which origin they are from.

  • OR

    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.

  • window.addEventListener() - Whenever the Iframe content posts a message, an "message" event generates on the parent site. We need to listen this "message" event on the parent site using windows.addeventlistner method and read the data associated with this event.

  • Let’s try to understand it by one example. Below is the email subscription form in Iframe, hosted on 000webhost.com (3rd party domain). And here the parent site is qaror.com

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

    1. Create one custom HTML tag and put the postMessage script.
    2. Fire this tag on the successful email subscription (on thankyou page).

    Step 2. Now open GTM container implemented on the parent site, i.e., qaror.com.

    1. Create one HTML tag and put the message event listener script here.
    2. Fire this tag on "All Pages" trigger condition.

    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 connect@qaror.com , in case you have any query.