Analytics
2K members online now
2K members online now
Dive into multiple domain (Cross/Sub) tracking, implementing Ecommerce and Enhanced Ecommerce, setting up Event tracking, and Universal Analytics code.
 
Guide Me
star_border
Reply

Unique Analytics Implementation - Cross Domain + same-domain iFrame

Visitor ✭ ✭ ✭
# 1
Visitor ✭ ✭ ✭

We're moving over to Universal analytics and are having trouble setting up the tracking code to work.

 

Our website links over to a third-party site, and on that site is an iframe shopping cart. The source of that iframe is the same domain of the third-party site.

 

Originating Domain:

 

  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-XXXXXXX-X', 'auto', {'allowLinker': true});
  ga('require', 'linker');
  ga('linker:autoLink', ['third-party.com']);
  ga('send', 'pageview');
  ga('require', 'ecommerce');

 

Third-party Website:

 

   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-XXXXXXX-X', 'auto', {'allowLinker': true});
    ga(function(tracker) {
            var clientId = tracker.get('clientId');
            var frameWindow = document.getElementById('apiframe').contentWindow;
            frameWindow.postMessage(clientId, 'https://inc.third-party.com/something');
    });
    ga('require', 'linker');
    ga('linker:autoLink', ['original-website.com']);
    ga('send', 'pageview');
    ga('require', 'ecommerce');

 

Lower on the page on Third-party Website:

 

<iframe id="apiframe" src="https://inc.ticket-ops.com/something"></iframe>			

Inside the iFrame page:

 

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
window.addEventListener('message', function(event) {
ga('create', 'UA-3742365-2', 'auto', {
clientId: event.data
});
ga('send', 'pageview');
ga('require', 'ecommerce');
});

 

The third-party.com page has its own tracker as well, but it has been named so should not be interfering here. In our analytics, we lose any data to our profile that should be sent from the iFrame. If we remove the "clientID: event.data" line from the iFrame, we get the data but Analytics shows our originating domain as the source (rather than the actual source like Google, etc.)

 

Oddly enough, we had it working and tested a transaction with Google as the source and it showed up fine. An hour later, Analytics actually changed the source of that transaction to the originating domain.

 

Any ideas?

Unique Analytics Implementation - Cross Domain + same-domain iFrame

Explorer ✭ ✭ ✭
# 2
Explorer ✭ ✭ ✭

Hi Nathan,

 

You will need to get client ID from ga.getAll(); function and embed it within Iframe url before it gets load on site page
Something like this
<iframe id="apiframe" src="https://inc.ticket-ops.com/something&_ga=1.122222222.755554556.1475444400"></iframe>

This will make sure cross domain tracking is setup and ultimately original source will be tracked.

 

Hit like if this help

Kind Regards Noman Karim

follow us @MarketLytics