Wenn Sie die Teilnehmerregistrierung bzw. den Ticketshop über einen iFrame auf Ihrer Website eingebunden haben, können Sie im Google Tag Manager Daten empfangen, die im iFrame generiert werden.

Anschließend können Sie die Daten an verschiedene Tools weiterleiten, um bspw. Retargeting-Kampagnen über den Meta Business Manager oder LinkedIn Marketing Solutions zu betreiben.

💡 Info

Das Tracking mit dem Google Tag Manager funktioniert ausschließlich mit der iFrame-Lösung. Falls Sie das iFrame noch nicht auf Ihre Website integriert haben, lesen Sie den Artikel, wie Sie das iFrame auf Ihrer Website einbinden.

Alle Werte, die vom iFrame übertragen bzw. übermittelt werden, beinhalten keine personenbezogenen Daten. Es werden lediglich folgende Informationen weitergegeben:

value: Summe/Wert des Warenkorbs
currency: Die Währung als ISO Code (z.B. EUR, USD, etc.)
order_number: Die Bestellnummer der getätigten Bestellung nach Kaufabschluss

ℹ Beachten Sie geltendes Recht

Bitte beachten Sie, dass Sie sich vor der Nutzung vom Google Tag Manager, Facebook Pixel, Google Analytics, etc. bzw. vor dem Setzen der Cookies den Consent des Users einholen müssen. Bitte orientieren Sie sich nach den aktuell geltenden Datenschutzbestimmung der EU und der Bundesrepublik Deutschland. Erst nach der erfolgten Einwilligung dürfen Cookies gesetzt und Daten weiterverarbeitet werden. Diese Dokumentation dient als Hilfestellung und stellt keine datenschutzrechtliche Beratung dar. Connfair haftet nicht für nicht-datenschutzkonforme Installationen von Drittanbietertools.

Wenn Sie bereits das iFrame auf Ihrer Website eingebunden haben, finden Sie im nachfolgenden Verlauf einen Code, den wir Ihnen in diesem Artikel zur Verfügung stellen. Das Skript empfängt die Daten aus dem iFrame und sendet Events an den Data Layer des Google Tag Managers. Hierfür stehen folgende Events bereit:

add_to_cart: Eine Person hat eine beliebige Anzahl an Tickets ausgewählt
removed_from_cart: Eine Person hat die ausgewählten Tickets reduziert oder abgewählt
add_ticket_info: Eine Person hat die Informationen der Ticketinhaber eingegeben (Schritt 2 im Kaufprozess)
add_shipping_info: Eine Person hat die Bestellinformationen eingegeben (Schritt 3 im Kaufprozess)
add_payment_info: Eine Person hat Zahlungsinformationen hinzugefügt (Schritt 4 im Kaufprozess)
begin_checkout: Eine Person hat den Kaufprozess nach Eingabe der Zahlungsinformationen angestoßen
purchase: Die Bestellung wurde erfolgreich abgeschlossen

Was benötige ich auf meiner Website?

Um den Google Tag Manager zu nutzen, richten Sie den Google Tag Manager ein und installieren Sie Ihren Google Tag auf Ihrer Website. Eine Anleitung finden Sie hier: Tag Manager einrichten und installieren.

Des Weiteren benötigen Sie einen EventListener. Kopieren Sie den nachfolgenden Code in den <head>-Bereich Ihrer Website oder an einem beliebigen Ort Ihrer Webseite, in dem das iFrame enthalten ist:

<script> 
// get messages from Connfair Ticketing iFrame

window.addEventListener("message", function(msg){ 
if(msg && msg.origin && msg.origin.includes('connfair.com')) { 
// check message origin 
// send events to google tag manager 8 

// consent + targets handled in tag manager 

const message = JSON.parse(msg.data); 
if(message.type) { 
switch (message.type) { 
case 'add_to_cart': 
case 'removed_from_cart': 
case 'begin_checkout': 
case 'add_ticket_info': 
case 'add_shipping_info': 
case 'add_payment_info': 
case 'purchase': 
const totalPrice = message.data.value; 
dataLayer.push({'order_number': message.data.order_number});  dataLayer.push({'value': message.data.value});  dataLayer.push({'currency': message.data.currency}); dataLayer.push({'event': 'custom-event-'+message.type, 'data': message.data});
break; 
default: 
break; 
} 
} 
} 
}); 
</script>

Was stelle ich anschließend im Google Tag Manager ein?

Zunächst einmal greifen Sie die Datenschichtvariablen ab, die vom obigen EventListener in den Data Layer bzw. in die Datenschicht gepusht werden. Anschließend definieren Sie die nötigen Trigger, um ein bestimmtes Event weiterzugeben. Zuletzt erstellen Sie die Tags, die Sie auslösen möchten. Wir gehen nun Schritt-für-Schritt auf alle 3 Punkte ein.

Für eine schnellere Installation der Trigger und Variablen, können Sie hier einen vordefinierten Container downloaden und in GTM importieren. Hier finden Sie einen Artikel zum Einrichten des Google Tag Managers. Hier einen Artikel, indem Sie erfahren, wie Sie einen Container in Google Tag Manager importieren.

So richten Sie Variablen im Google Tag Manager ein

1. Wählen Sie “Variablen” aus dem linken Menü aus.

2. Wählen Sie im Bereich “Benutzerdefinierte Variablen” → “Neu” aus.

3. Klicken Sie auf die Fläche “Variable konfigurieren”.

4. Wählen Sie aus den “Seitenvariablen” die “Datenschichtvariable” aus.

5. Geben Sie einen der folgenden Namen der Datenschichtvariable ein (Sie müssen alle konfigurieren, daher ist es relativ mit welchem Sie beginnen):

value
currency
order_number

6. Bennen Sie die Variable beliebig. Welchen Namen Sie hier vergeben ist nicht ausschlaggebend. Sie können bspw. auch Summe oder Warenkorb-Wert, o.ä. eintragen.

7. Klicken Sie anschließend auf “Speichern”, um die Eingaben zu übernehmen.

8. Wiederholen Sie den Vorgang für alle 3 Variablen.

Name	Datenschichtvariable
Bestellnummer	order_number
Währung	currency
Wert	value

So richten Sie Trigger im Google Tag Manager ein

Mit den Events aus dem Data Layer richten Sie nun die Trigger ein, die Sie für die weiteren Schritte benötigen. Trigger sind Auslöser. Sie bestimmen die Aktion, die folgen muss, damit eine Reaktion im Google Tag Manager durchgeführt werden kann.

Der JavaScript-Code, den Sie bereits auf Ihre Website integriert haben, sendet mehrere Events in den Data Layer. Nun melden wir an den Google Tag Manager, sobald ein bestimmtes Event im Data Layer landet, dass ein Trigger ausgelöst werden soll. Hierfür gehen Sie wie folgt vor:

1. Wählen Sie den Punkt “Trigger” im linken Menü aus.

2. Klicken Sie auf “Neu”, um einen neuen Trigger anzulegen.

3. Klicken Sie auf die Schaltfläche der “Triggerkonfiguration”.

4. Wählen Sie aus der Liste unter “Sonstiges” → “Benutzerdefiniertes Ereignis”.

5. Geben Sie den Ereignisnamen in das vorgesehene Feld ein. Ihnen stehen folgende Ereignisse (Events) zur Verfügung:

custom-event-add_to_cart: Ein oder mehrere Tickets wurden ausgewählt bzw. zum Warenkorb hinzugefügt
custom-event-removed_from_cart: Ein oder mehrere Tickets wurden aus dem Warenkorb wieder entfernt
custom-event-add_ticket_info: Die Informationen der Ticketinhaber wurden hinzugefügt (Schritt 2 im Bestellprozess)
custom-event-add_shipping_info: Die Informationen des Bestellers wurden hinzugefügt (Schritt 3 im Bestellprozess)
custom-event-add_payment_info: Die Zahlungsinformationen wurden eingegeben (Schritt 4 im Bestellprozess)
custom-event-begin_checkout: Die Zahlungsinformationen wurden an den Zahlungsdienstleister übertragen
custom-event-purchase: Eine Bestellung wurden erfolgreich durchgeführt

6. Bennen Sie den Trigger beliebig. Der ausgewählte Name spielt keine Rolle in der Datenverarbeitung, dient lediglich für Sie zur Orientierung.

7. Klicken Sie im Anschluss auf “Speichern” um die Eingaben zu übernehmen.

8. Wiederholen Sie den Vorgang für alle Events, die Sie als Trigger definieren wollen.

So erstellen Sie Tags für Ihr GTM-Setup

Da war anhand der zahlreichen Tools, die im Google Tag Manager zur Verfügung stehen, nicht eingehen können, nehmen wir den Facebook Pixel als Beispiel. Je nach gewähltem Tool können zusätzlich erforderliche Variablen erfordert sein. Suchen Sie hierfür nach einem Help-Artikel des jeweiligen Tool-Anbieters.

1. Wählen Sie “Tags” im linken Menü aus.

2. Klicken Sie auf “Neu”.

3. Klicken Sie auf die Schaltfläche “Tag-Konfiguration”.

