La scorsa settimana il team stellare di Adobe Dynamic Tag Management ha aggiunto alcune nuove interessanti funzionalità alle regole basate sugli eventi di DTM. Sono disponibili 2 nuovi tipi di eventi per le regole basate sugli eventi che è possibile utilizzare.

1. Costume
2. pushState o hashchange

Leggi le sezioni seguenti per ulteriori informazioni su ciascun tipo di evento.

Regola basata sugli eventi: personalizzata

Innanzitutto, definiamo un evento personalizzato. Diamo un'occhiata ad alcuni esempi di altre regole basate sugli eventi in DTM. Di seguito è riportato l'elenco dei tipi di evento per le regole basate sugli eventi.

Quando crei una regola basata sugli eventi, puoi configurarla per specifici eventi predefiniti. Ogni browser (anche Internet Explorer) dispone di eventi predefiniti che possono essere attivati ​​per determinate azioni. Alcuni di quelli facili sono:

• clic del mouse
• mouse over (passando il mouse su qualcosa sulla pagina)
• focus del campo del modulo (il cursore va all'interno di un campo del modulo)
• campo modulo sfocato (il cursore lascia un campo modulo)
• modulo invia
• eccetera.

Tutto ciò ha senso; sono cose che facciamo ogni singolo giorno sul web. A volte è necessario tenere traccia di qualcosa ed è quasi impossibile farlo correttamente. Questo è il motivo per cui mi piace usare gli eventi JavaScript. Pensa a un evento come onde radio. Vengono trasmessi in modo che tutti possano ascoltarli, ma devi sintonizzarti sulla frequenza giusta per ascoltarli. Se trasmetti e nessuno ti ascolta, niente di grave (non dirlo agli inserzionisti radiofonici). Lo stesso con gli eventi: puoi attivare un evento e non causerà alcun problema o genererà errori se non c'è qualcosa che lo ascolta. E se ascolti un evento che non accade mai, non causerà alcun problema né genererà errori.

Perché questo è importante? Uno dei vecchi modi per tracciare le azioni era creare una funzione JavaScript personalizzata e quindi chiamarla o implementare un set di codice molto specifico che è specifico di un sistema di gestione dei tag o di un'altra base di codice. Ma cosa succede se quella funzione viene in qualche modo rimossa o rinominata? Otterresti errori JavaScript che a volte potrebbero interrompere un sito. Gli eventi risolvono questo problema.

Se hai familiarità con le regole di chiamata diretta di DTM, potresti chiederti "Perché non utilizzare solo una regola di chiamata diretta?" Una domanda valida. Il problema è che le regole di chiamata diretta creano una dipendenza da DTM. Se sono uno sviluppatore e qualcuno mi sta dicendo di inserire un mucchio di codice che fa riferimento a _satellite.track nel mio codice, lo metterei in dubbio e molto probabilmente direi di no! Invece puoi usare un evento, che non ha dipendenze.

Per poter ascoltare un evento, devi prima attivarne uno. Gli eventi dovrebbero essere definiti nel codice del sito dai tuoi sviluppatori. Identificare quando e dove usarne uno può essere un po' complicato, ma una semplice regola empirica è che se è qualcosa che vuoi monitorare e non puoi seguirlo con un tipo di evento DTM predefinito, usa un evento personalizzato. Possiamo trovare alcune buone informazioni su come farlo da Mozilla. Esistono 2 tipi di eventi di base:

• Evento: attiva l'evento senza inviare dati aggiuntivi sull'evento
• CustomEvent: aggiungi alcuni dati all'evento

Userò un esempio con un evento personalizzato, poiché ti consentono di aggiungere dati. Supponiamo di avere un carrello della spesa e quando aggiungi qualcosa al carrello utilizza AJAX. Ciò significa che non viene caricata una nuova pagina, ma potrebbe esserci un popup o un messaggio che ti informa che un articolo è stato aggiunto al carrello. Quando ciò accade, posso creare un evento personalizzato che mi dica 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);

Nel codice sopra puoi vedere che sto facendo riferimento ai dati di un oggetto chiamato "data". Sto definendo i dati di "dettaglio" personalizzati come un oggetto, a cui posso fare riferimento durante l'ascolto dell'evento. Dopo aver costruito l'evento, lo innesco su un elemento specifico, in questo caso un elemento della pagina con l'id “minicart”. Ora ho un evento personalizzato che viene trasmesso per chiunque voglia ascoltarlo.

Successivamente configurerò una regola per l'ascolto in DTM:

1. Aggiungi una nuova regola basata sugli eventi
2. Dagli un nome
3. Seleziona il tipo di evento "custom" e inserisci il nome dell'evento, che abbiamo definito come "addToCart"
   
4. Definisci il tag o l'elemento che avrà questo evento. Usando i selettori CSS, questo sarà "#minicart"
   
5. Configura la regola. Qui è dove diventa bello. Puoi utilizzare il "dettaglio" che è stato fornito nell'evento e puoi persino usarlo come oggetto. GRAZIE ADOBO! Qui sto inviando un evento di Google Analytics con i dati che desidero. Puoi fare riferimento ai dati utilizzando %event.detail%, o se hai un oggetto puoi fare riferimento ad esso come %event.detail.<<name>>%. Vedere l'esempio seguente.
   
   Probabilmente non manderei mai un evento come questo, ma hai capito come può essere utilizzato. E se hai bisogno di usarlo nel codice personalizzato, diciamo per lo strumento Adobe Analytics, puoi fare riferimento a esso come _satellite.getVar(“%event.detail.product_id%”). SALSA STUPENDA!!!

Questo non doveva essere un romanzo, ma volevo mostrare quanto sia fantastica questa caratteristica. Per quanto io ami le regole di chiamata diretta, passano in secondo piano nelle mie implementazioni e gli eventi personalizzati sono un fucile da caccia.

pushState o hashchange

pushState

Ora diamo un'occhiata a pushState. Fondamentalmente ti consente di aggiornare l'URL della pagina/sito senza dover effettivamente caricare una nuova pagina. Di per sé ciò non fa nulla, ma consente di utilizzare app a pagina singola. Esistono diversi framework che sfruttano questa funzionalità. Quindi, se il tuo sito è costruito in questo modo, la funzione pushState può essere davvero utile!

Quando imposti la regola, dovrai ovviamente selezionare il nuovo tipo di evento.

Non sono necessari selettori CSS per definirlo ulteriormente. Tuttavia, vorrai esaminare alcune condizioni. Quello principale che utilizzerai, se stai solo guardando il nuovo URL, è path. Questo è tutto!

hashchange

Grazie a Twitter sappiamo tutti cos'è un hash (tag hash), quindi hashchange deve riferirsi a una modifica dell'hash! La cosa bella dell'hash è che puoi cambiarlo quanto vuoi e non fa caricare la pagina. Gli hash possono essere usati per molti scopi, quindi non entreremo nei motivi per cui qualcuno dovrebbe averlo. Prima che pushState esistesse, non era raro aggiornare l'hash con nuovi contenuti per AJAXy o siti a pagina singola.

Per configurare una nuova regola, seleziona lo stesso tipo di evento di pushState. L'unica differenza è che ora puoi considerare l'hash come criterio. Per esempio:

Conclusione

Adobe DTM è il miglior sistema di gestione dei tag in circolazione e, fortunatamente per voi clienti Adobe, è gratuito! Usa questi suggerimenti utili per aiutarti a sfruttare il suo potere e il suo potenziale e controlla spesso per saperne di più! Se stai cercando aiuto con l'analisi del tuo sito web, contattaci e ti invieremo una proposta gratuita su come possiamo aiutarti!