Capturing Online Bo...
 
Notifications
Clear all

Capturing Online Booking System booking events for insights and analytics

1 Posts
1 Users
0 Likes
142 Views
(@danielvernall)
Posts: 37
Trusted Member Admin
Topic starter
 

The Online Booking System can be embedded in practice websites, enabling bookings to be made directly on your website, without redirecting the visitor. See this post for instructions on how to embed the online diary: https://software4dentists.co.uk/forums/tutorials/how-to-add-the-online-booking-diary-to-your-practice-website

 

The embedded online booking system also has the benefit of enabling you to capture booking events in your own website and pass this data to whichever services you integrate with for analytics and insights.

The following information is intended for your website developers and provides sample code demonstrating handling booking events.

Listen for window messages

The online booking system produces a booking event when a booking is completed. The event takes the form of a window message posted to the parent window. The following JavaScript code demonstrates handling the window message:

const handleBookingEvents = () => {
  const baseHost = "mydentalbooking.co.uk";
  window.addEventListener("message", (e) => {
    // Ignore untrusted window messages
    // Allowed origins:
    //  -  https://mydentalbooking.co.uk 
    //  -  https://*.mydentalbooking.co.uk 
    // If not the base origin and not a subdomain of the base origin, ignore the message
    if (e.origin !== ` https://${baseHost}` 
      && !(e.origin.startsWith("https://") && e.origin.endsWith(`.${baseHost}`))) {
      return;
    }
    if ("bookingStatus" in e.data) {
      const { bookingStatus, data } = e.data;
      console.log("Booking status message received:", bookingStatus);
      console.log("Data", data);
      // Do whatever is needed with the booking data ...
      // e.g., SomeAnalyticsService.post(data);
    }
  });
};
if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", () => {
    handleBookingEvents();
  });
} else {
  handleBookingEvents();
}

(Note: the code above uses modern JavaScript which is compatible with all modern browsers. If your website targets older browsers you will need to adjust the code or transpile it using a library such as babel.js.)

The code adds the event listener on page load, and can be placed in the head or body of the page.

Pass the data to your chosen service via its API

The above code prints the booking data to the console on successful booking. To use a service, just take the data object and post it to your chosen service.

For example, for Google Analytics using a Google tag (which is previously configured):

...
if ("bookingStatus" in e.data) {
    const { bookingStatus, data } = e.data;
    gtag('event', 'Booking Success', {
        'data': data, 
    });
}
...

 

 

This topic was modified 5 months ago 4 times by Daniel Vernall
 
Posted : 06/11/2023 6:58 pm
Share: