Show Menu
THEMEN×

Erstellen von Bedingungen für ereignisbasierte Regeln

Die Bedingungen bestimmen, ob eine ereignisbasierte Regel ausgelöst wird.
  1. Wählen Sie die Art der Interaktion aus, die Sie verfolgen möchten, z. B. Mausklicks oder Senden eines Formulars.
    For more information, see Event Types .
  2. Aktivieren Sie nach Bedarf die folgenden Optionen:
    Element
    Beschreibung
    Link-Aktivierung verzögern
    Aktivieren Sie diese Option, wenn das Ereignis einen Link aktiviert und Sie möchten, dass der Link verzögert wird, bis das Ereignis ausgelöst werden kann.
    Ereignis-Handler direkt auf Element anwenden
    Wendet den Ereignis-Handler auf das spezifische Element an, das als Ziel dient. Diese Einstellung ist an das Bubbling- und Ebenenkonzept eines Browsers gebunden.
    Wenn Sie beispielsweise innerhalb eines Verankerungs-Tags wie <a href="abc.html"><img src="xyz.png"/></a> auf ein Bild klicken, erwarten Sie möglicherweise, dass der Klick mit dem Verankerungs-Tag verknüpft ist, da sich das Tag in einem Bubble-Stream befindet. Wenn Sie den Klick jedoch in den Entwickler-Tools analysieren, wirkt er sich tatsächlich nur auf das <img> -Tag aus. Um sicherzustellen, dass das Ereignis korrekt behandelt wird, verknüpfen Sie den Klick mit dem <img> -Tag und erwarten Sie nicht, dass der Browser den Klick an ein übergeordnetes Element übergibt (Bubbling). Ein Ereignis (z. B. ein Klick) kann potenziell an <body> übergeben werden. Es ist wichtig zu verstehen, wo das Ereignis tatsächlich gebunden ist, und es speziell zu Zielgruppe, um sicherzustellen, dass die Regel korrekt ausgelöst wird.
    Bubbling bedeutet, dass das Ereignis zuerst vom innersten Element erfasst und behandelt wird und dann auf äußere Elemente übertragen wird.
  3. Geben Sie den Namen des Tags an, das Sie verfolgen möchten, sowie zusätzliche Eigenschaften, über die das Tag verfügt und die Sie abgleichen möchten.
    Informationen zum Suchen des richtigen Element-Tags finden Sie unter Verwenden des CSS-Selektors .
  4. Wählen Sie zusätzliche Kriterien oder Bedingungstypen aus, die Sie an die Regel binden möchten, oder richten Sie sie ein.
  5. Legen Sie Ihre bevorzugte Eventbubbling-Einstellung fest.
    Bubbling von Ereignissen ist eine Möglichkeit der Verbreitung von Ereignissen in HTML-DOM.
    Problem
    Lösung
    Sie möchten verwandte Interaktionen mit untergeordneten Elementen der Regelauswahl, die Sie als Auslösen der Regel identifiziert haben.
    Blasen von Ereignissen untergeordneter Elemente zulassen
    Sie möchten ein Bubbling verhindern, wenn das untergeordnete Element bereits ein eigenes Ereignis auslöst.
    Lassen Sie dies nicht zu, wenn das untergeordnete Element bereits Ereignis auslöst.
    Die Ereignis der von Ihnen identifizierten Regelauswahl sollten nicht über das Element selbst in der Ereignis-Hierarchie hinausgehen.
    Ereignisse nicht nach oben zu den Eltern springen lassen

Ereignistypen

