postMessage in Google Tag Manager: Cross Domain iframe Tracking
Warning: This one gets a little bit technical.
Why This Approach?
I recently ran into a situation where a site housed an iframe that displayed content from a third party vendor. Naturally we wanted to use Google Analytics to track interactions within the iframe. But, there was a problem — dun dun dun…
The issue was that since the third party iframe was on a different domain than the parent window, Google Analytics would create a new client id for the user. In other words, since we were dealing with two domains, Google Analytics would see this user as two different users.
My first thought was that we could just decorate the src attribute in the iframe with the client ID. The challenge with this was that a race condition occurred where the client ID was not necessarily available at the time the HTML to call the iframe had rendered. I could have used the Javascript setInterval method to keep looking for the client ID until it was available. Ultimately though I didn’t like the delay it would have caused on the page, so this was out.
Then I had an idea to use postMessage to communicate between the cross domain iframes and fire calls via Google Tag Manager.
Implementing postMessage for Cross Domain iframe in Google Tag Manager
Then I had the idea to use the postMessage method to make a call from the iframe to its parent when an event took place. For this article I will not go into detail about how postMessage works, but the main takeaway is that postMessage is kind of like a tin can telephone. The iframe gets one can, the parent window gets the other, and messages can be sent back and forth between the two.
We need to do two things to implement postMessage:
- We need to set make a call from one window to the other.
- We need to listen for that call after it is made.
More info on the nuts and bolts of how postMessage works can be found here.
The Google Tag Manager Set Up
Step 1: The Containers
The parent page already had the GTM container I was using for that site implemented. I created a second GTM container called iFrame which was implemented on the iFrame. In theory I could have done this all in a single container, but I opted for a second container so that I would not have to write exceptions to existing triggers to prevent tags from firing in the iFrame. Also, this provided a way to keep the main container’s contents more organized.
Step 2: The postMessage Call
As mentioned above, the first part of using postMessage in Google Tag Manager is to make a call. In our situation, we’ll be making that call from the iframe to the parent. Therefore, we’ll need a tag in place in the iframe container to do just that. I used a Custom Javascript tag in Google Tag Manager with this code:
<script type="text/javascript">
parent.postMessage(
{
"event":"iframe click",
"eventCategory":"iframe coupon",
"eventAction":"click",
"eventLabel":"save big money"
},
"https://www.mainsite.com"
);
</script>
The trigger that is applied to the tag causes the tag to fire when the button was clicked.
Listening for the Call
The second piece of using the postMessage method in GTM was to listen for the call from the iframe on the main site. To do this, I set up a Custom Javascript tag in GTM in the main site container with the following code:
<script type="text/javascript">
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event){
dataLayer.push(event.data);
}
</script>
The trigger for the listener is on DOM Ready when the page that contains the iframe loads.
Step 4: Firing the Event Call
Now that we are making a call from the iframe and listening for that call in the parent window, the last step is to set up a tag that is triggered from the data sent in postMessage.
If you look at the code in step 3 above, you will see that we are making a push call to the dataLayer. The contents of that push call are the object we sent from our message in step 2:
{
"event":"iframe click",
"eventCategory":"iframe coupon",
"eventAction":"click",
"eventLabel":"save big money"
}
We can now simply create a trigger that uses the iframe click event, and apply that trigger to a Google Tag Manager instance of a Google Analytics event call.
The firing trigger
The Google Analytics Config
Join the Conversation...