Show Menu
ARGOMENTI×

Creazione condizioni per le regole basate su eventi

Le condizioni determinano quando viene attivata una regola basata sugli eventi.
  1. Selezionare il tipo di interazione da monitorare, ad esempio i clic del mouse o l'invio di un modulo.
    Per ulteriori informazioni, consultate Tipi di eventi.
  2. Se necessario, abilitate le seguenti opzioni:
    Elemento
    Descrizione
    Ritardo attivazione collegamento
    Selezionate questa opzione se l’evento attiva un collegamento e desiderate che il collegamento ritardi fino a quando l’evento non ha tempo per essere attivato.
    Applicare il gestore eventi direttamente all'elemento
    Applica il gestore eventi all'elemento specifico di destinazione. Questa impostazione è legata al concetto di generazione di bolle e livelli in un browser.
    Ad esempio, quando si fa clic su un'immagine all'interno di un tag di ancoraggio come <a href="abc.html"><img src="xyz.png"/></a> , è possibile che il clic sia associato al tag di ancoraggio, perché il tag si trova nel flusso delle bolle. Tuttavia, quando ispezionate il clic negli strumenti di sviluppo, il clic potrebbe influenzare solo il <img> tag. Per garantire che l’evento venga gestito correttamente, associate il clic con il <img> tag e non dipendono dal browser per visualizzare il clic su un elemento padre. Un evento come un clic può potenzialmente generare un effetto <body> . È importante capire dove l'evento è effettivamente associato, ed eseguire il targeting specifico per assicurarsi che la regola venga attivata correttamente.
    Bubbling significa che l’evento viene catturato e gestito per la prima volta dall’elemento più interno e quindi propagato agli elementi esterni.
  3. Indicate il nome del tag da monitorare e altre proprietà a cui il tag deve corrispondere.
    Consultate Utilizzo del selettore CSS per informazioni su come trovare il tag elemento corretto.
  4. Selezionare e impostare eventuali criteri o tipi di condizioni aggiuntivi da associare alla regola.
  5. Indicate le preferenze per quanto riguarda il bollo degli eventi.
    Il bubbling degli eventi è uno dei metodi di propagazione degli eventi nel DOM HTML.
    Problema
    Soluzione
    Desiderate interazioni correlate su elementi secondari del selettore di regole identificato per attivare la regola.
    Consenti la generazione di eventi su elementi figlio
    Si desidera evitare la generazione di bolle quando l'elemento figlio attiva già un proprio evento.
    Non consentire se l'elemento figlio attiva già l'evento.
    Non si desidera che gli eventi del selettore di regole identificato vadano oltre l'elemento stesso nella gerarchia degli eventi.
    Non consentire agli eventi di esplodere verso l'alto per i genitori

Tipi di evento

