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
<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>
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 👂