Tracking of bookings with Google Analytics and multiple domains

Question

I want to track multiple domains with Google analytics. In detail, I have a booking form which is opened in a fancybox. This booking form is loaded as iFrame from another domain (booking tool provider). This is how I open the fancybox:

<script type="text/javascript">
  $(function(){

    $("#fancylink").fancybox({
        'type'    :    'iframe',
        'width' : 700,
        'height' : 450,
        'autoScale' : false
    });    

    $("#fancylink").trigger('click');

  });
</script>

<a href="https://booking.tool.com/path/CODE?languageCode=en#http://www.maindomain.com/offers/booking.html" target="_blank" id="fancylink">Booking</a>

Now the bookings should be tracked in Google Analytics. I read this article about tracking iFrames.

In the header I have this:

<script type="text/javascript"> 
var _gaq = _gaq || []; 
_gaq.push(['_setAccount', 'UA-1234567-1']); 
_gaq.push(['_trackPageview']); 
_gaq.push(['_trackPageLoadTime']); 
_gaq.push(['_setDomainName', 'maindomain.com']);
_gaq.push(['_setAllowLinker', true]);
(function() { 
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
})(); 
</script>

In the body I have this piece of code:

<script type="text/javascript">
_gaq.push(function() {
  var pageTracker = _gat._getTrackerByName();
  var iframe = document.getElementById('fancybox-frame');
  if(iframe){
    iframe.src = pageTracker._getLinkerUrl('https://booking.tool.com/path/CODE?languageCode=en');
  }
});
</script>

Now I got the information that the tracking doesn't work. Currently, no booking appears in Google Analytics (only old purchaches where this type of code wasn't built in). The goal is to see the purchaches with the amount, which article and so on. How can this be done? According to the booking tool provider everything is set up for Google Analytics. So the problem should be on my side.

My questions:

How should the getLinkerUrl look like? Should it be:

• https://booking.tool.com (other domain)
• https://booking.tool.com/path/CODE?languageCode=en (currently used URL)
• https://booking.tool.com/path/CODE?languageCode=en#http://www.maindomain.com/offers/booking.html (iFrame URL)

Is the positioning of the second posted code in the body correct? Should it be in the header? Does it work with fancybox? What I'm doing wrong?

Edit:

Google code from first step in iFrame:

<script type="text/javascript">
    var _gaq = _gaq || [];

    _gaq.push(

        ['_setAccount', 'UA-7654321-1'],
        ['_setDomainName', 'tool.com'],
        ['_setAllowLinker', true],
        ['_trackPageview', '/booking/CheckAvailability']
    ,
        ['b._setAccount', 'UA-424242-11'],
        ['b._setDomainName', 'tool.com'],
        ['b._setAllowLinker', true],
        ['b._setCustomVar', 1,  'HotelID',  'SOME_ID',  3 ],
        ['b._setCustomVar', 2,  'PageName', 'CheckAvailability',                3 ],
        ['b._setCustomVar', 3,  'searchId', '',                 3 ],
        ['b._trackPageview', '/booking/CheckAvailability']

    );

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = 'https://ssl.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
</script>

Google code from last step in iFrame:

var _gaq = _gaq || [];
_gaq.push(
    ['_setAccount', 'UA-7654321-1'],
    ['_setDomainName', 'tool.com'],
    ['_setAllowLinker', true],
    ['_trackPageview', '/booking/BookingConfirmation'],
    ['_addTrans',
        'xyzabc', // order ID - required = reservationNumber
        'Shop', // affiliation or store name
        '800.00', // total - required = totalPrice
        '0', // tax (always 0 - we don't model that)
        '0', // shipping (always 0 - we don't model that)
        'Test', // guest city
        '', // state or province
        'DE' // guest country
    ],
    ['_addItem',
        'xyzabc', // order ID - required = reservationNumber
        'W3 - Wohnstudio III', // SKU/code - required = room code + room name
        'RateCode: SOME_PACKAGE_CODE, PromotionCode: ', // product name = rate code + promotioncode
        'Adults: 2, '
        +'Children: 0', // category or variation = 3 adults, 2 children
        '800.0', // unit price - required = price per night per room
        '1' // quantity - required = room nights
    ],
    ['_trackTrans']
    ,
    ['b._setAccount', 'UA-424242-11'],
    ['b._setDomainName', 'tool.com'],
    ['b._setAllowLinker', true],
    ['b._setCustomVar', 1, 'HotelID', 'SOME_ID', 2 ],
    ['b._setCustomVar', 2, 'PageName', 'BookingConfirmation', 3 ],
    ['b._setCustomVar', 3, 'searchId', '', 3 ],
    ['b._trackPageview', '/booking/BookingConfirmation'],
    ['b._addTrans',
        'xyzabc', // order ID - required = reservationNumber
        'SOME_ID', // affiliation or store name
        '800.00', // total - required = totalPrice
        '0', // tax (always 0 - we don't model that)
        '0', // shipping (always 0 - we don't model that)
        'Test', // guest city
        '', // state or province
        'DE' // guest country
    ],
    ['b._addItem',
        'abcxyz', // order ID - required = reservationNumber
        'W3 - Wohnstudio III', // SKU/code - required = room code + room name
        'RateCode: SOME_PACKAGE_CODE, PromotionCode: ', // product name = rate code + promotioncode
        'Adults: 2, '
        +'Children: 0', // category or variation = 3 adults, 2 children
        '800.0', // unit price - required = price per night per room
        '1' // quantity - required = room nights
    ],
    ['b._trackTrans']
);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = 'https://ssl.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})(); 

