Skip to main content
All CollectionsBooking tools (booking pages and booking widgets)Booking widgets (legacy)
LEGACY: Listening for successful booking via enterprise widget and parsing data to GA
LEGACY: Listening for successful booking via enterprise widget and parsing data to GA

This document guides you on listening for events in the enterprise booking widget (i.e. a booking being made) using Javascript.

Krissa avatar
Written by Krissa
Updated over 3 months ago

This document guides you on listening for events in the booking widget (i.e. a booking being made) using Javascript. On a successful booking, data is passed back using postMessage. When you "hear" that a booking has been made, you can then trigger an event to send to Google Analytics from your side. 

  1. First we create a function to parse the incoming data

<script type="text/javascript"> 
var receiveMessage = function(event){
    var data = event.data;
    var eventName = data.substring(0,data.indexOf('.'));
    var booking = data.substring(data.indexOf('.')+1);

    if(eventName === 'appointeddBookingConfirmed'){
        try{
                 ga('send', {
                      hitType: 'event',
                      eventCategory: 'booking',
                      eventAction: 'newbooking'
                 });
        }
        catch(err){
            console.warn('Failed getting JSON from event ' +         eventName, err);
            console.warn(booking);
        }
    }
};
</script>

2. Now we need to listen for a message being posted and handle it with the parser we created

window.addEventListener("message", receiveMessage, false);

On successful bookings you should have the booking object available - you can do what you like with this. It will be in the following format: 

{
    "organisation_id": "553a61aa40bde04159d63af1",
    "created_source": "bookingapp",
    "service": "Full day service",
    "service_id": "564cb46cdda1ddf79fd63af1",
    "bookable": "Chuck Norris",
    "bookable_id": "553a727340bde0de6fd63aff",
    "start_time": "2016-03-02T00:00:00+00:00",
    "end_time": "2016-03-03T00:00:00+00:00",
    "timezone": "Europe/London",
    "notes": "These are some example notes",
    "customer": {
        "profile": {
            "firstname": "Carl",
            "lastname": "Sagan",
            "email": "carl@sagan.com",
            "phone": "07777777772"
        },
    },
    "category": "Test Services",
    "organisation": "Testing emporium"
}


If you have any feedback we would love to hear it 👂

Did this answer your question?