Amelia Appointment Booking Form Event Listener
How to track Amelia Appointment Booking Form Interactions and Appointment Booking In Google Analytics (GA4), etc., with google tag manager
Using the Amelia appointment booking form event listener script and Google Tag Manager, you can seamlessly track appointment booking form interactions and successful scheduling as events and conversions in analytics platforms like Google Analytics (GA4), Meta Ads, Google Ads, and Piwik Pro. This process provides valuable data for understanding user behaviour and optimizing your appointment scheduling funnel.
Follow these steps to implement the tracking:
Step 1: Add the Event Listener Script in GTM
Start by creating a new Custom HTML tag in Google Tag Manager. Copy and paste the Amelia event listener script into this tag.
Configure the tag to trigger on DOM Ready to ensure it fires after the Amelia form is fully loaded.
The Amelia appointment booking form event listener script listens for user interactions with the appointment booking form and pushes events to the dataLayer. The primary event name is ameliaAppointmentEvent, which tracks various stages of the booking process, such as form loading, service selection, and successful scheduling.
Step 2: Create a Custom Event Trigger
To capture these interactions, set up a Custom Event Trigger in GTM. Use the event name:
ameliaAppointmentEvent
This trigger will activate whenever an event matching this name is pushed to the dataLayer.
Step 3: Create Data Layer Variables
Next, define the variables in GTM to capture key details about the events:
- ameliaAppointmentAction
- Provides the specific interaction or event that occurred, such as:
- Form loaded
- Service selected
- Payment step loaded
- Online booking completed
- Category selected
- Employee selected
- Location selected
- Package selected
- Info step loaded
- Custom validation
- Confirm button clicked
- On-site booking completed
- Online booking completed
- Provides the specific interaction or event that occurred, such as:
- ameliaAppointmentData
- Captures additional information about each event, such as service details, employee, or location selected.
- Use this object to retrieve granular details about the appointment booking flow.
These variables enrich your event data, enabling advanced segmentation and analysis in your analytics tools.
Step 4: Create Marketing Tags and Pixels
With your triggers and variables in place, create marketing tags or pixels for platforms like Google Analytics (GA4) or Piwik Pro. Attach the ameliaAppointmentEvent trigger and utilize the variables in your tag configurations. This approach ensures that each Amelia appointment form interaction is tracked with meaningful context, improving your ability to measure conversions and refine your marketing strategies.
Additional Notes:
The Amelia event listener script is Tag Manager agnostic, meaning it can be implemented in other Tag Management Systems (TMS) besides Google Tag Manager. Regardless of the TMS used, the implementation principles remain consistent.
To save time during the setup process, scroll down this resource page to download a customizable GTM recipe template. This template helps you track Amelia’s appointment form interactions and conversions quickly and efficiently.
<script>
(function () {
// Ensure dataLayer is initialized
window.dataLayer = window.dataLayer || [];
// Define a helper function to push events to the dataLayer
function pushToDataLayer(action, data) {
window.dataLayer.push({
event: "ameliaAppointmentEvent",
ameliaAppointmentAction: action,
ameliaAppointmentData: data || {}
});
}
// Define Amelia hooks
window.ameliaActions = {
ViewContent: function (success, error, data) {
pushToDataLayer("Form loaded", data);
},
SelectService: function (success, error, data) {
pushToDataLayer("Service selected", data);
},
SelectCategory: function (success, error, data) {
pushToDataLayer("Category selected", data);
},
SelectEmployee: function (success, error, data) {
pushToDataLayer("Employee selected", data);
},
SelectLocation: function (success, error, data) {
pushToDataLayer("Location selected", data);
},
SelectPackage: function (success, error, data) {
pushToDataLayer("Package selected", data);
},
InitInfoStep: function (success, error, data) {
pushToDataLayer("Info step loaded", data);
},
customValidation: function (success, error, data) {
pushToDataLayer("Custom validation", data);
},
InitiateCheckout: function (success, error, data) {
pushToDataLayer("Payment step loaded", data);
},
beforeBooking: function (success, error, data) {
pushToDataLayer("Confirm button clicked", data);
// Call the success callback to allow booking to proceed
if (typeof success === "function") success();
},
Schedule: function (success, error, data) {
pushToDataLayer("On-site booking completed", data);
},
Purchased: function (success, error, data) {
pushToDataLayer("Online booking completed", data);
}
};
})();
</script>
Video of how to use the listener
Related Event Listener
Amelia Event Registration Form
Barns2 WooCommerce Restaurant Ordering
OnSched
download the google tag manager recipe for tracking Amelia Appointment Booking Form Interactions and Appointment Booking In Google Analytics (GA4), etc.,