4. Klicken Sie auf “Weitere Tag-Typen finden Sie in der Galerie für Community-Vorlagen”

5. Scrollen Sie runter bis Sie den Facebook Pixel von facebookarchive finden und klicken Sie darauf.

6. Wählen Sie “Zum Arbeitsbereich hinzufügen”.

7. Klicken Sie auf “Hinzufügen”.

8.1. Tragen Sie Ihre Facebook Pixel-ID ein.

8.2. Wählen Sie aus Event Name → Standard → AddToCart aus.

8.3. Klicken Sie auf “> Object Properties” und anschließend auf “Add Property” (hier übergeben die eingerichteten Variablen an den Facebook Pixel).

8.4. Da Facebook standardmäßig die Werte “value” und “currency” benötigt, geben Sie diese nun dem Tag mit. Hierfür geben Sie bitte in kleiner Schreibweise zunächst “value” in der linken Spalte ein und klicken in der rechten Spalte auf das “+”-Symbol.

8.5. Wählen Sie die Variable Value aus, die Sie bereits zum Anfang definiert haben.

8.6. Nun erscheint in der rechten Spalte die Variable in geschweiften Klammern {{Value}}. Wählen Sie nun erneut “Add Property” aus, um die currency zu übergeben.

8.7. Geben Sie in das linke Eingabefeld currency ein und wählen Sie in der rechten Spalte erneut das “+”-Symbol aus.

8.8. Wählen Sie die Variable Currency aus Ihren definierten Variablen aus.

8.9. Scrollen Sie runter bis Sie die Schaltfläche “Trigger” sehen und wählen Sie diese aus.

8.10. Suchen Sie den von Ihnen definierten Trigger, der für das Hinzufügen von Tickets steht. Wir haben ihn “Tickets in Warenkorb hinzugefügt” benannt. Sie finden ihn auch so in unserem Vorlagen-Container. Klicken Sie auf den bestimmten Trigger.

8.11. Wenn Sie die Schritte befolgt haben müsste der Tag nun wie folgt aussehen. Benennen Sie den tag oben links, wie Sie möchten. Der Name hat keine Relevanz und dient Ihnen lediglich zu Orientierung. Nach der Benennung klicken Sie auf “Speichern” um alle Eingaben zu übernehmen:

9. Erstellen Sie weitere Tags und gehen Sie dabei die Schritte 2-8 dieser Sektion durch, um für jeden Trigger einen Tag zu definieren. Verwenden Sie folgende Standard-Events für Facebook für folgende benutzerdefinierte Ereignisse, die Sie erstellt haben:

Event Name → Standard	Trigger
AddPaymentInfo	custom-event-add_payment_info (Vorlage: Zahlungsinformationen hinzugefügt)
InitiateCheckout	custom-event-begin_checkout (Vorlage: Checkout begonnen)
Purchase	custom-event-purchase (Vorlage: Bestellung abgeschlossen)

Zusammenfassung

Um die Daten aus dem iFrame zu tracken und bspw. an Analytics-Tools oder Performance Marketing Tools zu übergeben, können Sie den Google Tag Manager nutzen. Mit unserem vordefinierten Container haben Sie bereits alle Variablen und Trigger eingerichtet, die Sie benötigen.

Da Sie die Einwilligung zum Setzen von Cookies benötigen, empfehlen wir Ihnen Consent-Trigger im Tag Manager einzurichten und diesen mit jedem Trigger aus der Vorlage bzw. aus diesem Artikel in einer Trigger-Gruppe zusammenzufassen. Anschließend können Sie die Trigger-Gruppen im Tag Manager als Trigger in den jeweiligen Tags benutzen. Sie sind nach geltendem EU- und BRD-Recht dazu verpflichtet die Privatsphäre der User zu schützen.

Alles was Sie fürs Tracking benötigen sind Variablen, Trigger und Tags, die Sie im Tag Manager nach Belieben definieren können. Erkundigen Sie sich vor der Nutzung einzelner Tags, welche Variablen von Nöten sind, damit das jeweilige Tool ordnungsmäßig arbeiten kann. Der Facebook Pixel benötigt bspw. value und currency. Andere Tools könnten andere Variablen benötigen.

Wenn Sie die Schritte befolgt und alle Tags implementiert haben, können Sie die installierten Tags testen, indem Sie auf “In Vorschau ansehen” klicken. Nach erfolgreich abgeschlossenem Test müssen Sie den Container veröffentlichen. Dies geschieht, in dem Sie auf “Veröffentlichen” klicken. Dies müssen Sie nach jeder Änderung erneut durchführen, um auch Neuerungen zu übernehmen.