Liste der integrierten Ereignistyp und deren Definition.
Kategorie
Ereignis
Definition
Maus
click
Eine Taste des Zeigegeräts wird auf einem Element gedrückt und losgelassen.
mouseover
Ein Zeigegerät wird auf das Element verschoben, an das der Listener angeschlossen ist, oder auf eines seiner untergeordneten Elemente.
Tastatur
keypress
Eine Taste wird gedrückt, und diese Taste erzeugt normalerweise einen Zeichenwert (verwenden Sie stattdessen Eingabe).
Formulare
focus
Ein Element wurde fokussiert (bläst nicht auf).
blur
Ein Element hat den Fokus verloren (blase nicht).
submit
Ein Formular wird gesendet.
change
Ein Element verliert den Fokus und sein Wert hat sich seit dem Fokus geändert.
HMTL5-Video
ended
Die Wiedergabe wurde gestoppt, da das Ende des Mediums erreicht wurde.
loadData
Das erste Bild des Mediums wurde geladen.
play
Die Wiedergabe begann.
pause
Die Wiedergabe wird angehalten.
angehalten
Der Benutzeragent versucht, Mediendaten abzurufen, aber die Daten werden unerwartet nicht bereitgestellt.
volumechange
Das Volumen hat sich verändert.
% Fertig
Gibt einem Ereignis einen bestimmten Prozentsatz der gesamten Wiedergabedauer. Wenn Sie beispielsweise 10 % eingeben, wird diese Regel nur ausgelöst, wenn 10 % der Gesamtlänge des Videos wiedergegeben wurden.
time complete
Gibt einem Ereignis eine bestimmte Wiedergabedauer. Wenn Sie beispielsweise 10 eingeben, wird diese Regel nur ausgelöst, wenn 10 Sekunden der Gesamtlänge des Videos wiedergegeben wurden.
Mobile
orientationchange
Die Ausrichtung des Geräts (Hochformat/Querformat) wurde geändert.
zoomchange
Wenn auf einem Mobilgerät eine Pinch- oder Spread-Geste ausgeführt wird.
Browser
tab focus
Ereignis wird ausgelöst, wenn der Inhalt den Fokus erhält.
tab blur
Ereignis wird ausgelöst, wenn der Inhalt den Fokus verliert.
Sonstiges
custom
Für das DOM wurde ein benutzerdefiniertes Ereignis ausgelöst. Select Custom from the Event Type drop-down list, then specify the custom event name. Weitere Informationen finden Sie unter CustomEvent im Mozilla Developer Network.
Viewport
Wenn das Element zum ersten Mal in die Ansicht des Besuchers kommt. Wenn sich das Element unmittelbar beim Laden der Seite in Ansicht befindet, wird die Regel sofort ausgelöst. Wenn das Element nach dem Scrollen in Ansicht kommt, wird die Regel ausgelöst. Eine optionale Verzögerung kann in der Regel angegeben werden, die bestimmt, wie lange das Element in Ansicht sein muss, bevor das Ereignis ausgelöst wird (der Standardwert ist 1 Sekunde).
element exists
Wenn ein Element eines bestimmten Selektors vorhanden ist - entweder weil es sich im Seitenmarkup befindet oder später dynamisch eingefügt wird. Jede Regel wird nur einmal ausgelöst.
pushState oder hashchange
Der URL-Pfad oder der Hash (Fragmentbezeichner) am Ende der URL hat sich geändert. Das pushState oder hashchange -Ereignis kann mit Einzelseitenapplikationen (SPAs) verwendet werden, bei denen eine Seite nicht neu geladen wird, deren Inhalt sich jedoch ändert. Zu den gängigen Entwicklungs-Frameworks, die zum Erstellen von SPAs verwendet werden können, zählen Angular und React. In diesem Ereignistyp können Sie Ereignis-basierte Regeln erstellen, ohne auf Entwickler angewiesen zu sein. Diese Regeln werden ausgelöst, wenn allgemeine Funktionen in SPAs auftreten, z. B.: Der URL-Pfad hat sich je nach Verwendung der HTML5-Verlauf- pushState API geändert. Weitere Informationen zur Verwendung pushState finden Sie unter Hinzufügen und Ändern von Protokolleinträgen im Mozilla Developer Network. Der Hash änderte sich, da der Benutzer die Ansichten oder Positionen auf der Seite änderte. Weitere Informationen zur Verwendung hashchange finden Sie unter Hashchange im Mozilla Developer Network.
time
Wert in Sekunden. Das Ereignis wird ausgelöst, nachdem die angegebene Anzahl von Sekunden vergangen ist.
dataelementchanged
Ein Datumselement wurde geändert. In diesem Ereignis können Sie ein bestimmtes Datenelement auswählen, das als Auslöser verwendet werden soll. Weitere Informationen zu möglichen Anwendungsfällen finden Sie unter Hinzufügen Adobe Experience Manager ContextHub Tool .

Verwenden des CSS-Selektors

Verwenden Sie die , CSS Selector um schnell und einfach CSS-Elemente auszuwählen, die als Auslöser für Ereignis-basierte Regeln verwendet werden sollen, ohne den DTM-Regel-Builder zu verlassen.
Einer der größten Vorteile von DTM ist die Möglichkeit, Verhaltensweisen oder Seiteninteraktionen auf Ihrer Website Ereignis. Das Auffinden der gewünschten CSS-Elemente, die in Ihre Regeln aufgenommen werden sollen, ist jedoch manchmal schwierig und zeitaufwendig.

