Overcoming the challenge of iframe tracking | Articles

If you already did some research about iframe tracking, you might have read people complaining that it is technically difficult to track user interactions within an iframe due to the inability to access its content from the parent page. Contrary to popular belief, you can still make it work! There are multiple solutions and we will present one of them in this article. We will explain the methodology by looking at a simple use case, without going into technical details.

Before going further, let’s get back to what an iframe is. Iframes, or "inline frames", allow website owners to embed content from other sources directly into web pages. This can be useful for incorporating videos, social media feeds, and other types of content without having to host it on their own server. In a nutshell, an iframe is a page within another page.

A simple use case: booking an online appointment on a website

In our case, we want to track what happens within an iframe that allows people to book an online appointment directly via the website. The tool to book an appointment is an iframe because it runs on a different domain. In order to track user interactions, we used the scripts from Simo Ahava. No need to reinvent the wheel when there are already great resources out there. Practically speaking, this is our methodology:

  • Implementation of one custom HTML tag for the parent page and one custom HTML tag for the embedded (child) page
  • Implementation of the same GTM Container ID on both the website and the iframe

By doing so, the parent can "listen" for messages and events that happen in the iframe and track them on behalf of the embedded page. All the technical explanations can be found in the article mentioned above. However, if you are not familiar with the code, read on to understand how it works concretely.

Let’s say we go on the website to book an appointment. When starting the appointment booking process, it opens the iframe. This triggers a “PageView” event in the datalayer of the iframe (child) which is sent to the datalayer of the website (parent) under “iframe.PageView”.

Iframe

When starting to book an appointment, the same process happens at every step:

 

Steps

Events in the datalayer of the iframe

Events in the datalayer of the website

Tags triggered

#1

Select appointment category

PageView

iframe.PageView

iframe_category

#2

Select agenda

PageView

iframe.PageView

iframe_agenda

#3

Select date & time

PageView

iframe.PageView

iframe_date_time

#4

Confirm appointment

PageView

iframe.PageView

iframe_appointment_confirmed

To give you more details, if we take the first step when we select an appointment category:

  • A specific value is populated for the category in the dataLayer which will be used as a trigger
  • A “PageView” event happens in the iframe environment
  • An “iframe.PageView” event happens in the website environment
  • The relevant tag (“iframe_category” in this case) is triggered

Gain valuable insights into user behavior and better optimize your campaigns

Thanks to this implementation, we were able to track all steps of the appointment booking process. We sent this data back to our analytics platform, in order to analyze global data and the drop rate from one step to another. On top of that, we sent the data to our advertising platforms, in order to use it to optimize our campaigns. This was a big change, as we used to optimize our campaigns towards people clicking on the “book appointment” button, which did not represent the amount of people going until the last step of the funnel.

To conclude, while iframes can be challenging to track, there are multiple ways to do so. More importantly, it gives you relevant information about user interactions in order to improve the user experience and it gives more data to the algorithms to optimize your campaigns. Don’t hesitate to reach out to Semetis if you need assistance with iframes!


publication author justine heeren
AUTHOR
Justine Heeren

| LinkedinThis email address is being protected from spambots. You need JavaScript enabled to view it.

%MCEPASTEBIN%

Tags:

Get in touch

Semetis | Rue de l'Escaut 122, 1080 Brussels - Belgium

welcome@semetis.com

Connect with us

Cookie Policy

This website uses cookies that are necessary to its functioning and required to achieve the purposes illustrated in the privacy policy. By accepting this OR scrolling this page OR continuing to browse, you agree to our privacy policy.