All Collections
Technical Documentation
The booking widget
Listening for successful booking and parsing data to GA
Listening for successful booking and parsing data to GA

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

Jubrine Fortuno avatar
Written by Jubrine Fortuno
Updated over a week 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. 

First we create a function to parse the incoming data

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);
        }
    }
};

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

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

Now 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?