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.

    Weitere Informationen finden Sie unter Ereignistypen.

  2. Aktivieren Sie nach Bedarf die folgenden Optionen:

    Element Beschreibung
    Linkaktivierung 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.
    Ereignishandler direkt auf Element anwenden Wendet den Ereignishandler auf das spezifische Element an, auf das abgezielt wird. 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 gezielt ausrichten, um sicherzustellen, dass die Regel korrekt ausgelöst wird.

    ** Bubbling bedeutet, dass das Ereignis zuerst vom innersten Element erfasst und verarbeitet und dann an ä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 Auffinden 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.

    Eventbubbling ist eine Möglichkeit der Ereignisübertragung im HTML-DOM.

    Problem Lösung
    Sie möchten verwandte Interaktionen mit untergeordneten Elementen des Regelselektors, den Sie als Auslöser für die Regel identifiziert haben. Eventbubbling für untergeordnete Elemente zulassen
    Sie möchten das Bubbling verhindern, wenn das untergeordnete Element bereits ein eigenes Ereignis Trigger. Lassen Sie das Ereignis nicht zu, wenn das untergeordnete Element bereits Trigger ist.
    Sie möchten nicht, dass die Ereignisse des von Ihnen identifizierten Regel-Selektors über das Element selbst in der Ereignishierarchie hinausgehen. Ereignisse nicht an Eltern übergeben

Ereignistypen

Liste der integrierten Ereignistypen und ihrer Definition.

Kategorie Ereignis Definition
Maus click Ein Zeigegerät-Button wird gedrückt und an einem Element losgelassen.
mouseover Ein Zeigegerät wird auf das Element verschoben, an das der Listener angeschlossen ist, oder auf eines seiner untergeordneten Elemente.
Tastatur keypress Es wird eine Taste gedrückt, die normalerweise einen Zeichenwert erzeugt (stattdessen Eingabe verwenden).
Formulare focus Ein Element wurde fokussiert (bläst nicht).
blur Ein Element hat den Fokus verloren (blase nicht).
submit Ein Formular wird gesendet.
change Ein Element verliert den Fokus und sein Wert ändert sich seit dem Fokus.
HTML5-Video ended Die Wiedergabe wurde angehalten, da das Ende des Mediums erreicht wurde.
loadeddata Das Laden des ersten Mediums wurde abgeschlossen.
play Die Wiedergabe begann.
pause Die Wiedergabe wurde angehalten.
angehalten Der Benutzeragent versucht, Mediendaten abzurufen, doch sind unerwartet keine Daten verfügbar.
volumechange Das Volumen hat sich geä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 Verleiht einem Ereignis eine bestimmte Wiedergabedauer. Wenn Sie beispielsweise 10 eingeben, wird diese Regel nur ausgelöst, wenn 10 Sekunden der Gesamtlänge des Videos abgespielt wurden.
Mobile orientationchange Die Ausrichtung des Geräts (Hochformat/Querformat) hat sich geändert.
Zoomänderung Wenn auf einem Mobilgerät eine Pinch- oder Spread-Geste ausgeführt wird.
Browser Registerfokus Das Ereignis wird ausgelöst, wenn der Inhalt den Fokus erhält.
tab blur Das Ereignis wird ausgelöst, wenn der Inhalt den Fokus verliert.
Sonstiges custom Auf dem DOM wurde ein benutzerspezifisches Ereignis ausgelöst. Wählen Sie Custom aus der Dropdownliste Event Type aus und geben Sie dann den Namen des benutzerspezifischen Ereignisses an. Weitere Informationen finden Sie unter CustomEvent im Mozilla Developer Network.
Viewport Wenn das Element zum ersten Mal in die Ansicht des Besuchers gelangt. Wenn das Element unmittelbar beim Laden der Seite angezeigt wird, wird die Regel sofort ausgelöst. Wenn das Element nach dem Scrollen in der Ansicht angezeigt wird, wird die Regel dann ausgelöst. Eine optionale Verzögerung kann in der Regel angegeben werden, die bestimmt, wie lange das Element in der Ansicht sein muss, bevor das Ereignis ausgelöst wird (der Standardwert ist 1 Sekunde).
Element vorhanden Wenn ein Element eines bestimmten Selektors in seine Existenz gelangt, weil es sich entweder im Seiten-Markup befindet oder später dynamisch eingefügt wird. Jede Regel wird nur einmal ausgelöst.
pushState oder hashchange Der URL-Pfad oder der Hash (Fragmentkennung) am Ende der URL wurde geändert. Das Ereignis pushState oder hashchange kann mit Einzelseiten-Apps (SPA) verwendet werden, in denen eine Seite nicht neu geladen wird, sich ihr Inhalt jedoch ändert. Zu den gängigen Entwicklungs-Frameworks, die zum Erstellen von SPA verwendet werden können, gehören Angular und React. Mit diesem Ereignistyp können Sie ereignisbasierte Regeln erstellen, ohne sich auf Entwickler zu verlassen. Diese Regeln werden ausgelöst, wenn allgemeine Funktionen in SPA auftreten, z. B.: Der URL-Pfad wurde basierend auf der Verwendung der HTML5-Verlauf pushState-API geändert. Weitere Informationen zur Verwendung von finden Sie pushStateunter Hinzufügen und Ändern von Verlaufseinträgen im Mozilla Developer Network. Der Hash änderte sich, weil der Benutzer die Ansichten oder Positionen auf der Seite änderte. Weitere Informationen zur Verwendung von finden Sie hashchangeunter 🔗 Hashchange im Mozilla Developer Network.
vergangene Zeit Wert in Sekunden. Das Ereignis wird ausgelöst, nachdem die angegebene Anzahl von Sekunden vergangen ist.
dataelementchanged Ein Datumselement wurde geändert. Mit diesem Ereignis können Sie ein bestimmtes Datenelement auswählen, das als Trigger verwendet werden soll. Weitere Informationen zu einem möglichen Anwendungsfall finden Sie unter Adobe Experience Manager ContextHub-Tool hinzufügen.