Elenco dei tipi di evento incorporati e modalità di definizione di ciascuno.
Categoria
Evento
Definizione
Mouse
click
Un pulsante del dispositivo di puntamento viene premuto e rilasciato su un elemento.
passaggio del mouse
Un dispositivo di puntamento viene spostato sull'elemento a cui è collegato il listener o su uno dei relativi elementi figlio.
Tastiera
keypress
Un tasto viene premuto e il tasto produce normalmente un valore di carattere (utilizzare invece l'input).
_Forms
focus
Un elemento ha ricevuto lo stato attivo (non bolla).
sfocatura
Elemento non attivo (senza bolla).
submit
Viene inviato un modulo.
change
Un elemento perde lo stato attivo e il relativo valore viene modificato dopo l'acquisizione dello stato attivo.
Video HMTL5
ended
Riproduzione interrotta perché è stata raggiunta la fine del file multimediale.
loadeddata
Il primo fotogramma del file multimediale ha terminato il caricamento.
play
La riproduzione è iniziata.
pause
La riproduzione è messa in pausa.
bloccato
L'agente utente sta tentando di recuperare i dati del supporto, ma i dati non sono disponibili in modo imprevisto.
volumechange
Il volume è cambiato.
% completato
Visualizza un evento in base a una percentuale specificata del tempo di riproduzione totale. Ad esempio, se immettete 10%, questa regola viene attivata solo quando è stato riprodotto il 10% della lunghezza totale del video.
time complete
Attiva un evento per una determinata durata del tempo di riproduzione. Ad esempio, se immettete 10 questa regola viene attivata solo quando sono stati riprodotti 10 secondi della lunghezza totale del video.
Dispositivi mobili
orientationchange
L'orientamento del dispositivo (verticale/orizzontale) è cambiato.
zoomchange
Quando viene eseguito un gesto di avvicinamento delle dita o di diffusione su un dispositivo mobile.
Browser
focus sulla scheda
L'evento viene attivato quando il contenuto diventa attivo.
sfocatura scheda
L'evento viene attivato quando il contenuto diventa inattivo.
Altro
custom
È stato attivato un evento personalizzato sul DOM. Select Custom from the Event Type drop-down list, then specify the custom event name. Per ulteriori informazioni, vedi CustomEvent in Mozilla Developer Network.
enter viewport
Quando l’elemento viene visualizzato per la prima volta dal 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. È possibile specificare un ritardo facoltativo nella regola che determina per quanto tempo deve essere visualizzato l'elemento prima che l'evento venga attivato (il valore predefinito è 1 secondo).
element exists
Quando un elemento di un selettore specifico esiste, perché si trova nella marcatura di pagina o viene inserito in modo dinamico in un secondo momento. Ogni regola viene attivata una sola volta.
pushState o hashchange
Il percorso URL o l'hash (identificatore frammento) alla fine dell'URL sono cambiati. L’ pushState evento o hashchange l’evento può essere utilizzato con le app per pagina singola (SPA) in cui una pagina non viene ricaricata ma il suo contenuto cambia. I framework di sviluppo comuni che possono essere utilizzati per creare le app SPA includono Angular e React. Questo tipo di evento consente di creare regole basate su eventi senza affidarsi agli sviluppatori. Queste regole si attivano quando si verificano funzioni comuni nelle zone di protezione speciale, come: Il percorso dell’URL è stato modificato in base all’utilizzo dell’ pushState API HTML5 History. Per ulteriori informazioni sull'utilizzo pushState , vedere Aggiunta e modifica di voci della cronologia in Mozilla Developer Network. L'hash è stato modificato a causa della modifica delle visualizzazioni o delle posizioni sulla pagina da parte dell'utente. Per ulteriori informazioni sull'utilizzo hashchange , vedere Hashchange in Mozilla Developer Network.
tempo trascorso
Valore in secondi. L'evento viene attivato dopo che è trascorso il numero specificato di secondi.
dataelementchanged
Un elemento data è stato modificato. Questo evento consente di selezionare un elemento dati specifico da utilizzare come trigger. Per ulteriori informazioni su un possibile caso di utilizzo, consulta Aggiunta dello strumento ContextHub Adobe Experience Manager.

Utilizzo del selettore CSS

Utilizzate l'icona CSS Selector per selezionare rapidamente e facilmente gli elementi CSS da utilizzare come trigger per le regole basate su eventi senza uscire dal generatore di regole DTM.
Uno dei maggiori vantaggi di DTM è la possibilità di evitare comportamenti o interazioni di pagina sul sito Web. Tuttavia, trovare gli elementi CSS desiderati da includere nelle regole a volte è difficile e richiede molto tempo.

Esempio con un elemento univoco

Ad esempio, vogliamo creare una regola che venga attivata quando gli utenti fanno clic sul collegamento "Accedi o Registrati" sul nostro sito Web, come illustrato nell'illustrazione seguente. Questo esempio è semplice perché il collegamento "Accedi o Registra" non contiene elementi simili nel CSS.
L'esempio più complesso descritto di seguito illustra come utilizzare il CSS Selector quando sulla pagina sono presenti molti elementi simili, come le schede lungo la parte superiore ("Uomo," "Donne," "Attrezzatura" e così via).

Per utilizzare il selettore CSS:

  1. Per accedere al CSS Selector widget all’interno di Gestione dinamica dei tag, fai clic sull’ Target icona durante la creazione di una regola .
    In questo esempio, stiamo creando una regola basata sugli eventi che utilizza il tipo di Click evento per attivare la regola quando gli utenti fanno clic sul collegamento "Accedi o Registra".
  2. Specificate l'URL del sito Web, quindi fate clic Load .
    Specificate la pagina Web da disattivare il più possibile. Tenete presente che i fogli di stile CSS possono passare da una pagina all'altra, a seconda del sito Web e della sua architettura. È utile verificare con quale frequenza il foglio di stile cambia.
    Il sito Web ora viene caricato in un iFrame con il widget Selettore CSS incorporato. Passate il puntatore del mouse su elementi diversi per vedere come funziona lo strumento.
    Se stessimo creando questa regola senza utilizzarla, CSS Selectorispezioneremmo l'elemento pagina desiderato per determinare il CSS appropriato da utilizzare. Utilizzando la regola, CSS Selectorfate clic sull'elemento nella pagina che si desidera attivare la regola.
  3. Fai clic su Sign In or Register .
    Facendo clic su un elemento di pagina che si desidera far corrispondere al selettore, questo diventa verde. Viene quindi CSS Selector generato un selettore CSS minimo per l'elemento.
    Osservate il pannello in basso che contiene informazioni sull’elemento selezionato e un pulsante per inviare le informazioni a Gestione dinamica dei tag.
    Il numero tra parentesi accanto a Clear indica il numero di elementi selezionati. In questo esempio, il collegamento "Accedi o Registra" non ha nulla di simile sulla pagina specificata, pertanto viene visualizzato "1". Fate clic Clear per rimuovere gli elementi selezionati. Fate clic Toggle Position per spostare il pannello nella parte superiore o inferiore dell’iFrame come desiderato. Fai clic su ? per visualizzare le informazioni della guida relative al CSS Selector.
  4. Fate clic Send to DTM per copiare il CSS nel Element Tag or Selector campo all'interno di Gestione dinamica dei tag.
  5. Completate la configurazione della regola come descritto in Creare condizioni per le regole basate sugli eventi.
    Senza scrivere codice o ispezionare elementi, abbiamo creato una regola basata sugli eventi che viene attivata quando gli utenti fanno clic Sign In or Register .

Esempio con elementi simili

Supponiamo ora di voler creare una regola che venga attivata quando gli utenti fanno clic sulla scheda "Uomo" nella parte superiore o sul sito Web. La differenza tra questo esempio e il semplice esempio di cui sopra è che la scheda "Uomo" ha molti elementi simili sulla pagina.
  1. Per accedere al CSS Selector widget all’interno di Gestione dinamica dei tag, fai clic sull’ Target icona durante la creazione di una regola .
  2. Specificate l'URL del sito Web, quindi fate clic Load .
  3. Fare clic sulla scheda "Uomo" per selezionarla.
    Notate che molti elementi della pagina sono selezionati e evidenziati in giallo. In questo esempio, il numero accanto a Clear tra parentesi è 28, il che significa che sulla pagina sono presenti 28 elementi che utilizzano il tag "a".
    Vogliamo attivare la regola quando gli utenti fanno clic sul collegamento "Uomo", quindi dobbiamo deselezionare gli altri elementi simili.
    Passate il puntatore del mouse su un elemento evidenziato simile (ad esempio "Women's") e noterete che intorno all'elemento viene visualizzata una casella rossa.
    Facendo clic su un elemento di pagina che si desidera far corrispondere al selettore, questo diventa verde. Viene quindi CSS Selector generato un selettore CSS minimo per l'elemento. Inoltre, il selettore evidenzia tutto ciò che corrisponde a tale elemento in giallo. La CSS Selector selezione inizia in modo ampio e consente di limitare la selezione.
    Fate clic su un elemento evidenziato per rifiutarlo (rosso) oppure fate clic su un elemento non evidenziato per aggiungerlo (verde). Grazie a questo processo di selezione e rifiuto, potete ottenere il selettore CSS perfetto per le vostre esigenze. Premendo Maiusc mentre si sposta il mouse è possibile selezionare gli elementi all’interno di altri elementi selezionati.
  4. Fare clic sull'elemento con la casella rossa (Da donna) per deselezionarlo e tutti gli altri elementi simili.
    Notate che il numero tra parentesi accanto a Clear è ora 1.
  5. Fate clic Send to DTM per copiare il CSS nel Element Tag or Selector campo all'interno di Gestione dinamica dei tag.
  6. Completate la configurazione della regola come descritto in Creare condizioni per le regole basate sugli eventi.

Limitazioni del selettore CSS

L' CSS Selector etichetta è in versione beta e potrebbe non funzionare bene per alcuni siti a causa di limitazioni tecniche.

Compilazione dinamica di variabili

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

Ad esempio, supponete di avere una pagina di risultati di ricerca con più collegamenti a siti Web esterni. Per tracciare il collegamento su cui si fa clic, compilare dinamicamente un eVar con il clic id dell'elemento.
Esempio di collegamento: <a id='myFirstLink' href='www.exampleLink.com'>
A tal fine, create una regola basata su eventi da attivare facendo clic sui collegamenti presenti nella pagina. Quindi, all'interno della Analytics sezione della regola, impostare l'eVar su %this.id% .
Per gli attributi non standard, potete sfruttare in modo simile la funzione JavaScript this.getAttribute() racchiudendola in caratteri '%', come segue:
%this.getAttribute(attributeName)%

Ad esempio, supponete di avere una pagina di risultati di ricerca simile a quella mostrata nell’esempio precedente. Tuttavia, questi collegamenti contengono un attributo non standard loc che si desidera impostare dinamicamente su un eVar in base al collegamento selezionato.
Esempio di collegamento: <a id='myFirstLink' loc='top' href='www.exampleLink.com'>
A tal fine, create una regola basata su eventi da attivare facendo clic sui collegamenti presenti nella pagina. Quindi, all'interno della Analytics sezione della regola, impostare l'eVar su %this.get Attribute(loc)% .
Se non siete sicuri se l'attributo desiderato è standard o non standard, fate riferimento a w3school.com per ulteriori informazioni sugli attributi HTML standard. Tuttavia, in caso di dubbi, è possibile utilizzare il formato non standard getAttribute() , che funzionerà in entrambi gli scenari.
Questa funzionalità può essere utilizzata nei campi delle regole di gestione tag dinamica, tra cui:

Analytics variables

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

Script personalizzato

È inoltre possibile fare riferimento agli attributi standard utilizzando JavaScript standard nel codice personalizzato.