Show Menu
ARGOMENTI×

Create conditions for event-based rules

Condizioni determinano quando viene attivata una regola basata su eventi.
  1. Selezionare il tipo di interazione da tracciare, ad esempio clic del mouse, o inviare un modulo.
    For more information, see Event Types .
  2. Attivate le opzioni seguenti, a seconda delle necessità:
    Elemento
    Descrizione
    Ritardo collegamento collegamento
    Attivate se l'evento attiva un collegamento e desiderate che il collegamento sia ritardato finché l'evento non avrà il tempo di attivarlo.
    Applica il gestore di eventi direttamente all'elemento
    Applica il gestore di eventi all'elemento specifico con targeting. Questa impostazione è legata al concetto di bubbling e layering in un browser.
    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> . È importante comprendere in che punto l'evento è effettivamente associato e come destinazione è specificamente necessario che la regola venga attivato correttamente.
    Lo strumento di bubbling significa che l'evento viene acquisito e gestito per la prima volta dall'elemento interno e quindi trasmesso agli elementi esterni.
  3. Indica il nome del tag da tracciare e altre proprietà a cui desiderate associare il tag.
    See Using the CSS Selector for information about finding the correct element tag.
  4. Select and set up any additional criteria or condition types you wish to bind to the rule.
  5. Indicate la preferenza relativa al bubbling degli eventi.
    La bubbling degli eventi è una modalità di propagazione eventi nel DOM HTML.
    Problema
    Soluzione
    Desiderate interazioni correlate sugli elementi secondari del selettore della regola identificato per attivare la regola.
    Consentire la bolla degli eventi sugli elementi secondari
    Desiderate evitare il bubbling quando l'elemento secondario attiva già un proprio evento.
    Non consentite se l'elemento secondario ha già un evento.
    Non desiderate che gli eventi del selettore della regola che avete identificato vadano oltre l'elemento stesso nella gerarchia dell'evento.
    Non consentire agli eventi di passare da un'immagine all'altra verso il basso

Event types

Elenco dei tipi di evento incorporati e modalità di definizione.
Categoria
Evento
Definizione
Mouse
click
Un pulsante dispositivo di puntamento viene premuto e rilasciato su un elemento.
passaggio del mouse
Un dispositivo di puntamento viene spostato sull'elemento associato al listener o in uno dei suoi elementi secondari.
Tastiera
keypress
Viene premuto un tasto che normalmente genera un valore di carattere (utilizzate l'input).
Moduli
focus
Un elemento è stato ricevuto (non bolle).
sfocatura
Un elemento è stato perso (non bolle).
submit
Viene inviato un modulo.
change
Un elemento perde lo stato attivo e il suo valore cambia dopo averlo attivato.
Video HMTL 5
ended
Riproduzione interrotta perché è stata raggiunta la fine del supporto.
loadeddata
Il primo fotogramma del file multimediale finale.
play
La riproduzione è iniziata.
pause
La riproduzione viene messa in pausa.
staging
L'agente utente sta cercando di recuperare i dati multimediali, ma i dati non sono in pratica disponibili.
volumechange
Il volume è stato modificato.
% completato
Visualizza un evento con una percentuale specificata del tempo di riproduzione totale. Ad esempio, immettendo 10% indica che questa regola viene attivata solo quando è stato riprodotto il 10% della lunghezza totale del video.
tempo completo
Visualizza un evento che specifica una durata specificata del tempo di riproduzione. Ad esempio, se immettete 10 indica che questa regola viene attivata solo quando è stato riprodotto 10 secondi della lunghezza totale del video.
Dispositivi mobili
orientation ationchange
L'orientamento del dispositivo (verticale/orizzontale) è stato modificato.
zoomchange
Quando viene eseguito un gesto di pizzicare o affiancare un dispositivo mobile.
Browser
stato attivo
L'evento viene attivato quando il contenuto diventa attivo.
sfocatura tabulazione
L'evento viene attivato quando il contenuto perde l'evidenziazione.
Altre
custom
Un evento personalizzato è stato attivato sul DOM. Select Custom from the Event Type drop-down list, then specify the custom event name. For more information, see CustomEvent on the Mozilla Developer Network.
immette viewport
Quando l'elemento accede per la prima volta alla visualizzazione del visitatore. Se l'elemento è visualizzato immediatamente al caricamento della pagina, la regola viene attivata immediatamente. Se l'elemento viene visualizzato dopo lo scorrimento, la regola viene attivata. Nella regola è possibile specificare un ritardo facoltativo che determina per quanto tempo deve essere visualizzato l'elemento prima dell'attivazione dell'evento (il valore predefinito è 1 secondo).
l'elemento esiste
Quando un elemento di un selettore specificato si trova in un'esistenza, perché si trova nel markup della pagina o inserito in modo dinamico in seguito. Ogni regola viene attivata solo una volta.
Pushstate o hashchange
Il percorso dell'URL o l'hash (identificatore frammento) alla fine dell'URL modificato. The pushState or hashchange event can be used with Single Page Apps (SPAs) in which a page does not reload but its content changes. I framework di sviluppo comuni che possono essere utilizzati per creare spas includono Angular and Response. Questo tipo di evento consente di creare regole basate su eventi senza affidarsi agli sviluppatori. These rules fire when common functions in SPAs occur, such as: The URL path changed based on use of the HTML5 History pushState API. Per ulteriori informazioni sull'utilizzo pushState , consultate Aggiunta e modifica delle voci della cronologia in Mozilla Developer Network. L'hash è stato modificato a causa dell'utente che modifica visualizzazioni o posizioni sulla pagina. Per ulteriori informazioni sull'utilizzo hashchange , consultate Hashchange on the Mozilla Developer Network.
time passed
Valore in secondi. L'evento viene attivato dopo che è trascorso il numero specificato di secondi.
dataelementchanged
È stato modificato un elemento di data. Questo evento consente di selezionare un elemento di dati specifico da utilizzare come trigger. 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.
Uno dei principali vantaggi di DTM è la capacità di disattivare i comportamenti o le interazioni delle pagine sul tuo sito Web. Tuttavia, l'individuazione degli elementi CSS desiderati da includere nelle regole è a volte difficile e dispendiosa in termini di tempo.

Example with unique element

Ad esempio, desideriamo creare una regola che si attivi quando gli utenti fanno clic sul collegamento Accesso o Registrazione nel nostro sito Web, come illustrato nella figura seguente. Questo esempio è semplice perché il collegamento "Accesso o Registrazione" non dispone di elementi simili nel CSS.
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).