Beispiel mit eindeutigem Element

Beispiel: Wir möchten eine Regel erstellen, die ausgelöst wird, wenn Benutzer auf den Link "Anmelden oder registrieren"auf unserer Website klicken, wie in der folgenden Abbildung dargestellt. Dieses Beispiel ist einfach, da der Link "Anmelden oder registrieren"keine ähnlichen Elemente in der CSS enthält.
Das komplexere Beispiel, das unten beschrieben wird, zeigt, wie Sie die CSS Selector verwenden können, wenn es viele ähnliche Elemente auf der Seite gibt, wie die Registerkarten oben ("Herren", "Damen", "Ausrüstung"usw.).

So verwenden Sie den CSS-Selektor:

  1. Greifen Sie auf das CSS Selector Widget in DTM zu, indem Sie beim Target Erstellen einer Regel auf das Symbol klicken.
    In diesem Beispiel erstellen wir eine Ereignis-basierte Regel, die mithilfe des Click Ereignistyps die Regel auslöst, wenn Benutzer auf den Link "Anmelden oder registrieren"klicken.
  2. Geben Sie die URL der Website an und klicken Sie auf Load .
    Seien Sie so spezifisch wie möglich auf der Webseite, auf der Sie ein Ereignis ablegen möchten. Beachten Sie, dass sich CSS-Stylesheets je nach Website und Architektur von einer Seite zur anderen ändern können. Es ist hilfreich, zu experimentieren, um zu sehen, wie oft sich Ihr Stylesheet ändert.
    Die Website wird jetzt in einen iFrame geladen, in den das CSS-Selektor-Widget eingebettet ist. Bewegen Sie den Mauszeiger über verschiedene Elemente, um ein Gefühl dafür zu bekommen, wie das Werkzeug funktioniert.
    Wenn wir diese Regel ohne Verwendung der CSS SelectorRegel erstellen würden, würden wir das gewünschte Seitenelement prüfen, um die richtige CSS zu bestimmen. Klicken Sie mit der CSS SelectorOption einfach auf das Element auf der Seite, das die Regel auslösen soll.
  3. Klicken Sie auf Sign In or Register .
    Wenn Sie auf ein Seitenelement klicken, für das der Selektor übereinstimmen soll, wird es grün. Der CSS Selector generiert dann einen minimalen CSS-Selektor für dieses Element.
    Beachten Sie das Bedienfeld unten, das Informationen zum ausgewählten Element sowie eine Schaltfläche zum Senden der Informationen an DTM enthält.
    Die Zahl in Klammern neben Clear gibt die Anzahl der ausgewählten Elemente an. In diesem Beispiel hat der Link "Anmelden oder registrieren"auf der angegebenen Seite nichts Ähnliches, sodass "1"angezeigt wird. Klicken Sie auf Clear , um die ausgewählten Elemente zu entfernen. Klicken Sie auf Toggle Position , um das Bedienfeld nach Bedarf an den Anfang oder das Ende des iFrames zu verschieben. Click ? zur Ansicht von Hilfeinformationen zum CSS Selector.
  4. Klicken Sie auf Send to DTM , um die CSS in das Element Tag or Selector Feld in DTM zu kopieren.
  5. Beenden Sie die Konfiguration der Regel, wie unter Bedingungen für Ereignis-basierte Regeln erstellen beschrieben .
    Ohne Code schreiben oder Elemente überprüfen zu müssen, haben wir eine Ereignis-basierte Regel erstellt, die ausgelöst wird, wenn Benutzer auf Sign In or Register klicken.

Beispiel mit ähnlichen Elementen

