OnSched Event Listener
How to track OnSched Interactions and Appointment Booking As a Conversion with google tag manager
You can use the OnSched event listener and Google Tag Manager (GTM) to track interactions in the OnSched booking flow, such as successful appointment scheduling, as well as events and conversions in analytics platforms like Google Analytics (GA4), Piwik Pro, and Mixpanel. By implementing this tracking, you can gain valuable insights into user interactions and optimize your marketing strategies.
Step 1: Add the OnSched Event Listener Script
Start by copying the OnSched event listener script (provided below) and adding it to a new Custom HTML tag in Google Tag Manager. Configure this tag to trigger on DOM Ready, ensuring that the script runs only after the page’s DOM is fully loaded.
What Does the OnSched Event Listener Do?
The script listens for user interactions within the OnSched booking flow and triggers a dataLayer event with the name onsched_interactions. The event listener tracks key interactions such as:
- Booking Confirmation
- Time Slot Click
- Appointment Selection
- Appointment Creation
- Calendar View Change
These interactions are captured and pushed to the dataLayer, making them available for use in your analytics tools.
Step 2: Create a Custom Event Trigger in GTM
Next, set up a Custom Event Trigger in GTM to capture the dataLayer events emitted by the OnSched event listener. Use the event name onsched_interactions in your trigger configuration to ensure it fires whenever any OnSched interaction occurs.
Step 3: Define DataLayer Variables in GTM
To extract specific details about each OnSched interaction, create the following dataLayer variables in GTM:
- onsched_action: Returns the type of OnSched interaction/event (e.g., bookingConfirmation, clickTime, selectAppointment, etc.).
- [Other Variables]: Additional details about each interaction can be obtained from the event.detail object. For instance:
- Appointment details (e.g., time, date, attendee information)
- Calendar state changes (e.g., month or week view)
These variables allow you to dynamically capture and utilize detailed OnSched booking information in your analytics and marketing setups.
Step 4: Configure Marketing Tags and Pixels
Once you’ve created the triggers and variables, you can build your marketing tags and pixels in GTM. Examples include Google Analytics (GA4) event tags or Piwik Pro event tags. Attach the onsched_interactions trigger to your tags, and use the dataLayer variables to add context to the OnSched booking form events. This additional context enhances your analytics data by providing granular insights into user behaviour.
Additional Notes
The OnSched event listener script is Tag Manager agnostic, meaning it can be implemented in any Tag Management Solution (TMS). However, keep in mind that the core implementation principles remain the same regardless of the platform.
💡 Pro Tip: To implement the OnSched tracking faster, scroll down this page to find a GTM recipe template. Download, customize, and use this template to streamline your OnSched tracking implementation.
If you have any further adjustments or additional requirements, feel free to share!
<script>
(function() {
// Helper function to push dataLayer event
function pushDataLayer(eventName, detail) {
var dataLayerObject = {
event: "onsched_interactions",
onsched_action: eventName
};
// Add all keys from the event detail to the dataLayerObject
if (detail && typeof detail === "object") {
for (var key in detail) {
if (detail.hasOwnProperty(key)) {
dataLayerObject[key] = detail[key];
}
}
}
// Push to dataLayer
window.dataLayer = window.dataLayer || [];
window.dataLayer.push(dataLayerObject);
}
// Get references to the relevant OnSched elements
var availabilityElement = document.getElementById('availability');
var calendarElement = document.getElementById('calendar');
// Ensure the elements exist before attaching event listeners
if (availabilityElement) {
// Booking Confirmation Event
availabilityElement.addEventListener('bookingConfirmation', function(event) {
pushDataLayer('bookingConfirmation', event.detail);
});
// Click Time Event
availabilityElement.addEventListener('clickTime', function(event) {
pushDataLayer('clickTime', event.detail);
});
}
if (calendarElement) {
// Select Appointment Event
calendarElement.addEventListener('selectAppointment', function(event) {
pushDataLayer('selectAppointment', event.detail);
});
// Create Appointment Event (if applicable)
calendarElement.addEventListener('createAppointment', function(event) {
pushDataLayer('createAppointment', event.detail);
});
// Calendar View Change Event
calendarElement.addEventListener('calendarViewChange', function(event) {
pushDataLayer('calendarViewChange', event.detail);
});
}
})();
</script>
Video of how to use the listener
Related Event Listener
WSForm
Calendly
Typeform
download the google tag manager recipe for tracking OnSched Interactions and Appointment Booking As a Conversion
