Disclaimer☝️: Unfortunately, Cliniko can't offer troubleshooting support for conversion tracking issues. Due to the complexity of the suggested workarounds and implementations existing outside of the Cliniko domain, debugging and solving issues is very challenging from our side. Keep an eye on our troubleshooting/FAQ guide for updates.

What's the problem with tracking conversions in embedded bookings?

iframe limitations 😩

Due to limitations with iframes, the referral data (source) doesn't get passed between the website (parent) to the (child) iframe. Google Analytics uses a function known as Cross-Domain Tracking to observe activity across multiple domains. Unfortunately, iframes don't support Cross-Domain Tracking. This will result in bookings reporting as "Direct" or from the parent website, instead of the original source.

Cliniko prioritises security 🔒

Whilst there are many workarounds available on the web which involve adding custom code to the embedded iframe. For patient security, Cliniko prevents any external/third-party code from running inside the booking pages. This means no custom code can be manually added and the "Custom HTML" tag in Google Tag Manager is blacklisted.

Limited workarounds 🔧

The workarounds we are left with are few and far between. The best recommendation would be to consider redirecting the booking to the Cliniko hosted domain if accurate conversion tracking is absolutely essential. If embedding the bookings portal is essential, below you will find a workaround that has working reports from some clinics. JavaScript, HTML and GTM experience is required. Cliniko, unfortunately, can't offer support for this workaround, more context in the "Disclaimer" at the top of this article.

Custom Event with Google Tag Manager

This is based on the method described in: https://www.impression.co.uk/blog/cross-domain-iframe-tracking-via-google-tag-manager/

The embedded bookings page will use a postMessage to notify the parent page when the booking confirmation page has been reached. Rather than using GTM/GA to track the completed booking from the Cliniko iframe, we can have the parent page listen for this message, push an event to the GTM data layer, and use that event as the trigger for our GA tag in GTM. So rather than Cliniko reporting to GA, what we’re doing is having Cliniko tell the parent page when it should report to GA. This way all reporting is done from the parent domain, eliminating the need for cross-domain tracking.

To respond to the message from the Cliniko iframe, include the following Javascript on the page which has the iframe embedded.

window.addEventListener("message", receiveMessage);

function receiveMessage(e) {

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

if (e.data.search('cliniko-bookings-page:confirmed') > -1) {

var dataLayer = window.dataLayer || (window.dataLayer = []);

dataLayer.push({

'event': 'clinikoBookingCompleted'

});

}

}

You can then set up a Universal Analytics tag in GTM which is triggered by this event. Start by creating a new Trigger in GTM, of type “Custom Event”, with the event name “clinikoBookingCompleted”.

Login to your Google Tag Manager account and select "New Tag" from your Tag Manager Workspace:

Click the Triggering section here:

Click the ✚ sign in the top-right:

Click "Trigger configuration" and select "Custom Event":

Name the Event and Trigger: clinikoBookingCompleted and hit Save:

Create a new “Google Analytics: Universal Analytics” tag, and assign it to the trigger you just created.

  • Set the Track Type to "Event"

  • Set the Category to "complete"

  • Set the Action to "booking"

Testing tags with Preview

Test the Event is firing correctly using the "Preview" tool in GTM. This tool can be used directly from your GTM account. You should see the "Preview" option near the top of your Workspace, here:

Once "Preview" mode is activated, a Debug panel will load on the pages where your GTM container is placed. The Debug tool will show you what tags are firing and what tags aren't. Upon completing a booking in the embedded iframe, the "clinikoBookingCompleted" tag should appear under the "Tags fired" section in the debug panel on your website.


Setting up the conversion "Goal" in Google Analytics

Login to your Google Analytics account and navigate to the "Admin" section:

Find the "Goals" option under the "View" section:

Click " +New Goal" to start the 3-step goal creation process:

Step 1: Choose "Make an appointment" from the suggested templates:

Step 2: Name the Goal as desired. Set the Type to "Event" before clicking "Continue":

Step 3: Use the GTM Event parameters to fire the Goal:

Open the tag configuration for the Universal Analytics tag in GTM. Check the following Event parameters are matching:

If you already have data feeding through to Google Analytics from Cliniko online bookings, you can click "Verify this Goal" to see if it's working:

After clicking "Verify this Goal" you should see the % conversion rate for the last 7 days;

Finally, "Save" the goal to complete setting up the Goal!

Did this answer your question?