Digital marketers often rely on tools and technologies that incorporate IFrames into their implementation code. These IFrames serve as a way to efficiently provide a better user experience on websites, however, they also come with a few nuances you should be aware of when it comes to your analytics efforts.
Today, we’ll answer, at a high level, basic questions around Iframes. What they are, how they impact Google Analytics tracking and what you can do to ensure you have visibility into what actions your users are taking when IFrames are involved.
Q: What’s an IFrame?
A: An IFrame, or Inline Frame, is an HTML document embedded inside another HTML document on a website.
Q: Why are IFrames difficult to track in Google Analytics?
A: Anything that happens within an IFrame won’t be known to the parent frame unless told by the IFrame. And if the domain of the IFrame is different from the parent frame, cookie values will differ by default.
Q: What are the options for tracking IFrames?
A: There are a variety of options depending on your specific situation:
Option A) If you and your developers have the capability to put the content within the parent frame, this will allow for the most efficient and easiest method for new tracking requests.
Option B) If you aren’t able to utilize option A, and the IFrame shares a domain with the parent frame, & you or your developers have access to the codebase, you can send post messages to the parent frame for any event that occurred.
Ideally, for every event, send a dataLayer.push for the GTM container on the parent frame to trigger off of. (Sample code included at the end of this blog post.)
Option C) You can also install Google Tag Manager on the page of the parent frame. By creating event tags like normal and then creating an Exception Trigger for the Pageview tag to not fire within the IFrame.
Alternative Approach) If the above options don’t apply to you, the IFrame doesn’t share a domain with the parent frame and you or your developers can access the codebase, you can send post messages to the parent frame for any event that occurred. Ideally, for every event, send a dataLayer.push for the GTM container on the parent frame to trigger off of. (Sample code included at the end of this blog post.)
Note: We don’t recommend installing Google Tag Manager on this page as Google Analytics counts users based on the cookie values of top-level domains by default. If it’s installed on this page, there’s a chance users will be counted twice.
Lastly, if the IFrame doesn’t share a domain with the parent frame, you or your developers can’t access the codebase, and the third-party vendor can’t send post messages to the parent frame, you’ll be unable to track.
Sample postMessage Code:
You’ll notice that most of the code appears like a normal Enhanced Ecommerce event that utilizes the dataLayer (e.g. e-commerce object, products array). The key differences here are the postMessage method and that the object is stringified. We also recommend having information in the dataLayer to allow stakeholders to distinguish between normal transactions and BorderFree transactions (in this instance). Depending on the use case, there may be value in passing a custom dimension to identify that this event is coming from an iframe.
Have more questions about Iframes in your analytics implementation? Send them our way!