Verwendung benutzerspezifischer Ereignisse in DTM

Suchen

Zuletzt aktualisiert am 1. Mai 2021

In diesem Artikel wird die Verwendung benutzerspezifischer Ereignisse auf Ihrer Website zum Auslösen einer Regel für das dynamische Tag-Management (DTM) beschrieben.

Browserereignisse

Ein Ereignis ist ein Signal dafür, dass auf Ihrer Website ein bestimmter Vorgang abgelaufen ist. Entwickler können diese Signale nutzen, um zu reagieren oder Maßnahmen zu ergreifen.

Stellen Sie sich ein Ereignis als eine Radiowelle vor. Radiowellen werden so übertragen, dass sie für alle hörbar sind, Sie müssen jedoch die richtige Frequenz einstellen, um sie hören zu können. Wenn Sie Radiowellen übertragen und niemand zuhört, schadet das nicht. Dasselbe gilt für Ereignisse: Sie können ein Ereignis auslösen, ohne dass dadurch Fehler verursacht werden, wenn es nicht abgehört wird. Sie können auch auf ein Ereignis warten, das nie passiert, ohne Probleme zu verursachen oder Fehler auszulösen.

Mehrere Ressourcen umfassen HTML-Ereignisse:

Verwenden von ereignisbasierten Regeln in DTM

Beim Erstellen von ereignisbasierten Regeln können Sie diese für bestimmte Standardereignisse einrichten. Jeder Browser verfügt über Standardereignisse, die durch bestimmte Aktionen wie die folgenden gängigen Aktionen ausgelöst werden:

Mausklicks
Mausbewegungen (Zeigen mit der Maus auf ein Element auf der Seite)
Formularfeldfokus (der Cursor wird in ein Formularfeld bewegt)
Formularfelddeaktivierung (der Cursor verlässt ein Formularfeld)
Formulareinsendungen

Diese Ereignisse sind sinnvoll. Sie werden im Internet Tag für Tag ausgeführt. Falls Sie entsprechend den Standardereignissen des Browsers nicht die gewünschten Vorgänge nachverfolgen können, haben Sie die Möglichkeit, stattdessen JavaScript-Ereignisse zu verwenden.

Welche Ereignisse sind in DTM integriert?

Folgende Ereignisse sind in die ereignisbasierten Regeln von DTM integriert:

Maus	Tastatur	Foren (nur Englisch)	HTML 5-Video	Mobile Geräte	Andere
click mouseover	keypress	focus blur submit change	ended loadeddata play pause stalled volumechange % complete time complete	orientationchange zoomchange	custom enters viewport element exists pushState or hashchange

Benutzerspezifische Ereignisse

Damit ein Ereignis abgehört werden kann, muss es zunächst ausgelöst werden. Ereignisse werden von Ihren Entwicklern im Code der Website definiert. Das Festlegen, wann und wo Ereignisse verwendet werden, kann etwas knifflig sein. Als einfache Faustregel gilt: Wenn Sie etwas nachverfolgen möchten und dies mit einem vordefinierten DTM-Ereignistyp nicht möglich ist, verwenden Sie ein benutzerspezifisches Ereignis.

Auslösen von Ereignissen

Sehen Sie sich das folgende Beispiel mit einem benutzerspezifischen Ereignis an, da Sie hier die Möglichkeit haben, Daten hinzuzufügen. Wenn Sie beispielsweise über einen Warenkorb verfügen und dort einen Artikel hinzufügen, wird AJAX verwendet. Es wird keine neue Seite geladen. Sie werden stattdessen in einer Popup-Meldung darüber informiert, dass der Artikel zum Warenkorb hinzugefügt wurde. Wenn dies geschieht, können Sie ein benutzerdefiniertes Ereignis erstellen, über das Sie genau erfahren, was hinzugefügt wurde:

var addToCart = new CustomEvent('addToCart', 'detail': {'product_id': data.product.sku, 'quantity': data.product.quantity, 'price': data.product.price.fullPrice});
document.getElementById('minicart').dispatchEvent(addToCart);

Der oben angegebene Code verweist auf Daten eines Objekts namens „data“. Die benutzerspezifischen „detail“-Daten werden als Objekt definiert, das Sie beim Abhören des Ereignisses referenzieren können. Nach dem Erstellen des Ereignisses lösen Sie es bei einem bestimmten Element aus. In diesem Fall ist es ein Element auf der Seite mit der ID „minicart“. Nun verfügen Sie über ein benutzerspezifisches Ereignis, das an alle übertragen wird, die es empfangen möchten.

Hinzufügen eines benutzerspezifischen Event Listeners

In DTM ist das Hinzufügen eines benutzerspezifischen Event Listeners genauso einfach wie das Hinzufügen einer ereignisbasierten Regel.

Mit den folgenden Schritten wird eine Regel zum Abhören in DTM konfiguriert:

Fügen Sie eine neue ereignisbasierte Regel hinzu.
Geben Sie einen Namen dafür ein.
Wählen Sie den Ereignistyp Benutzerdefiniert aus und geben Sie den Namen des Ereignisses ein, der im oben stehenden Beispiel als addToCart definiert wurde.
Definieren Sie das Tag oder das Element, für das dieses Ereignis gelten soll. Wenn Sie CSS-Selektoren verwenden, ist dies #minicart.
Konfigurieren Sie die Regel so, dass die entsprechenden Beacons ausgelöst werden.

Sie haben noch Fragen?

Sollten Sie Fragen zu diesem Artikel oder anderen DTM-Themen haben, sehen Sie sich in den Foren der DTM-Community um. Im Forum können Sie Fragen stellen, an Diskussionen teilnehmen und sich in Bezug auf die einzelnen Lösungen auf dem Laufenden halten.

Vielen Dank an Adam von Disruptive Advertising für die Genehmigung, Teile seines Blog-Posts für diesen Artikel zu nutzen.