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.

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.

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.

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'

});

}

}

Implementation tip:

The Event Listener code can be hit and miss, depending on the implementation. I've had success calling the script using a script source tag, for example:

The Event Listener is stored in the "script.js" file and called to page where the iframe is embedded using a "<script scr="filename">" tag.

Event Listener in a separate JS file:
​

The JS Event Listener is called to index page, or wherever the iframe is installed:
​

You can then set up a Google Analytics: GA4 Event in GTM which is triggered by this data layer 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 "Google Analytics: GA4 Event tag", and assign it to the trigger you just created:
​

Name the event according to your preferences, click "Save" and finally "Publish" your GTM workspace.

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

Tag Assistant will open in a new tab where you will be asked to input the domain where GTM is installed:
​

Complete a booking to confirm if the Event Listener implementation is working or not:

Check the "Data layer" tab and confirm the clinikoBookingCompleted event is appearing:

Cliniko has limited support for GTM issues. Unfortunately, Cliniko can't offer troubleshooting support for this workaround. Due to the complexity of the workaround and implementation existing outside of the Cliniko domain, debugging and solving issues is very challenging from our side.