Setting Up Iframe Cross-Domain Tracking using Google Tag manager

This article assumes you have strong understanding of Google Analytics, Cross-Domain tracking and Google Tag Manager. If you are not familiar with those terms, please refer to my previous articles on Setting Google Analytics with Google Tag Manager and Setting Up Google Analytics Cross-Domain Tracking for more information.

In my last article, I have discussed about Cross-Domain tracking and how to implement it into your environment. In this article, I am going to show you how I implement Cross-Domain tracking on iFrame environment. First of all, by all means, if you can avoid using iframe in your work, please avoid it to save your precious time because it will be really dirty when you try to track 2 websites that is connected through iFrame. Of course, if you are like me who have been assigned with this task by my boss, then this article is here to save you lots of work.

First, copy paste the Google Tag Manager code snippet into your website. Then, you will need to set up a few constant variablesin your Google Tag Manager under Variables.

Set Up New Variable.

Then, choose create the variable name as cookieName and choose Constantas its variable type.

At here, the value to assign to cookieNameis entirely up to you. I will use _rollupGa as the value.

Assign value as cookieName

If you are planning to set up more than one cross-domain trackingacross your websites, I highly recommend you to set up a GTM Cross Domain Tracking Management Excel fileto ensure that you set a unique cookieName. Here is my example.

My way of managing GTM Cross Domain Tracking Code in an excel file

Then, create the rest of the constant variables using the same way I just showed you. In the end you should have 3 constant variables including cookieName, Domain and Iframe Selector. If you are not sure which value to put, just follow my example.

Constant variables and their values

After you have set up 3 constant variables, it is time to add the dirty custom javascript code. Create another new variable called Decorate Iframe Urland set the variable type as Custom Javascript.

Then, add the code snippet below into the custom javascript field. If you look carefully into the code, all the variables being wrapped by the double curly braces, {{}}are actually the constant variables that we have created earlier, feel free to play around it after you are familiar with the set up.

function() {
  return function() {
    try { 
      var gobj = window[window.GoogleAnalyticsObject];
      // Select the iframe you want to decorate
      var iframe = document.querySelector({{Iframe Selector}});
      var tracker, linker;
      if (gobj && iframe) {
        // Get tracker with current cookieName
        tracker = gobj.getAll().filter(function(obj) { return obj.b.data.values[':cookieName'] == {{cookieName}}; })[0];
        if (tracker) {
          linker = new window.gaplugins.Linker(tracker);
          iframe.src = linker.decorate(iframe.src);
        }
      }
    } catch(e) {
     console.log('GTM Error', e);
    }
  }
}

Now, lets create a new variable called Google Analytics Settings and set the variable type to Google Analytics Settings. In the configuration, set the tracking id as your Google Analytics tracking id. Then, add 3 new fields with the variable name and value shown in the screenshot below.

Create Google Analytics Settings variable with custom settings

Then, scroll down to Cross Domain Trackingsection, set Auto Link Domains to {{Domains}} and Decorate Formto True like the screenshot below.

Cross Domain Tracking Settings

Finally, head to Tags, add a new tag and name it as Universal Analytics Tag. After that, configure it as the screenshot below, then click SAVE.

In your Google Analytics settings, GA content reports only include the URI ​(which is just a URL without the domain name). So your homepage looks like /​ instead of www.yourdomain.com/​. Just imagine when you have multiple domains​ In your GA, ex: www.domainA.com and www.domainB.com,it shows a / ​when you visit both of their home pages​. That is why you need to add filter to show domain name ​in your GA.

Therefore, please set up the advance filter in your Google Analyticswith the settings below.

Whenever there is new domain being added​, you will have to add the new domain​ in GTM and GA referral exclusion list​. Otherwise, cross-domain tracking will not be working.

Test Your Cross Domain Tracking

First of all, you cannot test cross-domain tracking using real-time report​. Therefore, you will have to wait for the analytics data showed up in the static report after you have performed the action in your domain. If you happen to know how to use real time report to test the setup, please share with me in the comment session. I also want to learn how to do it.

To test cross-domain tracking, follow Simo Ahava’s guide on How to test if cross-domain tracking is working session in this article.