Verwenden des CSS-Selektors

Verwenden Sie CSS Selector, um schnell und einfach CSS-Elemente auszuwählen, die als Trigger für ereignisbasierte Regeln verwendet werden sollen, ohne den DTM-Regel-Builder verlassen zu müssen.

Einer der größten Vorteile von DTM besteht darin, Verhaltensweisen oder Seiteninteraktionen auf Ihrer Website zu erfassen. Es ist jedoch manchmal schwierig und zeitaufwendig, die gewünschten CSS-Elemente zu finden, die in Ihre Regeln aufgenommen werden sollen.

Beispiel mit eindeutigem Element

Beispielsweise möchten wir eine Regel erstellen, die Trigger beim Klicken auf den Link "Anmelden oder registrieren"auf unserer Website verwenden, 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 die Verwendung von CSS Selector, wenn sich auf der Seite viele ähnliche Elemente befinden, wie die Registerkarten oben ("Herren", "Damen", "Ausrüstung"usw.).

So verwenden Sie den CSS-Selektor:

  1. Greifen Sie auf das Widget CSS Selector in DTM zu, indem Sie auf das Symbol Target klicken, während Sie eine Regel erstellen.

    In diesem Beispiel erstellen wir eine ereignisbasierte Regel, die den Ereignistyp Click verwendet, um die Regel Trigger, wenn Benutzer auf den Link "Anmelden oder registrieren"klicken.

  2. Geben Sie die URL der Website an und klicken Sie auf Load.

    HINWEIS

    Seien Sie so spezifisch wie möglich für die Webseite, von der Sie das Ereignis auslösen 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 erhalten, wie das Tool funktioniert.

    Wenn wir diese Regel ohne die CSS Selector erstellen würden, würden wir das gewünschte Seitenelement untersuchen, um das richtige CSS zu ermitteln, das verwendet werden soll. Klicken Sie mit CSS Selector einfach auf das Element auf der Seite, auf das die Regel Trigger werden soll.

  3. Klicken Sie auf Sign In or Register.

    Wenn Sie auf ein Seitenelement klicken, für das die Auswahl übereinstimmen soll, wird es grün. Der CSS Selector generiert dann einen minimalen CSS-Selektor für dieses Element.

    Beachten Sie das Bedienfeld am unteren Rand, das Informationen zum ausgewählten Element und 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 nach oben oder unten im iFrame zu verschieben. Click ? um Hilfeinformationen zum CSS Selector anzuzeigen.

  4. Klicken Sie auf Send to DTM , um die CSS in das Feld Element Tag or Selector in DTM zu kopieren.

  5. Schließen Sie die Konfiguration der Regel wie in Erstellen Sie Bedingungen für ereignisbasierte Regeln beschrieben ab.

    Ohne Code schreiben oder Elemente untersuchen zu müssen, haben wir eine ereignisbasierte Regel erstellt, die Trigger beim Klicken auf Sign In or Register anwendet.

