If you have Google Analytics, use an embedded online bookings widget on your website, and want to track the number of appointments made from the widget, then this article is for you!

Important Notes

  • These are advanced instructions, and we recommend getting help from your web developer/designer.
  • It could take a couple of days for your goals data to appear in Google Analytics.
  • Before implementing cross domain tracking, you should configure your Google Analytics property to ignore the destination domains as self-referrals through the admin section of the web interface. For information about referral exclusion lists and where to do this in the administration interface, read Referral Exclusions in the Google Help Center. [1]
  • For cross-domain tracking to work you need to use the same Google Analytics Tracking ID (Tracking ID) in your code snippets. So the Tracking ID in your Cliniko settings should be exactly the same as the Tracking ID on your non-Cliniko website.

How to Set It Up

In the <head>  section of your (non-Cliniko) website, copy and paste the following code snippet, making sure to replace UA-XX-XXXXXX with your Tracking ID, change YOUR-ACCOUNT to match your Cliniko account, and remove any old GA code:

<script>
  (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-XX-XXXXXX', 'auto', {'allowLinker': true});
 ga('require', 'linker');
 ga('linker:autoLink', ['YOUR-ACCOUNT.cliniko.com'], true );
 ga('send', 'pageview');
</script>

Next, instead of the regular iframe code, copy and paste the following code snippet, making sure to change YOUR-ACCOUNT to match your Cliniko account first:

<div id="myiFrame"></div>
<script>
var linker;
function addiFrame(divId, url, opt_hash) {
return function(tracker) {
window.linker = window.linker || new window.gaplugins.Linker(tracker);
var iFrame = document.createElement('iFrame');
iFrame.src = window.linker.decorate(url, opt_hash); iFrame.frameBorder = 0;
iFrame.scrolling = 'auto';
iFrame.width = '100%';
iFrame.height = '1000'; document.getElementById(divId).appendChild(iFrame);
};
}
// Dynamically add the iFrame to the page with proper linker parameters.
ga(addiFrame('myiFrame', 'https://YOUR-ACCOUNT.cliniko.com/bookings?embedded=true'));
</script>

Then, from within Google Analytics, to create a goal that will show you when appointments are made, go to Admin →  Goals → +New Goal:

  • Create a name for your goal (e.g. Appointment)
  • Select 'Destination' Type
  • Click 'Next step'
  • Next, change Equals to under Destination to Begins with
  • And in the field that says App screen name or web page URL enter /bookings/confirmation  
  • Then click Create Goal

Finally, confirm Recording is set to ON for your goal:

Google Analytics will now track appointments made from within the online bookings widget on your website.

Wrapping Up

Once you've completed the above steps, create some test appointments from within the online bookings widget on your website to make sure the code works correctly, but remember that it could take a couple of days for goal data to appear in your Google Analytics view.

When the goal data appears you will be able to find it in Reporting  → Conversions → Goals:

[1] https://developers.google.com/analytics/devguides/collection/analyticsjs/cross-domain#selfreferrals

Did this answer your question?