Show Menu
THEMEN×

Bedingungen für ereignisbasierte Regeln erstellen

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
    Linkaktivierung verzögern
    Aktivieren, wenn das Ereignis einen Link aktiviert und Sie wünschen, dass der Link verzögert wird, bis das Ereignis ausgelöst werden kann.
    Ereignishandler direkt auf Element anwenden
    Der Ereignishandler wird direkt auf das spezifische Element angewendet, auf das die Ausrichtung erfolgt. Diese Einstellung ist mit dem Bubbling- und Ebenen-Konzept in einem Browser verknüpft.
    For example, when you click an image inside an anchor tag like <a href="abc.html"><img src="xyz.png"/></a> , you might expect the click to be associated with the anchor tag, because the tag is in the bubble stream. However, when you inspect the click in the developer tools, the click may actually affect only the <img> tag. To ensure that the event is handled correctly, associate the click with the <img> tag and do not depend on the browser to bubble up the click to a parent element. An event like a click can potentially bubble up to <body> . Es ist daher wichtig zu verstehen, an welche Einstellung das Ereignis tatsächlich gebunden ist, und diese zielgerichtet anzusprechen, um sicherzugehen, dass die Regel korrekt ausgelöst wird.
    Bubbling bedeutet, dass das Ereignis zuerst von dem innersten Element erfasst und behandelt wird und anschließend an übergeordnete Elemente weitergegeben 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.
    See Using the CSS Selector for information about finding the correct element tag.
  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übergabe im HTML-DOM.
    Problem
    Lösung
    Sie möchten zugehörige Interaktionen in untergeordneten Elementen des Regel-Selektors zulassen, den Sie als Auslöser der Regel angegeben haben.
    Eventbubbling für untergeordnete Elementen zulassen
    Sie möchten das Bubbling verhindern, wenn das untergeordnete Element bereits ein eigenes Ereignis auslöst.
    Nicht zulassen, wenn untergeordnetes Element bereits ein Ereignis auslöst.
    Sie möchten nicht, dass die Ereignisse im ausgewählten Regel-Selektor in der Ereignishierarchie das Element selbst übersteigen.
    Eventbubbling zu übergeordneten Elementen nicht zulassen

Ereignistypen

