Tracking Complex Interactions in Iframes Embedded Server-side – Google Analytics & Iframes, Pt 4

/

blog-ga-iframes-p4-tinypng

Welcome to part four of our incredibly poorly named two-part series on tracking user behavior within iframes. In Part One, we discussed how to track simple user interactions within cross-domain iframes by using the postMessage API. In Part Two, we discussed tracking complex interactions when the iframe in question is on the same domain as the parent frame. In Part Three, we reviewed how to transfer a users Client ID when tracking interactions in dynamically appended iframes. Today, we’ll be tackling tracking user interactions cross-domain when the iframe is added server-side.

STOP HERE AND READ THIS

For this to work, you need to be able to add unadulterated code on the iframe and the page the iframe is inserted on. If you’ve got a third-party service you’d like to track, and you can’t insert code snippets on their pages, this will not work and you’re out of luck. If you can’t add code to the iframe, you can’t measure interactions with it, period. Do not pass GO, do not collect $200. Sorry.

The Challenge

In order for you to be able to track user interactions within your iframe and maintain a consistent user and session within Google Analytics, you must be sending an identical Client ID with every hit you generate. The Client ID, in case you’ve forgotten, is a value stored within the _ga cookie that uniquely identifies a user (or browser, really) to Google Analytics; here’s yours:

Just kidding, you don’t have JavaScript enabled (or you’ve blocked us from setting the _ga cookie)!

Without a consistent Client ID, your Analytics data will be in bad shape; anytime a user interacts with your iframe, they’ll generate a brand new user and session in Google Analytics, and the data from their iframe interactions will be irreconcilable with the data from their other interactions on your site.

Getting Started

If your iframe is embedded in the HTML when the page is sent to the client, you’re going to have to be a little trickier. No matter what, resist the urge to re-load the iframe with a new parameter appended, as in our above example; this will wreck all kinds of havoc on your analytics, and it adds unnecessary additional load to your servers and/or application.

Instead, you’ll have to turn to our good friend, the postMessage API!

Using the postMessage API

For a strong introduction to the postMessage API, I’ll refer you to Part One in our series on iframes, where we use the postMessage API to trigger Google Analytics Events when simple user interactions occurred within our iframes.

In that case, we were sending a message OUT from our child iframe to our parent window; in this example, we’ll be doing the opposite to transfer in our Client ID.

Getting Our Client ID

Just like in Part 3, we’ll need to get our Client ID first, in order to send it our child iframe. Here are a few different ways to do that, as we discussed in detail in Part 3:

Generally, it is more reliable to extract the Client ID from the user’s _ga cookie than using the .get('clientId') method.

Once we have our Client ID handy, we’re ready to post it to our child iframe.

Sending a Message to the Child Iframe

In order to send a message to our child iframe, we’ll need to make sure the iframe is ready for our message. To do this, we’ll need to bind to the load event of our iframe. The simplest way to do this is to set the onload attribute inline – it’s not pretty, but it’s effective.

Next, in our iframe, we’ll need to add the following listener:

Once we’ve caught our Client ID, what we do next will depend on our implementation. If you’re using Google Tag Manager, push that value to the dataLayer:

Then, in the Google Tag Manager interface, create a Data Layer Variable with the value clientID.

Then set the clientId Field to Set on the first hit you send to Google Analytics. Fire that hit on the Custom Event clientIdDelivered.

If you’re using hardcoded Universal Analytics, fire your first hit within the logic that catches your Client ID, like this:

Last-ditch Options

If you simply can’t implement a client-side solution, the very last thing that you can do is have your server transpose the _ga cookie from a subsequent request to a Set-Cookie header on the response for the contents of the iframe. That should result in the user having the _ga cookie set on both domains, as desired.

Have we missed any edge cases? Share your iframe conundrums in the comments below.

Dan Wilkerson is a Software Engineer at LunaMetrics. He is passionate about web technology, measurement, and analysis. Dan is the winner of the 1999 Forge Road Elementary School Science Fair for his groundbreaking report on how magnets work. (ICP, take note.) Dan has worked at LunaMetrics in social media, as our marketing manager, and now in our analytics department.

  • Daniel Laidler

    Thx for info… I am not sure about the using the GA tracking code via the child iframe, but I have been looking further into passing messages from the child to the parent via postMessage. As previously mentioned (in comments to part 1), I have requirements to track iframes that can contain sensitive information (managed by 3rd Parties). Subsequently, GTM and external calls are not acceptable.

    With your implementation of the postMessage function from Child to Parent, I was able to uniquely identify all click elements (with a 3rd-party-side function that feeds back the CSS Selector of the clicked element). Therefore all clicks can be identified with a straight-forward script (with no external requests).

    Given that I have previously tracked iframes with an internal GTM script (which has it’s challenges), this offers an opportunity to run all GTM requirements from the parent, which I think is a preferred solution. Thx again!

    • Dan Wilkerson

      Sounds pretty smart! Thanks for sharing, Daniel

      Dan

  • Christian

    Hi Dan,

    Great post.

    One of my clients have an affiliate site where visitors leave domain 1 via an iframe to book and pay (on domain 2 – where my clients have inserted the Universal tracking code).

    I followed a setup with the “allow linker”-code, but something is wrong:

    ALL the e-commerce conversions are – according to Google Analytics – coming from the source “direct traffic”. That is off course not the case since they have great rankings in Google, are spending a lot on AdWords and so on…

    Hope you can help me out?

    Best regards,

    Christan

Contact Us.

LunaMetrics

24 S. 18th Street, Suite 100,
Pittsburgh, PA 15203

Follow Us

1.877.220.LUNA

1.412.381.5500

getinfo@lunametrics.com

Questions?
We'll get back to you
in ONE business day.