Nehmen wir nun an, Sie möchten eine Regel erstellen, die ausgelöst wird, wenn Benutzer auf die Registerkarte "Herren"oben auf Ihrer Website klicken. Der Unterschied zwischen diesem Beispiel und dem einfachen Beispiel oben ist, dass die Registerkarte "Herren"viele ähnliche Elemente auf der Seite enthält.
  1. Greifen Sie auf das CSS Selector Widget in DTM zu, indem Sie beim Target Erstellen einer Regel auf das Symbol klicken.
  2. Geben Sie die URL der Website an und klicken Sie auf Load .
  3. Klicken Sie auf die Registerkarte "Herren", um sie auszuwählen.
    Beachten Sie, dass viele Elemente auf der Seite ausgewählt sind und gelb hervorgehoben werden. Die Zahl neben Clear in Klammern ist in diesem Beispiel 28, d. h. es gibt 28 Elemente auf der Seite, die das Tag "a"verwenden.
    Wir möchten die Regel auslösen, wenn Benutzer auf den Link "Herren"klicken. Daher müssen wir die Auswahl der anderen ähnlichen Elemente aufheben.
    Bewegen Sie den Mauszeiger über ein ähnliches hervorgehobenes Element (z. B. "Damen"), und Sie werden feststellen, dass um das Element ein roter Rahmen angezeigt wird.
    Wenn Sie auf ein Seitenelement klicken, für das der Selektor übereinstimmen soll, wird es grün. Der CSS Selector generiert dann einen minimalen CSS-Selektor für dieses Element. Darüber hinaus hebt der Selektor alle Elemente hervor, die mit diesem Element in Gelb übereinstimmen. Die CSS Selector Beginn sind breit und können dann eingegrenzt werden.
    Klicken Sie auf ein hervorgehobenes Element, um es abzulehnen (rot), oder klicken Sie auf ein nicht hervorgehobenes Element, um es hinzuzufügen (grün). Durch diesen Prozess der Auswahl und Ablehnung können Sie die perfekte CSS-Auswahl für Ihre Bedürfnisse entwickeln. Wenn Sie beim Bewegen der Maus die Umschalttaste drücken, können Sie Elemente innerhalb anderer ausgewählter Elemente auswählen.
  4. Klicken Sie auf das Element mit dem roten Feld (Damen), um die Auswahl für das Element und alle ähnlichen Elemente aufzuheben.
    Beachten Sie, dass die Zahl in Klammern neben Clear jetzt 1 beträgt.
  5. Klicken Sie auf Send to DTM , um die CSS in das Element Tag or Selector Feld in DTM zu kopieren.
  6. Beenden Sie die Konfiguration der Regel, wie unter Bedingungen für Ereignis-basierte Regeln erstellen beschrieben .

CSS-Selektoreinschränkungen

Die CSS Selector ist in Beta und funktioniert möglicherweise nicht gut für einige Sites aufgrund von technischen Einschränkungen.

Dynamisches Ausfüllen von Variablen

Sie können Elementattribute dynamisch Variablen zuweisen.
Um Elementattribute Variablen dynamisch zuzuweisen, verwenden Sie die folgende Syntax:
%this.attributeName%

Angenommen, Sie haben eine Suchergebnisseite mit mehreren Links zu externen Websites. Sie möchten verfolgen, auf welchen Link geklickt wird, indem Sie eine eVar mit dem Element, auf das geklickt wurde, dynamisch ausfüllen id .
Beispiel-Link: <a id='myFirstLink' href='www.exampleLink.com'>
Erstellen Sie dazu eine Ereignis-basierte Regel, die beim Klicken auf die Links auf der Seite ausgelöst wird. Legen Sie dann im Analytics Regelabschnitt die eVar auf %this.id% .
Bei nicht standardmäßigen Attributen können Sie die JavaScript-Funktion auf ähnliche Weise nutzen, this.getAttribute() indem Sie sie wie folgt in "%"-Zeichen einschließen:
%this.getAttribute(attributeName)%

Angenommen, Sie haben eine ähnliche Suchergebnisseite wie im vorherigen Beispiel. Diese Links enthalten jedoch ein nicht standardmäßiges Attribut, loc das Sie basierend auf dem angeklickten Link dynamisch auf eine eVar einstellen möchten.
Beispiel-Link: <a id='myFirstLink' loc='top' href='www.exampleLink.com'>
Erstellen Sie dazu eine Ereignis-basierte Regel, die beim Klicken auf die Links auf der Seite ausgelöst wird. Legen Sie dann im Analytics Regelabschnitt die eVar auf %this.get Attribute(loc)% .
Wenn Sie sich nicht sicher sind, ob das gewünschte Attribut standardgemäß oder nicht standardgemäß ist, verweisen Sie auf w3schools.com , um mehr über Standard-HTML-Attribute zu erfahren. Im Zweifelsfall können Sie jedoch das nicht standardmäßige getAttribute() Format verwenden, das in beiden Szenarien funktioniert.
Diese Funktion kann in folgenden Regelfeldern des dynamischen Tag-Management verwendet werden:

Analytics-Variablen

  • Adobe Analytics:
    • Linktracking, Seitendaten, Hierarchie
    • Globale Variablen und Ereignis
  • Google Analytics
    • Seitenansichten, Ereignis, benutzerdefinierte Variablen

Benutzerdefiniertes Skript

Standardattribute können auch mit regulärem JavaScript im benutzerdefinierten Code referenziert werden.