Unlocking the Potential of GA4: How to Track Clicks Within iFrames

If your website includes iFrames, you may have noticed that click events that occur within those iFrames are not tracked by default in Google Analytics 4 (GA4). This can create a gap in your understanding of user behavior on your site, especially since iFrames are often used for displaying ads, social media feeds, and other interactive content. In this article, we will share our journey in tracking iFrame click events in GA4.

Our Journey

We are facing a challenge in tracking clicks on a catalog slider called Flipsnack, which uses iFrame technology. Initially, we tried to check Flipsnack’s GA4 documentation, but unfortunately, tracking iFrames using GA4 is not yet available. We then researched other options to track iFrames on GA4, but it seemed impossible because the catalog is loaded from a different domain, making it impossible to track any events inside it, including click events.

However, we found a potential solution from a Stack Overflow thread on how to track clicks within an iFrame. Using the insights from the thread, we were able to create a JavaScript snippet that can track clicks within an iFrame.

Here is a step-by-step guide on how we successfully track clicks inside an iFrame.

Important note: Before proceeding to the step-by-step guide, I expect that you already have some knowledge in GA4/GTM(like GA4 and GTM is already integrated on your website).

1. You need to know what iFrame you want to track, in our case it is a catalog slider

2. To implement the tracking, you will need to edit the source code and insert a code snippet. In our case, we used a custom HTML block in WordPress to insert the snippet.

let monitor = setInterval(sendGA4Event, 100)
function sendGA4Event() {
  let iframe = document.activeElement
  if(iframe && iframe.tagName == 'IFRAME') {
    let frame_id = iframe.id
    console.log('Clicked!');
    let dataLayer = window.dataLayer || [];
    dataLayer.push({
      'event': frame_id,
      'eventCategory': 'catalog',
      'eventAction': 'click'
    });
   iframe.blur()
  }
}

So what does this snippet do? This snippet is a piece of JavaScript code that tracks clicks inside an iFrame element on a webpage. It works by continuously checking for an iFrame that is currently active (i.e., being clicked), and then sends a tracking event to Google Analytics 4 (GA4) using the iframe’s ID as the event name, ‘catalog’ as the event category, and ‘click’ as the event action. The code is inserted into the webpage’s source code and executed when the page is loaded.

3. To verify whether the click event inside the iFrame is working properly, you can check it through the console log and GA4 account. In my case, I clicked the catalog five times and then checked the console log to see if it detects the click. After that, I checked the GA4 account to confirm whether the click event inside the iFrame is firing correctly, as shown in the screenshot below. Please take note that it is important to have GA4/GTM already integrated on your website before checking whether the click event inside the iFrame is firing properly.

In conclusion, tracking iFrame click events in GA4 can be challenging, especially when the iFrame is loaded from a different domain. However, we found a solution to this problem by creating a JavaScript snippet that tracks clicks inside an iFrame element. By following our step-by-step guide, you too can implement this tracking method on your website and get a complete picture of user behavior, including interactions with content within iFrames. By tracking iFrame clicks, you can optimize your website’s performance and improve the user experience.