Mouse
Ultimo aggiornamento il
3 mag 2021
Questo articolo descrive come utilizzare gli eventi personalizzati del sito Web per attivare una regola di gestione dinamica dei tag (DTM).
Eventi del browser
Un evento è un segnale che qualcosa è accaduto sulla pagina web. Gli sviluppatori possono utilizzare questi segnali per reagire o agire.
Pensa a un evento come un’onda radio. Le onde radio vengono trasmesse e possono essere ascoltate da tutti, ma è necessario sintonizzarsi sulla frequenza corretta per ascoltarle. Se trasmetti e nessuno riceve, nessun c’è alcun danno. Lo stesso vale per gli eventi: puoi attivare un evento e questo non genera alcun errore se nessuno è in ascolto. Puoi anche metterti in ascolto in attesa di un evento che non accade mai senza causare problemi o generare errori.
Diverse risorse coprono gli eventi HTML:
Utilizzo di regole basate sugli eventi in DTM
Quando crei una regola basata su eventi, puoi configurarla per eventi predefiniti specifici. Ciascun browser dispone di eventi predefiniti che vengono attivati da determinate azioni, ad esempio quelle comuni seguenti:
- Numero di clic del mouse
- Mouseover (passaggio del mouse sopra un elemento della pagina)
- Messa a fuoco del campo modulo (il cursore si sposta all’interno di un campo modulo)
- Sfocatura del campo modulo (il cursore esce da un campo modulo)
- Invio del modulo
Questi eventi hanno senso; vengono completati ogni giorno sul Web. Se gli eventi predefiniti del browser non ti consentono di monitorare ciò che desideri, puoi utilizzare invece gli eventi JavaScript.
Quali eventi sono integrati in DTM?
I seguenti eventi sono incorporati nelle regole basate sugli eventi di DTM:
|
|
Tastiera |
Forum di utenti (solo in inglese) |
Video HTML5 |
Dispositivi mobili |
Altro |
|---|---|---|---|---|---|
|
click mouseover |
keypress |
focus blur submit change |
ended loadeddata play pause stalled volumechange % complete time complete |
orientationchange zoomchange |
custom enters viewport element exists pushState or hashchange |
Eventi personalizzati
Devi attivare un evento per poterne ascoltare uno. Gli eventi sono definiti nel codice del sito dagli sviluppatori. Identifica quando e dove può essere un po’ complicato utilizzare un evento. Una semplice regola pratica: utilizza un evento personalizzato se desideri monitorare qualcosa e non puoi farlo con un tipo di evento DTM predefinito.
Attivazione di un evento
Considera il seguente esempio con un evento personalizzato, poiché ti consente di aggiungere dati. Immagina di avere un carrello della spesa e quando aggiungi qualcosa al carrello viene utilizzato AJAX. Non viene caricata una nuova pagina, mentre una finestra a comparsa o un messaggio ti informa che è stato aggiunto un elemento al carrello. Quando questo accade, puoi creare un evento personalizzato che indica esattamente cosa è stato aggiunto:
var addToCart = new CustomEvent('addToCart', 'detail': {'product_id': data.product.sku, 'quantity': data.product.quantity, 'price': data.product.price.fullPrice});
document.getElementById('minicart').dispatchEvent(addToCart);
Il codice sopra riportato fa riferimento ai dati di un oggetto denominato “data”. I dati “dettaglio” personalizzati vengono definiti come un oggetto al quale è possibile fare riferimento durante l’ascolto dell’evento. Dopo aver creato l’evento, lo puoi attivare su un elemento specifico, in questo caso un elemento sulla pagina con l’ID “minicart”. Ora è disponibile un evento personalizzato che trasmette a tutti gli utenti che desiderano ascoltare.
Aggiungi un listener di eventi personalizzati
In DTM, aggiungere un listener di eventi personalizzato è facile quanto aggiungere una regola basata su eventi.
Questi passaggi consentono di configurare una regola per l’ascolto in DTM:
-
Aggiungi una nuova regola basata su eventi.
-
Dagli un nome.
-
Seleziona il tipo di evento personalizzato e inserisci il nome dell’evento, che è stato definito come addToCart nell’esempio sopra.
-
Definisci il tag o l’elemento che questo evento dovrà avere. Utilizzando i selettori CSS, sarà #minicart.
-
Configura la regola per attivare i beacon appropriati.
Domande?
Se hai domande su questo articolo o su qualsiasi altro argomento relativo a DTM, consulta i forum della community DTM. Puoi utilizzare il forum per porre domande, partecipare alle discussioni e rimanere aggiornato sulle ultime novità per ogni soluzione.
Grazie a Adam di Disruptive Advertising per aver autorizzato l’utilizzo di parti del post del suo blog per questo articolo.