Per usare il selettore CSS:

  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 .
    Siate specifici della pagina Web in cui desiderate disattivare l'evento. I fogli di stile CSS possono essere modificati da una pagina all'altra, a seconda del sito Web e della relativa architettura. È utile verificare la frequenza con cui il foglio di stile cambia.
    Il sito Web viene ora caricato in un iframe con il widget Selettore CSS incorporato. Passate il puntatore del mouse su elementi diversi per ottenere informazioni su come funziona lo strumento.
    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. Fai clic su Sign In or Register .
    Quando si fa clic su un elemento di pagina che si desidera corrispondere al selettore, diventa verde. The CSS Selector then generates a minimal CSS selector for that element.
    Osserva il pannello nella parte inferiore contenente informazioni sull'elemento selezionato e un pulsante per inviare le informazioni a DTM.
    The number in parenthesis next to Clear indicates the number of items selected. In questo esempio, il collegamento «Accesso o Registrazione» non ha alcun elemento simile alla pagina specificata, quindi viene visualizzato «1». Click Clear to remove selected items. Click Toggle Position to move the panel to the top or bottom of the iFrame as desired. Clic ? 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

Supponiamo ora di voler creare una regola che si attivi quando gli utenti fanno clic sulla scheda "Uomo" nella parte superiore o sul sito Web. La differenza tra questo esempio e l'esempio semplice descritto sopra è che la scheda "Uomo" contiene molti elementi simili sulla pagina.
  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. Fate clic sulla scheda "Uomo" per selezionarla.
    Tenere presente che molti elementi della pagina sono selezionati e sono evidenziati in giallo. 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.
    Desideriamo attivare la regola quando gli utenti fanno clic sul collegamento "Uomo", quindi è necessario deselezionare gli altri elementi simili.
    Passa il cursore su un elemento simile evidenziato (ad esempio «Donna») e noterai che intorno all'elemento compare una casella rossa.
    Quando si fa clic su un elemento di pagina che si desidera corrispondere al selettore, diventa verde. The CSS Selector then generates a minimal CSS selector for that element. Inoltre, il selettore evidenzia tutto ciò che corrisponde all'elemento in giallo. The CSS Selector starts out broad and then lets you narrow your selection.
    Fate clic su un elemento evidenziato per rifiutarlo (rosso) oppure fate clic su un elemento non evidenziato per aggiungerlo (verde). Tramite questo processo di selezione e rifiuto, potete trovare il selettore CSS perfetto per le vostre esigenze. Se si preme Maiusc mentre si sposta il mouse, è possibile selezionare gli elementi all'interno degli altri elementi selezionati.
  4. Fate clic sull'elemento con la casella rossa (Donna) per deselezionare l'elemento e tutti gli altri elementi simili.
    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

Potete assegnare in modo dinamico gli attributi degli elementi alle variabili.
Per assegnare dinamicamente gli attributi degli elementi alle variabili, usa la sintassi seguente:
%this.attributeName%

Ad esempio, supponiamo di disporre di una pagina di risultati di ricerca con più collegamenti a siti Web esterni. You want to track which link is clicked by dynamically populating an eVar with the id of the element clicked.
Example Link: <a id='myFirstLink' href='www.exampleLink.com'>
A tal fine, create una regola basata su eventi da attivare al clic dei collegamenti sulla pagina. 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)%

Ad esempio, supponete di disporre di una pagina di risultati di ricerca simile, come mostrato nell'esempio precedente. However, these links contain a non-standard attribute, loc that you want to dynamically set to an eVar based on the link clicked.
Example link: <a id='myFirstLink' loc='top' href='www.exampleLink.com'>
A tal fine, create una regola basata su eventi da attivare al clic dei collegamenti sulla pagina. Then, within the Analytics section of the rule, set the eVar to %this.get Attribute(loc)% .
If you are unsure if the desired attribute is standard or non-standard, reference w3schools.com to learn more about standard HTML attributes. However, if in doubt, you can use the non-standard getAttribute() format, which will work in either scenario.
Questa funzionalità può essere utilizzata nei campi Regola Gestione tag dinamica, tra cui:

Analytics variables

  • Adobe Analytics:
    • Tracciamento collegamenti, Dati pagina, Gerarchia
    • Variabili ed eventi globali
  • Google Analytics
    • Visualizzazioni, Eventi, Variabili personalizzate

Custom script

È inoltre possibile fare riferimento agli attributi Standard utilizzando javascript normale nel codice personalizzato.