Liste integrierter Ereignistypen und deren Definition
Kategorie
Ereignis
Definition
Maus
click
Der Knopf eines Zeigegeräts wird auf einem Element gedrückt und wieder losgelassen.
mouseover
Ein Zeigegerät wird auf das Element, dem ein Listener zugewiesen ist, oder auf eines seiner untergeordneten Elemente bewegt.
Tastatur
keypress
Es wird eine Taste gedrückt, die normalerweise einen Zeichenwert ausgibt (stattdessen „Eingabe“ verwenden).
Formulare
focus
Ein Element wurde in den Fokus gerückt (steigt nicht auf).
blur
Der Fokus eines Elements wurde verloren (steigt nicht auf).
submit
Ein Formular wurde abgesendet.
change
Der Fokus eines Elements ging verloren und sein Wert hat sich seit der Fokussierung verändert.
HMTL5-Video
ended
Die Wiedergabe wurde angehalten, da das Ende der Mediendatei erreicht wurde.
loadeddata
Der erste Frame der Mediendatei ist fertig geladen.
play
Die Wiedergabe wurde gestartet.
pause
Die Wiedergabe wurde unterbrochen.
stalled
Der Benutzeragent versucht, Mediendaten abzurufen, dies ist jedoch unerwartet nicht möglich.
volumechange
Das Volumen hat sich geändert.
% complete
Verleiht einem Ereignis einen spezifischen Prozentsatz der gesamten Wiedergabedauer Wird beispielsweise „10 %“ eingegeben, wird diese Regel nur ausgelöst, wenn 10 % der Originaldauer des Videos abgespielt wurden.
time complete
Verleiht einem Ereignis eine bestimmte Wiedergabedauer Wird beispielsweise „10“ eingegeben, wird diese Regel nur ausgelöst, wenn 10 Sekunden der Gesamtdauer des Videos abgespielt wurden.
Mobil
orientationchange
Die Ausrichtung des Geräts (hochkant/quer) wurde geändert.
zoomchange
Durchführung einer Geste auf einem Mobilgerät, bei der zwei Finger auseinander oder aufeinander zu bewegt wurden.
Browser
tab focus
Das Ereignis wird ausgelöst, wenn der Inhalt in den Fokus rückt.
tab blur
Das Ereignis wird ausgelöst, wenn der Inhalt den Fokus verliert.
Sonstige
benutzerspezifisch
Auf dem DOM wurde ein benutzerspezifisches 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.
enters viewport
Wenn das Element zum ersten Mal im Sichtbereich des Besuchers auftaucht Befindet sich das Element gleich beim Laden im Sichtbereich, wird die Regel sofort ausgelöst. Taucht das Element erst nach Blättern im Sichtbereich auf, wird die Regel erst dann ausgelöst. Es kann optional eine Verzögerung in der Regel festgelegt werden, in der bestimmt wird, wie lange das Element in der Ansicht sichtbar gewesen sein muss, bis das Ereignis ausgelöst wird (der Standardwert lautet 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 or hashchange
Der URL-Pfad oder das Hash (Fragmentidentifikation) am Ende der URL hat sich geändert. Das Ereignis pushState or hashchange kann mit einseitigen Anwendungen (SPAs) verwendet werden, in denen die Seite nicht neu geladen wird, sich der Inhalt jedoch trotzdem ändert. Zu bekannten Entwicklungs-Frameworks für die Erstellung von SPAs gehören Angular und React. Mit diesem Ereignistyp können Sie ereignisbasierte Regeln erstellen, ohne sich dabei auf Entwickler verlassen zu müssen. Diese Regeln werden ausgelöst, wenn häufige Funktionen in SPAs eingesetzt werden, beispielsweise: Der URL-Pfad hat sich aufgrund der Verwendung der HTML5-Verlauf-API pushState verändert. Weitere Informationen zur Verwendung von pushState finden Sie unter der Kategorie Adding and Modifying History Entries im Mozilla Developer Network. Das Hash hat sich verändert, da der Benutzer zu einer anderen Ansicht oder an andere Orte auf der Seite wechselte. Weitere Informationen zur Verwendung von hashchange finden Sie unter Hashchange im Mozilla Developer Network.
time passed
Wert in Sekunden. Das Ereignis wird ausgelöst, wenn die festgelegte Anzahl an Sekunden verstrichen ist.
dataelementchanged
Ein Datumselement hat sich geändert. Mit diesem Element können Sie ein spezifisches Datenelement auswählen, das als Auslöser dienen soll. For more information on a possible use case, see Add Adobe Experience Manager ContextHub Tool .

Using the CSS selector

Use the CSS Selector to quickly and easily select CSS elements to use as triggers for event-based rules without leaving the DTM rule builder.
Einer der größten Vorteile von DTM ist, dass Ereignisendverhalten oder Seiteninteraktionen auf Ihrer Website verfolgt werden können. Es kann jedoch ein langwieriger und zeitraubender Prozess sein, die gewünschten CSS-Elemente zu identifizieren, die in die Regeln integriert werden sollen.

Example with unique element

Als Beispiel möchten wir nun eine Regel erstellen, die ausgelöst wird, wenn Benutzer auf den Link „Anmelden oder registrieren“ auf Ihrer Website klicken, wie in der Illustration unten dargestellt. Dieses Beispiel ist sehr einfach, da der Link für das Anmelden oder Registrieren nicht über ähnliche CSS-Elemente verfügt.
The more complex example described below illustrates how to use the CSS Selector when there are many similar elements on the page, such as the tabs along the top ("Men's," "Women's," "Equipment," and so forth).

Den CSS-Selektor verwenden:

  1. Access the CSS Selector widget within DTM by clicking the Target icon while creating a rule .
    In this example, we are creating an event-based rule that uses the Click event type to trigger the rule when users click the "Sign in or Register" link.
  2. Specify the website's URL, then click Load .
    Seien Sie so spezifisch wie möglich für die Webseite, die Sie so konfigurieren möchten. Beachten Sie, dass sich CSS-Stylesheets zwischen verschiedenen Seiten unterscheiden können, abhängig von Ihrer Website und deren Aufbau. Es kann sich als hilfreich erweisen, einige Zeit zu experimentieren und so herauszufinden, wie oft sich Ihr Stylesheet ändert.
    Die Webseite ist nun in einem iFrame geladen, in den das Widget des CSS-Selektors eingebettet ist. Bewegen Sie den Mauszeiger über verschiedene Elemente, um ein Gefühl dafür zu bekommen, wie das Tool funktioniert.
    If we were creating this rule without using the CSS Selector, we would inspect the desired page element to determine the proper CSS to use. Using the CSS Selector, simply click the element on the page that we want to trigger the rule.
  3. Klicken Sie auf Sign In or Register .
    Wenn Sie auf ein Seitenelement klicken, für das der CSS-Selektor eine Übereinstimmung finden soll, ändert es seine Farbe in grün. The CSS Selector then generates a minimal CSS selector for that element.
    Beachten Sie das Fenster unten, in dem Daten zum ausgewählten Element sowie eine Schaltfläche zur Übermittlung der Daten an DTM eingeblendet werden.
    The number in parenthesis next to Clear indicates the number of items selected. In diesem Beispiel ist auf der angegebenen Seite kein zu „Anmelden oder registrieren“ ähnlicher Link zu finden, der Wert lautet also „1“. Click Clear to remove selected items. Click Toggle Position to move the panel to the top or bottom of the iFrame as desired. Klicken ? to view help information about the CSS Selector.
  4. Click Send to DTM to copy the CSS into the Element Tag or Selector field within DTM.
  5. Finish configuring the rule as described in Create conditions for event-based rules .
    Without writing any code or inspecting elements, we have created an event-based rule that triggers when users click Sign In or Register .

Example with similar elements

Nehmen wir an, dass Sie eine Regel erstellen möchten, die ausgelöst wird, wenn Benutzer auf die Registerkarte "Herren" oben oder auf Ihrer Website klicken. Der Unterschied zwischen diesem und dem einfachen Beispiel oben besteht darin, dass auf der Seite viele Elemente zu finden sind, die der Registerkarte „Herren“ ähneln.
  1. Access the CSS Selector widget within DTM by clicking the Target icon while creating a rule .
  2. Specify the website's URL, then click Load .
  3. Klicken Sie auf die Registerkarte „Herren“, um sie auszuwählen.
    Beachten Sie, dass mehrere Elemente auf der Seite ausgewählt wurden und gelb hervorgehoben werden. The number next to Clear in parenthesis is 28 in this example, which means there are 28 elements on the page that use the "a" tag.
    Wir möchten eine Regel erstellen, die beim Klicken auf den Link „Herren“ ausgelöst wird, daher muss die Auswahl für die ähnlichen Elemente aufgehoben werden.
    Halten Sie den Mauszeiger über ähnliche hervorgehobene Elemente (wie „Damen“), es wird ein roter Kasten um das Element gezeigt.
    Wenn Sie auf ein Seitenelement klicken, für das der CSS-Selektor eine Übereinstimmung finden soll, ändert es seine Farbe in grün. The CSS Selector then generates a minimal CSS selector for that element. Zudem wird im Selektor alles hervorgehoben, das mit dem gelben Element übereinstimmt. The CSS Selector starts out broad and then lets you narrow your selection.
    Klicken Sie auf ein hervorgehobenes Element, um die Auswahl aufzuheben (rot), oder klicken Sie auf ein nicht hervorgehobenes Element, um es hinzuzufügen (grün). Mithilfe dieses Auswahl- und Ablehnungsprozesses können Sie die perfekte CSS-Auswahl für Ihre Zwecke treffen. Drücken Sie beim Bewegen der Maus die Umschalttaste, können Sie Elemente innerhalb anderer ausgewählter Elemente auswählen.
  4. Klicken Sie auf das Element mit der roten Umrandung (Damen), um dessen Auswahl und die aller anderen ähnlichen Elemente aufzuheben.
    Notice that the number in parenthesis next to Clear is now 1.
  5. Click Send to DTM to copy the CSS into the Element Tag or Selector field within DTM.
  6. Finish configuring the rule as described in Create conditions for event-based rules .

CSS Selector limitations

The CSS Selector is in Beta and might not work well for some sites due to technical limitations.

Dynamically populate variables

Sie können Elementattribute dynamisch Variablen zuweisen.
Möchten Sie Elementattribute Variablen zuweisen, nutzen Sie folgende Syntax:
%this.attributeName%

Nehmen wir beispielsweise an, Sie haben eine Seite mit Suchergebnissen mit mehreren Links zu externen Websites. Sie möchten verfolgen, welcher Link angeklickt wird, indem Sie eine eVar mit der id des angeklickten Elements ausfüllen.
Example Link: <a id='myFirstLink' href='www.exampleLink.com'>
Erstellen Sie zu diesem Zweck eine ereignisbasierte Regel, die beim Klicken auf die Links auf der Seite ausgelöst wird. Then, within the Analytics section of the rule, set the eVar to %this.id% .
For non-standard attributes, you can similarly leverage the JavaScript function this.getAttribute() by wrapping it in '%' characters, as follows:
%this.getAttribute(attributeName)%

Nehmen wir beispielsweise an, Sie haben eine ähnliche Seite mit Suchergebnissen wie im vorherigen Beispiel. Diese Links enthalten jedoch ein nicht standardmäßiges Attribut – loc –, das basierend auf dem angeklickten Link dynamisch auf eine eVar festgelegt werden soll.
Example link: <a id='myFirstLink' loc='top' href='www.exampleLink.com'>
Erstellen Sie zu diesem Zweck eine ereignisbasierte Regel, die beim Klicken auf die Links auf der Seite ausgelöst wird. Then, within the Analytics section of the rule, set the eVar to %this.get Attribute(loc)% .
Wenn Sie sich nicht sicher sind, ob es sich bei dem gewünschten Attribut um ein standardmäßiges oder nicht standardmäßiges handelt, finden Sie auf w3schools.com nähere Informationen über standardmäßige HTML-Attribute. Im Zweifelsfall können Sie jedoch das nicht standardmäßige Format getAttribute() verwenden, das in beiden Fällen funktioniert.
Diese Funktion kann in den Regelfeldern für das dynamische Tag-Management verwendet werden, einschließlich:

Analytics variables

  • Adobe Analytics:
    • Linktracking, Seitendaten, Hierarchie
    • Globale Variablen und Ereignisse
  • Google Analytics
    • Seitenansichten, Ereignisse, Benutzerspezifische Variablen

Custom script

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