Hoe meet ik events?

In i-Reserve zijn er verschillende events te meten. Met andere woorden: er zijn verschillende events door te zetten naar de data layer.

Waar staan deze events? Events zijn gekoppeld aan thema's. Er is voor een bepaalde pagina (we hebben het hier altijd over klantpagina's) altijd maximaal 1 thema actief. Het is wel mogelijk om op dezelfde website meerdere thema's te gebruiken. In dit geval moet er goed opgelet worden dat je de events aanmaakt op het juiste thema. Als je namelijk een thema gebruikt voor de homepage en een tweede thema voor boekingsdialoog, dan is het (eigenlijk vanzelfsprekend) alleen nuttig om de "maak boeking" event aan te maken op dat tweede thema.

Dat gezegd hebbende, thema's zitten in de Configuratie > Klant pagina -> Thema's.

Bij het thema zit een knopje "Gevanceerd". Onder geavanceerd zit onder andere het kopje Events.
Als er nog geen events zijn gedefinieerd, is er een gemakkelijke start knop. "Toevoegen standaard code".

Deze maakt van de beschikbare events direct een voorbeeld aan. Zo ziet de "Maak boeking" er als volgt uit.

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

Zoals goed te zien is, is de voorbeeld code gewone Javascript code.
Een ontwikkelaar kan hiermee zelf inspecteren welke gegevens beschikbaar zijn en een script schrijven.

Om vast te stellen wat er beschikbaar is, gebruik dan de console.

console.log('Wat is in het booking object', booking);

Let op: booking is zonder quotes. Het is namelijk een object.
Dit object kan soms veranderen in een toekomstige versie.

Volgende stap: er moet een koppeling gemaakt worden met de data layer van de GTM.

Dit doen we door de volgende code op te nemen.

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

Nu wordt het pas leuk als er details zijn om te publiceren.
We springen gelijk naar een volledig voorbeeld.

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

En voila. het event staat er. Nu testen!
Natuurlijk, de console logging mag er in productie uitgehaald worden. Is alleen van belang om te zien dat de code wordt uitgevoerd door de console nauwlettend te monitoren.