As a corporate or marketing team, when you spend money on a sponsored campaign to drive pet owners to your website and to book an appointment, you want to be able to track that user through to a completed booking on your website.
Select Your Setup
Depending on how you have configured Direct-Booking on your site, follow the technical instructions linked in the guides below:
Conversion Tracking for Embedded Widget: For tracking conversions when the widget is embedded directly on your website pages.
Conversion Tracking for Standalone Page: For tracking conversions when redirecting users to a dedicated booking URL.
This guide explains how your website can "listen" to the embedded Direct-Booking Widget and the Direct-Booking URLs using Google Tag Manager. By setting up this communication, your team can track user behaviour in real time, measure conversion rates, and seamlessly sync your website with the booking process.
Overview
The Direct-Booking Widget runs inside an embedded iframe. To track what happens inside this window, the widget broadcasts real-time alerts.
Track Analytics: See exactly when a user starts, abandons, or completes a booking (perfect for Google Analytics 4).
Sync UI States: Change elements on your main website based on what’s happening inside the widget.
Trigger Business Workflows: Launch custom disclaimers, thank-you pages, the moment a booking is finalised.
Debug User Sessions: Understand exactly what happened during user dropouts by capturing granular session data, allowing you to identify and resolve friction points in the booking process.
Log Activity: Record specific user actions and system events to maintain an accurate, historical audit trail for troubleshooting, compliance, or internal reporting.
How Data is Delivered
By deploying our GTM Listener Script, you can automatically catch these alerts and pass them directly into your website's Google Tag Manager Data Layer. This allows your marketing team to:
Create Custom Event Triggers for milestones like widget loads, step completions, and successful bookings.
Pass crucial data points (like Clinic ID or Session ID) into Data Layer Variables to enrich your GA4, Meta, or Google Ads tags.
Manage all tracking independently inside GTM without needing constant web developer support.
GTM Configuration
Build your Variables
Field Names
By default, the message data structure shown below is used for all Booking Widgets and Vetstoria-based URLs.
| Field Name | Type | Always Present | Description |
| event | string | Yes | The event that occurred on the booking widget. This is explained further below. |
| server | string | Yes | Environment that this booking request is served. |
| clinic_id | number | Yes | Internal ID of the clinic account on the Direct Booking System. |
| clinic_name | string | Yes | Name of the clinic. |
| clinic_hash | string | Yes | Unique account identifier for the clinic on the Direct Booking System. |
| page_name | string | Yes | Name of the page the user was at when the event message was generated. |
| client_type | string / null | Yes | Whether the user indicated themselves as a new client or a returning one. |
| booking_api_hash | string / null | Yes | Contains the unique identifier for the booking once the booking is completed. |
| appointment_ids | array of integers | Yes | Contains internal IDs of appointments that comprise the booking. |
| pims_appointment_ids | array of strings | Yes | Contains PIMS IDs of the appointments that comprise the booking. |
| booking_session_id | string / null | No | Unique identifier for the application instance of the booking tool. (may not be available until the application fully loads) - Not available by default |
| correlation_id | string / null | No | Unique identifier for the last interaction with the application back-end. (May not always be present or may not always change between messages) - Not available by default |
| timestamp_utc | ISO 8601 string/null | No | Event message generated time in UTC. - Not available by default |
| redirection_url | string / null | No | Redirection URLs if enabled. - Not available by default |
The inner data structure remains consistent across all pages. This allows your tracking tools to easily extract information without needing a different setup for every single step.
Event
The event field name attribute of the message payload can have one of the following values. New event names can be added with future improvements and changes to the booking process, but these names will not be changed.
| Event Name | Description |
| loaded | The booking tool has been initialized in the iframe. |
| engaged | The user has interacted with the booking tool. |
| page_changed | User navigated to a page in the booking process. |
| redirecting | The user is being redirected away from the booking tool/parent page due to post-booking redirection. |
| unloading | The booking tool is being unloaded due to an iframe refresh or navigation away. (may not always occur and depends on the browser support) |
| session_expired | The booking session has expired according to the back-end response. |
To configure variables to fire based on widget activity, build these variables first:
Go to Variables > New > Variable Configuration.
Select Data Layer Variable.
Set the Data Layer Variable Name to:
oabpEventData.{{field_name}}Set the Data Layer Name for the appropriate field Name.
You can create these variables for the required Field Names mentioned above.
Important GTM Configuration Note: Google Analytics 4 and GTM do not favor hyphens in event or variable names. Our recommended GTM listener script automatically converts all hyphens (-) to underscores (_) (e.g., pims-appointment-ids becomes pims_appointment_ids) before pushing them to the Data Layer. Use the underscore versions when setting up your GTM Triggers.
Page Name
When a user moves through the booking journey, the page_name attribute updates. This attribute can have one of the following values.
| Page Name | Description |
| referral-type | Type of referral selection page (only for referral clinics) |
| referral-details | Referral details page (only for referral clinics) |
| branch | Branch/site selection page |
| appointment-type | Appointment type selection page |
| slots | Time-slot selection page |
| pet-owner-details | Contact and personal details page |
| verification | Payment / SMS verification page |
| confirm | Booking information review page (deprecated) |
| completed | Booking success page |
| post-confirmation | Custom page (only if configured) that appears after booking is successful |
| ncf-pet-info | New Client Form page (only if enabled for the clinic) |
To configure the Page Name:
Go to Variables > New > Variable Configuration.
Select Data Layer Variable.
Set the Data Layer Variable Name to:
oabpEventData.page_nameSet the Data Layer Name for the appropriate name.
Other Variables
If you wish to see the event that occurred and a user's Page Name, you can set up a custom JavaScript to combine them. To configure this:
Go to Variables > New > Variable Configuration.
Select Custom JavaScript.
Set the Custom JavaScript mentioned below.
Set the Name for the appropriate variable name.
function() {
var eventName = {{Event name}};
var pageName = {{Page Name}};
return eventName + ':' + pageName;
}
Setting your triggers
To configure any tag (like a GA4 event) to fire based on widget activity, build this trigger first:
Go to Triggers > New > Trigger Configuration.
Select Custom Event.
Set the Event Name to:
oabp_eventSet to fire on: All Custom Events.
Set the name for the appropriate Trigger Name.
Configuring Your Tags
Event Listener
This tag acts as a listener and a bridge. It waits for a specific message from the Direct-Booking Widget and then passes that information directly to Google Tag Manager so you can track it. To configure this:
Go to Tags > New > Tag Configuration.
Select Custom HTML.
Set the Custom HTML mentioned below.
Set to Trigger on: Initialization - All Pages.
Set the name for the appropriate Tag Name.
<script type="text/javascript">
(function(window) {
window.addEventListener("message", function(event) {
if ((event.data.namespace !== "oabp") || (event.data.version !== 1)) return;
console.log("v2 OABP Message Listener : received message", event.data);
dataLayer.push({
'event': "oabp_event",
'oabpEventData': event.data.data
});
});
})(window);
</script>
GA4 Event Forwarder
This configuration defines the Google Analytics 4 Event Tag in GTM. Its job is to take the data captured by your listener and send it securely to your Google Analytics property.
To configure this:
Go to Tags > New > Tag Configuration.
Select Google Analytics: GA4 Event.
Set your unique, valid GA4 data stream ID (replace with your actual production ID if different) as the Measurement ID.
Set the Event Name that you would prefer to appear in your GA4 reports.
Set the Event Parameters for the created Data Variables.
Set to Trigger on: Custom Trigger that was created to capture Direct Booking events.
Set the name for the appropriate Tag Name.
Publish Changes
Now publish your changes, and you should start collecting event data. It will immediately start processing and identifying events for Google Analytics.
Tracking Appointments from Direct Booking URLs
To automatically track and report on appointments booked directly within Vetstoria URLs, you must link your Google Tag Manager (GTM) container to Vetstoria.
To configure this:
Log into your Vetstoria account.
Navigate to your clinic's Advanced Settings.
Locate the Google Tag Manager Container ID field and paste your GTM ID (e.g.,
GTM-XXXXXX). If you do not see this option, you can contact the Direct Booking Support team to have this enabled.Save your changes.
Once this integration is active, Direct Booking will fire a Data Layer event (event name: oabp_v1_message) with the same nested data structure. This will flow seamlessly into GTM and be forwarded to your GA4 property for tracking.
If you have any questions or if you need further help, please use the 'submit a request' form linked at the top of this page to reach out to our support team.
Comments
Please sign in to leave a comment.