Beispiel mit ähnlichen Elementen

Nehmen wir nun an, Sie möchten eine Regel erstellen, die Trigger verwenden, wenn Benutzer oben auf Ihrer Website auf die Registerkarte "Herren"klicken. Der Unterschied zwischen diesem Beispiel und dem oben beschriebenen einfachen Beispiel besteht darin, dass die Registerkarte "Herren"viele ähnliche Elemente auf der Seite enthält.

  1. Greifen Sie auf das Widget CSS Selector in DTM zu, indem Sie auf das Symbol Target klicken, während Sie eine Regel erstellen.

  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 und gelb hervorgehoben sind. Die Zahl neben Clear in Klammern ist in diesem Beispiel 28, was bedeutet, dass es 28 Elemente auf der Seite gibt, die das Tag "a"verwenden.

    Wir möchten die Regel beim Klicken auf den Link "Herren"als Trigger festlegen. 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 die Auswahl ü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 übereinstimmen, in Gelb. Der CSS Selector beginnt breit und ermöglicht es Ihnen dann, Ihre Auswahl einzuschränken.

    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 Zurückweisung können Sie die perfekte CSS-Auswahl für Ihre Anforderungen finden. Durch Drücken der Umschalttaste während der Maus 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 anderen ähnlichen Elemente aufzuheben.

    Beachten Sie, dass die Zahl in Klammern neben Clear jetzt 1 ist.

  5. Klicken Sie auf Send to DTM , um die CSS in das Feld Element Tag or Selector in DTM zu kopieren.

  6. Schließen Sie die Konfiguration der Regel wie in Erstellen Sie Bedingungen für ereignisbasierte Regeln beschrieben ab.

Einschränkungen des CSS-Selektors

CSS Selector ist Beta-Version und funktioniert möglicherweise aufgrund technischer Einschränkungen bei einigen Sites nicht gut.

Dynamisches Ausfüllen von Variablen

Sie können Elementattribute dynamisch Variablen zuweisen.

Verwenden Sie die folgende Syntax, um Elementattribute dynamisch Variablen zuzuweisen:

%this.attributeName%

Angenommen, Sie haben eine Suchergebnisseite mit mehreren Links zu externen Websites. Sie möchten verfolgen, welcher Link angeklickt wird, indem Sie eine eVar mit dem id des angeklickten Elements dynamisch ausfüllen.

Beispiel-Link: <a id='myFirstLink' href='www.exampleLink.com'>

Erstellen Sie dazu eine ereignisbasierte Regel, die beim Klicken auf die Links auf der Seite Trigger wird. Legen Sie dann im Abschnitt Analytics der Regel den eVar auf %this.id% fest.

Bei benutzerdefinierten Attributen können Sie die JavaScript-Funktion this.getAttribute() auf ähnliche Weise nutzen, 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 ein eVar festlegen möchten.

Beispiel-Link: <a id='myFirstLink' loc='top' href='www.exampleLink.com'>

Erstellen Sie dazu eine ereignisbasierte Regel, die beim Klicken auf die Links auf der Seite Trigger wird. Legen Sie dann im Abschnitt Analytics der Regel den eVar auf %this.get Attribute(loc)% fest.

Wenn Sie sich nicht sicher sind, ob das gewünschte Attribut Standard oder nicht Standard 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 Regelfeldern des Dynamic Tag Management verwendet werden, darunter:

Analytics-Variablen

  • Adobe Analytics:

    • Linktracking, Seitendaten, Hierarchie
    • Globale Variablen und Ereignisse
  • Google Analytics

    • Seitenansichten, Ereignisse, benutzerdefinierte Variablen

Benutzerdefiniertes Skript

Standardattribute können auch mit regulärem JavaScript in benutzerdefiniertem Code referenziert werden.

Auf dieser Seite