Coda e cronologia

L’array adobeDataLayer ha due ruoli. Prima del caricamento della libreria Adobe Client Data Layer (ACDL), si tratta di una coda di elementi in attesa di elaborazione. Dopo il caricamento della libreria, si tratta di una cronologia dei dati e degli eventi inviati.

Prima del caricamento di ACDL: una coda queue

Fino al caricamento della libreria, adobeDataLayer è un array JavaScript semplice e push() è il metodo array standard. Ogni push aggiunge l’elemento alla fine dell’array e non esegue altre operazioni. Per questo motivo, qualsiasi script può inviare dati, eventi e funzioni in qualsiasi momento, anche se la libreria non è ancora stata scaricata.

Quando la libreria viene caricata, effettua le seguenti operazioni:

L’oggetto adobeDataLayer globale rimane lo stesso array in tutto. Riferimenti agli script salvati in precedenza che continuano a funzionare.

Esegui il codice quando ACDL è pronto ready

Solo push() esiste sull’array, perché la libreria potrebbe non essere stata ancora caricata. Per chiamare altri metodi, ad esempio getState() o addEventListener(), eseguire il push di una funzione:

window.adobeDataLayer = window.adobeDataLayer || [];
window.adobeDataLayer.push(function(dl) {
  console.log(dl.getState());
  dl.addEventListener("click", handleClick);
});

Se ACDL è già stato caricato, chiama immediatamente la funzione. In caso contrario, la funzione attende nella coda ed viene eseguita quando la libreria viene caricata, dopo gli elementi inviati prima di essa. La funzione riceve il livello dati come argomento e come this.

Dopo il caricamento di ACDL: una cronologia history

Dopo il caricamento della libreria, l’array mantiene un record di ciò che è stato inviato. ACDL aggiunge alcuni tipi di elementi all’array e ne rimuove altri:

La cronologia contiene gli oggetti che hai inviato, non le relative copie. Se si modifica un oggetto dopo averlo inviato, la cronologia mostra la modifica, ma non lo è il stato calcolato.

È possibile esaminare la cronologia nella console per sviluppatori del browser digitando adobeDataLayer ed espandendo l’array. Il numero di elementi nella cronologia è adobeDataLayer.length.

Ordine degli elementi inviati dai listener nested-order

Quando un listener di eventi invia un elemento, ACDL lo elabora prima che termini l’elaborazione dell’elemento che ha attivato il listener. Di conseguenza, l’elemento inviato dal listener viene visualizzato nella cronologia prima dell’elemento che lo ha attivato.

Utilizzo della cronologia da parte dei listener replay

Quando si aggiunge un listener con past o all ambito, ACDL lo chiama immediatamente per ogni elemento corrispondente nella cronologia, nell’ordine. Questa ripetizione consente agli script che vengono caricati in ritardo, ad esempio una libreria di tag, di reagire agli eventi che si sono verificati prima del caricamento.

La ripetizione utilizza gli elementi presenti nell’array quando viene aggiunto il listener. Se la cronologia è stata cancellata, gli elementi cancellati non vengono riprodotti.

Non modificare direttamente l’array modify

Aggiungi elementi al livello dati solo con push(). Non utilizzare altri metodi di array JavaScript che modificano l’array, ad esempio pop(), shift(), unshift(), splice(), sort(), reverse(), fill() o copyWithin(). Questi metodi ignorano l’ACDL, pertanto lo stato calcolato e i listener non riflettono la modifica e le riproduzioni per i nuovi listener diventano incoerenti.

È possibile leggere l’array con metodi che non lo modificano, ad esempio filter() o find().

Cancella la cronologia clear

Ogni push gestito da ACDL aggiunge un elemento all’array. Sulle pagine che rimangono aperte per molto tempo, come le applicazioni a pagina singola, la cronologia continua a crescere. È possibile cancellarlo in un’interruzione naturale, ad esempio dopo ogni visualizzazione di pagina virtuale.

La cancellazione della cronologia non modifica lo stato calcolato né rimuove i listener. Influisce solo sugli elementi ripetuti per i listener aggiunti successivamente con l’ambito past o all.