Wie messe ich Events?

In i-Reserve gibt es verschiedene zu messende Events. Mit anderen Worten: Es gibt verschiedene Events, die an den Data Layer weitergegeben werden können.

Wo befinden sich diese Events? Events sind mit Themen verknüpft. Für eine bestimmte Seite (wir sprechen hier immer über Kundenseiten) ist immer maximal 1 Thema aktiv. Es ist jedoch möglich, auf derselben Website mehrere Themen zu verwenden. In diesem Fall muss gut darauf geachtet werden, dass Sie die Events beim richtigen Thema anlegen. Wenn Sie nämlich ein Thema für die Homepage und ein zweites Thema für den Buchungsdialog verwenden, dann ist es (eigentlich selbstverständlich) nur sinnvoll, das Event "Buchung erstellen" beim zweiten Thema anzulegen.

Davon abgesehen befinden sich Themen in der Konfiguration > Kundenseite -> Themen.

Beim Thema befindet sich eine Schaltfläche "Erweitert". Unter Erweitert befindet sich unter anderem die Überschrift Events.
Wenn noch keine Events definiert sind, gibt es eine einfache Start-Schaltfläche. "Standardcode hinzufügen".

Diese erstellt aus den verfügbaren Events direkt ein Beispiel. So sieht "Buchung erstellen" folgendermaßen aus.

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

Wie gut zu sehen ist, ist der Beispielcode gewöhnlicher Javascript-Code.
Ein Entwickler kann damit selbst inspizieren, welche Daten verfügbar sind, und ein Skript schreiben.

Um festzustellen, was verfügbar ist, verwenden Sie dann die Konsole.

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

Hinweis: booking ist ohne Anführungszeichen. Es ist nämlich ein Objekt.
Dieses Objekt kann sich manchmal in einer zukünftigen Version ändern.

Nächster Schritt: Es muss eine Verknüpfung mit dem Data Layer des GTM hergestellt werden.

Dies tun wir, indem wir den folgenden Code aufnehmen.

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

Erst richtig interessant wird es, wenn es Details zu veröffentlichen gibt.
Wir springen gleich zu einem vollständigen Beispiel.

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

Und voilà. Das Event steht. Nun testen!
Natürlich darf das Console-Logging in der Produktion entfernt werden. Es ist nur wichtig, um zu sehen, dass der Code ausgeführt wird, indem man die Konsole aufmerksam beobachtet.