In this article :
Integrating Semble Online Booking iFrame with Your Website's Analytics
The Semble Online Booking iFrame is designed to be embedded directly into the website of the practice. If this website makes use of a complex analytics setup it's important for events from the iFrame to be shared with the parent. This is why the Semble Online Booking iFrame broadcasts several events that developers can listen to in order to update their chosen analytics tool. This article describes a basic implementation.
You can start with some boilerplate HTML in a basic file called index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example Semble Integration</title>
</head>
<body>
<!-- page content -->
</body>
</html>
Now let's add a body! Go to your Semble account and get the iFrame link for an online booking configuration:
Now change the body tags to look like this:
<body>
<h1>Semble iFrame</h1>
<iframe src=https://online-booking.semble.io/?token=TOKEN width="100%" height="800" frameborder="0" scrolling="auto"></iframe>
</body>
If you open the file with your preferred browser you should see something like this:
Now let's add some Javascript in the head section of the index.html file:
<script>
window.addEventListener("message",(event) => {
if (event.origin!=="https://online-booking.semble.io") {
return;
} else {
const {data} = event;
if (!data.bookingStatus) return;
switch (data.bookingStatus) {
case 'selecting':
console.log('The widget has loaded but the user has not yet made a selection');
return;
case 'selected':
console.log('The user selected a slot');
console.log(`Duration of selected slot is ${data.bookingDuration}`);
console.log(`Time of selected slot ${data.bookingStart}`);
console.log(`Location of selected slot ${data.location}`);
console.log(`Practitioner of selected slot ${data.practitioner}`);
console.log(`Product name of selected slot ${data.productName}`);
console.log(`Product price name of selected slot ${data.productPrice}`);
//you can send these details to any analytics tool of your choice here
return;
case 'booked':
console.log('The user booked a slot');
console.log(`Duration of booked slot is ${data.bookingDuration}`);
console.log(`Time of booked slot ${data.bookingStart}`);
console.log(`Location of booked slot ${data.location}`);
console.log(`Practitioner of booked slot ${data.practitioner}`);
console.log(`Product name of booked slot ${data.productName}`);
console.log(`Product price name of booked slot ${data.productPrice}`);
//you can send these details to any analytics tool of your choice here
return;
default:
console.log('Unsupported')
}
}
})
</script>
Refresh the file and you should see a log on the console as soon as the page loads. Now select a booking and you will see another series of logs. Finally, make a booking and a further series of logs will appear.
Some considerations.
You will need to know how to manually send events to your analytics platform in order to forward the Semble events.
You can mix our event data with any of your tracking data such as client IDs and lead referral data.
It's easier to work with a Semble online booking configuration that does not redirect the user to a new page but it's not a requirement.
Integrating Google Analytics 4 (GA4) with Semble
This guide outlines how to integrate Google Analytics 4 (GA4) with the Semble Online Booking widget to track and analyse booking conversions.
Integrating GA4 with the Semble Online Booking widget allows you to track specific booking-related events, such as when a user selects a slot or completes a booking. This data can be invaluable for understanding user behaviour, optimising your booking process, and measuring the effectiveness of your marketing efforts.
Step 1: Embed the Semble Online Booking iFrame
First, make sure you have the Semble Online Booking iFrame embedded in your website. If you haven’t done this yet, follow the steps below:
Create an HTML file: This could be your existing page or a new one where you want to embed the booking widget.
Add the iFrame code: Replace
TOKENwith your unique Semble Online Booking token.htmlCopy code<body> <h1>Semble iFrame</h1> <iframe src="https://online-booking.semble.io/?token=TOKEN" width="100%" height="800" frameborder="0" scrolling="auto"></iframe> </body>
Preview: Open this file in your browser to ensure the booking widget is displayed correctly.
Step 2: Add Google Analytics 4 (GA4) to Your Site
Next, you need to integrate GA4 with your website. If you already have Google Tag Manager or GA4 set up, skip to Step 3. Otherwise, follow these instructions:
Insert the GA4 Script: Place the following code in the
<head>section of your HTML, replacingGA_MEASUREMENT_IDwith your GA4 measurement ID.htmlCopy code<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'GA_MEASUREMENT_ID'); </script>Set Up Google Tag Manager (Optional): If you're using Google Tag Manager, ensure it’s correctly set up on your site. Insert the following code snippet, replacing
TAG_ID_HEREwith your Tag Manager ID.htmlCopy code<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','TAG_ID_HERE');</script> <!-- End Google Tag Manager -->
Step 3: Capture Events from the Semble Online Booking Widget
Now, you’ll capture booking events from the Semble widget and send them to GA4 as custom events.
Add the Following Script: Place this script in the
<head>section of your HTML file to listen for booking events and send them to GA4.htmlCopy code<script> window.addEventListener("message", (event) => { if (event.origin !== "https://online-booking.semble.io") { return; } else { const { data } = event; if (!data.bookingStatus) return; switch (data.bookingStatus) { case 'selected': gtag('event', 'booking_selected', { 'event_category': 'booking', 'event_label': data.productName, 'value': data.productPrice }); break; case 'booked': gtag('event', 'booking_booked', { 'event_category': 'booking', 'event_label': data.productName, 'value': data.productPrice, 'location': data.location, 'practitioner': data.practitioner, 'duration': data.bookingDuration }); break; default: console.log('Unsupported booking status'); } } }); </script>Test Your Setup:
Load your webpage with the embedded Semble iFrame.
Open the browser’s developer console (
F12orRight-click > Inspect > Console).Interact with the booking widget. You should see logs in the console when an event like "booking_selected" or "booking_booked" occurs.
Step 4: Mark Custom Events as Conversions in GA4
Access Your GA4 Console:
Navigate to the Events section in your GA4 account.
Identify the Event:
Look for the
booking_bookedevent.
Mark as Conversion:
Toggle the switch next to the
booking_bookedevent to mark it as a conversion. This allows GA4 to track and report this event as a conversion.
For more detailed instructions, refer to Google's official guide.
Step 5: Additional Considerations
Custom Events: Each booking event will include data such as product name, price, location, and practitioner. This information is essential for detailed analysis and can be linked to other GA4 tracking data.
Google Tag Manager: If you use Google Tag Manager, you can create triggers based on these custom events to fire tags and track specific actions.
Analytics Integration: This integration works well with any existing analytics setup you have, allowing you to combine Semble data with other customer data for comprehensive insights.
Example and Further Customisation
For a complete example and additional customisation options, including tracking conversions and integrating with Google Ads, refer to this Bitbucket Snippet.