home > support > solution library > booking engine > tracking via google analytics

Tracking with Universal Google Analytics

JavaScript tracking tags can be placed on the first and last pages of the booking process via Channel Manager. This tutorial details some of the considerations for using this with the popular Google Analytics service however the techniques should be applicable to other similar solutions.

This page uses the latest 'Universal analytics' code, view the older 'Asynchronous' code.

For more information, check Universal Google Analitycs style tracking tags, for older tag formats please refer to the Google Analytics documentation.

A note on Marketplace Bookings

When a booking is made via the TourCMS Marketplace your JavaScript code will not be used, thus any bookings made via this method will not show in your Google Analytics.

Basic tracking

As the TourCMS Booking Engine is hosted on a different domain to your website two small changes need to be made to the code on your website so that Google Analytics can track users correctly:

If you add the booking engine as a link or popup

The first step is to add the following lines to the standard tracking code that you received from Google (don't forget to add it in your website too inside at the end of 'head' tag):



<script type="text/javascript">
(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-XXXXXXXX-X', 'auto', {'allowLinker': true});               // Replace with your property ID.
ga('require', 'linker');

ga('linker:autoLink', ['YOUR_WEBSITE.com', 'tourcms.com']);                 // OPTION 1 [Default]
//ga('linker:autoLink', ['YOUR_WEBSITE.com','tourcms.com'], true);          // OPTION 2: Add hash/anchor support
//ga('linker:autoLink', ['YOUR_WEBSITE.com','tourcms.com'], false, true);   // OPTION 3: Add form support

ga('send', 'pageview');                                                     // Send hits after initializing the auto-linker plug-in.

</script>

** Form option may not work ** on pages with particular methods of linking:

  • If href has "Javascript" inside the link. Example:
    <a class="button" href="javascript:function1()">Submit</a>
  • If the element have an "onclick" attribute and the url is specified in the "onclick". Example:
    <a class="button" href="#" onclick="function1()">Submit</a>

In either situation, will be necessary to use a decorated URL (Google decorate utiliy method).

In addition to tweaking the code on your product page this tracking code should also be added to the TourCMS Booking Engine itself. This can be achieved by logging into TourCMS then heading to Channel Manager > Tracking & Analytics and pasting the code into the relevant box for any step you wish to track. For the purposes of Google Analytics you will likely initally want to copy the same code into each box. UA-XXXXXXXX-X should be replaced with your own Analytics account ID.

Checking code is working on the links

To check if this is working correctly just click on one of your updated "Book online" links, once you get to the first step of the TourCMS Booking Engine take a look at the location bar of your web browser. You should see that you are at a web address beginning https://live.tourcms.com..., you will know the tracking has worked if you can see extra parameters like _ga=1.135723378.277685062.1486542649 at the end of the url.

If you IFRAME the booking engine

The first thing to do is to give the IFRAME that is holding your booking engine an ID, like so:

<iframe id="myIFrame" src="https://live.tourcms.com/reserve/r1.php?t=7&a=828&w=486&ty=t&k=3c800be4e2a9&if=1&ifwidth=780" style="width: 800px; height: 1000px;"></iframe>

In the page in YOUR_WEBSITE.com (where the iframe is), add the following Google Analytics tracking code:


<script type="text/javascript">
(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-XXXXXXXX-1', 'auto');    // Replace with your property ID.

ga(function(tracker) {
  var clientId = tracker.get('clientId');
  var iframe = document.getElementById('myIFrame');
  var frameWindow = document.getElementById('myIFrame').contentWindow;
  document.getElementById('myIFrame').onload = function() {
    frameWindow.postMessage(clientId, iframe.src);
  }
});
</script>

In tourcms.com in the step 1, add next code to allow receiving the message inside iframe:

<script type="text/javascript">
(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) {

  if (event.origin != 'YOUR_WEBSITE.com') return;   // Change YOUR_WEBSITE.com with your domain (where the iframe is)

  //console.log("ClientId:");                       // Uncomment off next to lines to check if it is receiving clientId and check the browser developer tools
  //console.info("event.data");
  ga('create', 'UA-XXXXXXXX-1', 'auto', {           // Replace with your property ID
    clientId: event.data
  });
});

</script>

In tourcms.com in rest of the steps, add next code:

<script type="text/javascript">
(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-XXXXXXXX-1', 'auto');            // Replace with your property ID

</script>

Checking code is working on the iframe

You can check if this is working correctly using developer tools from your browser. In Network tab, ClientId must be have sent as cookie parameter like _ga=GA1.2.277685062.1486542649. As well, you can check it uncommenting off the two lines above (console.log and console.info) and check the CliendId in the console.


[Optional] "Goal" Tracking

A goal in Google Analytics is a simple way to track the success of a process completed by a user, in this case a completed booking.

To set up a goal for a completed TourCMS booking:

  1. Log into your Google Analytics account, head to your Profile settings, click Edit on the Profile then click Add a Goal
  2. Enter a meaningful Goal Name (such as "Booking made")
  3. Set the Goal Type to "URL Destination".
  4. Set the Match Type to "Head Match" and enter "/reserve/r6.php" (without the quotes) for the Goal URL

Once this is completed you should start seeing completed Goals in your Analytics when bookings are made (Google Analytics reports are not updated immediately so the stats may trail behind live bookings).

If you have an enquiry or brochure request form you may want to set that up as a Goal too.

[Optional] E-commerce tracking

This is a fairly advanced step, you may find it easier to track the success of campaigns or partners using the standard TourCMS affiliate / agent tracking (perhaps via the TourCMS Marketplace).

Google Analytics allows tracking of e-commerce items such as orders and products, this is entirely optional but can be quite powerful. Setting up E-commerce tracking on your account is a three step process.

  1. Log into your Google Analytics account, head to your Profile settings, click Edit on the Profile and change the E-Commerce Website setting from No to Yes
  2. You need to update initial code to load the new ecommerce plug-in after you create the tracker object and send any initial pageviews. Example:
    
    ga('create', 'UA-XXXXXXX-Y', 'auto');         // Replace with your property ID
    ga('send', 'pageview');
    ga('require', 'ecommerce');                   // Load the ecommerce plug-in.
  3. Add some additional code to the basic tracking previously entered into TourCMS, this is detailed below:

The extra tags we will be adding use the ecommerce:addItem, ecommerce:addTransaction and ecommerce:send from Universal Google Analytics Methods. ecommerce:addItem will be used to record details of the main Tour/Hotel that is being booked (for Multi-room Hotel type bookings you may wish to leave this out as it may be less relavent), ecommerce:addTransaction will be used to record the details of the booking itself (booking ID, total amount etc) and ecommerce:send tells Google Analytics that we are done adding data to the transaction, so that it can be stored.

The following text should be added to the code from the Basic tracking section above into the box for Step 5 - Thank you page only, on the line after ga('require', 'ecommerce');. The TourCMS tags used should be fine for most cases however their usage and possible alternative tags are detailed in the Documentation manual (Emails / Invoices)


ga('ecommerce:addTransaction', {
  'id': '%b_id%',                                       // Transaction ID. *Required.
  'affiliation': '',                                    // Affiliation or store name.
  'revenue': '%b_base_sale_price_total_inctax_exlp%',   // Total.
  'shipping': '',                                       // Shipping.
  'tax': ''                                             // Tax.
});

ga('ecommerce:addItem', {
  'id': '%b_id%',                                       // Transaction ID. *Required.
  'name': '%t_name_web%',                               // Product name. *Required
  'sku': '%t_code%',                                    // SKU/code
  'category': '',                                       // Category or variation
  'price': '%t_price%',                                 // Unit price
  'quantity': '%customers_total%'                       // Quantity
});

ga('ecommerce:send');                                   // Send transaction and item data to Google Analytics.

As per the comments above Google Analtics stipulates that an Item must have an ID and name, if you are including the ecommerce:addItem section you must make sure you are filling these sections in.

The above example uses the Tour Code ( %t_code% ) for the SKU, if you do not wish to set up Tour Codes for your tours, you could switch this out for the Tour ID ( %t_id% ).

Once this is completed you should start to see Transactions and Items in your Google Analytics reports as bookings come in (again, it may take a while for bookings to appear in your reports).

More information