How do I measure events?

In i-Reserve, various events can be measured. In other words: various events can be transferred to the data layer.

Where are these events located? Events are linked to themes. There is always a maximum of 1 theme active for a given page (we are always talking about customer pages here). It is possible to use multiple themes on the same website. In this case, great care must be taken to create the events on the correct theme. If you use one theme for the homepage and a second theme for the booking dialogue, then it is (obviously) only useful to create the "make booking" event on that second theme.

That said, themes are in the Configuration > Customer page -> Themes.

The theme has an "Advanced" button. Under advanced you will find the heading Events.
If no events have been defined yet, there is an easy start button. "Add default code".

This immediately creates an example of the available events. The "Make booking" looks like this:

  /*
  * Called when the booking is created
  * @param booking array of booking data
  */
  ireserve.on("createBooking", function(booking){
  console.log('createBooking');
  // your code here
  });

As you can clearly see, the example code is regular JavaScript code.
This allows a developer to inspect what data is available and write a script.

To determine what is available, use the console.

console.log('Whats in the booking object', booking);

Please note: booking is without quotes. It is an object.
This object may sometimes change in a future version.

Next step: a link must be made with the data layer of the GTM.

We do this by including the following code.

window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
  'event': 'bookingMade',
  'details': {}
  });

Now it only becomes fun when there are details to publish.
We'll jump straight to a full example.

<script type="text/javascript">
/*
* Called when the booking is created
* @param booking array of booking data
*/
ireserve.on("createBooking", function(booking){
console.log('createBooking');
  console.log('i-res bookingnumber', booking.booking_id);
  console.log('game', booking.object_desc);
  console.log('date', booking.fromdate);
  console.log('starttime', booking.fromtime);
  console.log('endtime', booking.tilltime);
  console.log('price', booking.price);
  console.log('location', booking.object_short_desc);
  console.log('phone ', booking.customer_tel_mob);
  console.log('email ', booking.customer_email);
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
  'event': 'bookingMade',
  'details': {
  'i-res bookingnumber': booking.booking_id,
  'game': booking.object_desc,
  'date': booking.fromdate,
  'starttime': booking.fromtime,
  'endtime': booking.tilltime,
  'price': booking.price,
  'location': booking.object_short_desc
  }
  });
});
</script>

And voila. the event is there. Test now!
Of course, the console logging can be removed in production. It is only important to see that the code is running by closely monitoring the console.