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:
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.
| 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 |
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.
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.
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:
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.
Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.