The Semble Online Booking iFrame can be embedded into a practice's website. It broadcasts events for analytics tracking, and this article covers a basic implementation for developers.
Note: If you have embedded the online booking iFrame to your website and add redirect links, please be aware that the redirect links will also be embedded within the same frame. They will not open in a new tab.
In this article :
Integrating Semble Online Booking iFrame with Your Website's Analytics
Integrating Google Analytics 4 (GA4) with Semble
Additional Considerations
Linked articles:
Integrating Semble Online Booking iFrame with Your Website's Analytics
Integrating Semble’s Online Booking iFrame with your website's analytics tools enables seamless tracking and enhanced insights into your booking activity.
By embedding the iFrame into your website, you can capture important events like booking selections and completions, ensuring that your analytics platform receives real-time updates.
1. Start with Boilerplate HTML: Create a basic HTML file called index.html.
2. Get the iFrame Link: Go to your Semble account and get the iFrame link for your online booking configuration.
3. Update the Body Tags: Replace the body tags in your index.html file with the provided iFrame link from Semble.
Example:
<body>
<h1>Semble iFrame</h1>
<iframe
src="https://online-booking.semble.io/?token=TOKEN"
width="100%"
height="800"
frameborder="0"
scrolling="auto"
allow="payment *">
</iframe>
</body>
4. Test in Browser: Open the file in your preferred browser. You should see the embedded booking page:
5. Add JavaScript: Insert JavaScript code into the <head> section of your index.html file.
Example:
<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>
6. Refresh the Page: Refresh the file in your browser, and you should see a log in the console as soon as the page loads.
7. Select a Booking: Select a booking, and you should see another set of logs in the console.
8. Make a Booking: Complete a booking and observe the final set of logs in the console.
Considerations:
You will need to know how to manually send events to your analytics platform to forward Semble events.
You can mix Semble's event data with your own 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
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:
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.
<iframe src="https://online-booking.semble.io/?token=TOKEN" width="100%" height="800" frameborder="0" scrolling="auto" allow="payment *"></iframe>
- Preview: Open this file in your browser to ensure the booking widget is displayed correctly.
Step 2. (Optional) Add Google Analytics 4 (GA4) to Your Site:
If you have set up GA4, skip to step 3.
If you haven’t set up GA4, follow these steps:
- Insert the GA4 Script: Place the following code in the
<head>section of your HTML, replacingGA_MEASUREMENT_IDwith your GA4 measurement ID.
<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.
<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>
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.
<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:
1. Open your webpage with the embedded Semble iFrame.
2. Open the browser’s developer console (F12 or Right-click > Inspect > Console).
3. Interact with the booking widget (select a slot or complete a booking).
4. 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 and navigate to the Events section.
- Find the
"booking_booked"event in the list. - Toggle the switch next to
"booking_booked"to mark it as a conversion.
For more detailed instructions, refer to Google's official guide.
Additional Considerations
Tracking Limitations with Redirect-Based Payment Methods:
If a patient selects Klarna as their payment method during booking, the payment process will trigger a full-page redirect (outside of the iFrame). This means standard iFrame-based event tracking won't capture the final booking confirmation.
What you can do:
- Set up a custom booking success page and track visits to that page to monitor successful bookings instead.
This enables support for third-party payment services that require redirection.
-
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.
For a complete example and additional customisation options, including tracking conversions and integrating with Google Ads, refer to this Bitbucket Snippet.