At the last step the URL changes to something like this

https://booking.tool.com/path/CODE?languageCode=de&package_1=SOME_PACKAGE_CODE#http://www.maindomain.com/offers/booking.html?package=SOME_PACKAGE_CODE

Edit 2:

Now I made this

_gaq.push(function() {
  alert('test');
  var pageTracker = _gat._getTrackerByName();
  var iframe = document.getElementById('fancybox-frame');
  if(iframe){
    iframe.src = pageTracker._getLinkerUrl('<?php echo $link ?>');
    alert(iframe.src);
  }
});

and I get a URL like

https://booking.tool.com/path/CODE?languageCode=en&__utma=60254466.192665702.4731206331.1344939538.1394680734.162&__utmb=60254466.7.9.1349681089757&__utmc=60312227&__utmx=-&__utmz=60254466.4731206661.2.4.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)&__utmv=-&__utmk=518158905

Without the first alert I never get the second alert. Therefore I think Mike's assumption is correct. What should I put into beforeLoad ? I don't see any errors with Firebug when opening the iFrame. In Google Analytics I can only see one page entry /toolprovider/BookingConfirmation .

Edit 3:

Now I use the following code:

$("#bookingLink").click(function() {
    var url = this.href;
    var pageTracker = _gat._getTrackerByName();
    $('#fancylink').attr('href', pageTracker._getLinkerUrl(url));
    $('#fancylink').trigger('click');
    return false;
});

But in the _gaq.push function he cannot find the iFrame. Even if I click on the fancylink directly the iFrame cannot be found. I also tried it with this piece of code

 $('#fancylink').fancybox({
    'type'    :    'iframe',
    'width' : 700,
    'height' : 450,
    'autoScale' : false,
    'beforeLoad' : function() {
        var url = $('bookingLink').attr('href');
        var pageTracker = _gat._getTrackerByName();
        $('#fancylink').attr('href', pageTracker._getLinkerUrl(url));
    }
});

Answer 1

First: Are you seeing any /booking/CheckAvailability and/or /booking/BookingConfirmation pages show up in the Content > Site Content > All Pages reporting of Google Analytics? If not, double check for syntax errors showing up in the JavaScript console of Chrome Developer tools or Firebug.

Second: I'd put an alert in after setting iframe.src -- I suspect that when that chunk of code is running, the fancyBox iframe isn't available yet, so the cross domain data never get's appended to the URL.

if(iframe){
  iframe.src = pageTracker._getLinkerUrl('https://booking.tool.com/path/CODE?languageCode=en');
  alert(iframe.src);
}

fancyBox does have a beforeLoad callback that might be of use -- can you post more details/snippet of how you open the overlay?

Edit: Someone who's more familiar with fancyBox could probably user the beforeLoad callback to change the URL on the link as it's used for the iFrame source... unfortunately, that's not me ;)

I'd try using a second URL, and set the href & trigger fancyBox on it when the first URL was clicked. Something like:

<a href="https://booking.tool.com/..." target="_blank" id="bookingLink">Booking</a>
<a href="" id="fancyLink" style="display:none"></a>
<script type="text/javascript">
jQuery(function($){
    $("#bookingLink").click(function(e) {
        var url = this.href;
        var pageTracker = _gat._getTrackerByName();
        $('#fancylink').href = pageTracker._getLinkerUrl(url);
        $("#fancylink").trigger('click');
        e.preventDefault();
    });
});
</script>