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

  • gtag.js does not currently support this feature. 
  • To complete these steps, you'll need to be comfortable editing HTML and coding in JavaScript, or have help from an experienced web developer.
  • 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="my-cliniko-online-bookings"></div>

<script type='text/javascript'>

(function(){

  var linker,

      iFrame = document.createElement('iframe'),

      divId = 'my-cliniko-online-bookings';

  iFrame.id = 'my-cliniko-online-bookings-iframe';

  iFrame.src = 'https://YOUR-ACCOUNT.cliniko.com/bookings?embedded=true';

  iFrame.frameBorder = 0;

  iFrame.scrolling = 'auto';

  iFrame.width = '100%';

  iFrame.height = '1000';

  iFrame.style = 'pointer-events: auto;'

  function decorateiFrame(divId, url, opt_hash) {

    return function(tracker) {

      window.linker = window.linker || new window.gaplugins.Linker(tracker);

      iFrame.src = window.linker.decorate(url, opt_hash);

    };

  }

 

  // Dynamically add the iFrame to the page with proper linker parameters.

  ga(decorateiFrame(divId, iFrame.src));

 

  document.getElementById(divId).appendChild(iFrame);

  // Listen to the iFrame for resize events

  window.addEventListener('message', function handleIFrameMessage(e) {

  var clinikoBookings = document.getElementById('my-cliniko-online-bookings-iframe');

  if (typeof e.data !== 'string') return;

  if (e.data.search('cliniko-bookings-resize') > -1) {

    var height = Number(e.data.split(':')[1]);

    clinikoBookings.style.height = height + 50 + 'px';

  }

  e.data.search('cliniko-bookings-page') > -1 && clinikoBookings.scrollIntoView();

  });

})();

</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

🚨Note: Some browsers can contain plugins that will prevent Google Analytics from working properly. While you can still embed online bookings into your website, if a patient is using a browser that for any reason is blocking Google Analytics, it will not be able to track the details of their booking. 

Did this answer your question?