Panoramica di Adobe Client Data Layer
Adobe Client Data Layer (ACDL) è una piccola libreria JavaScript open-source che offre al sito Web un modo standard per esporre dati ed eventi a qualsiasi script della pagina. Il codice del sito invia dati ed eventi a un array JavaScript denominato adobeDataLayer. Le regole di tag, il Web SDK e altri script leggono tali dati e li ascoltano, indipendentemente da quando viene caricato lo script ACDL.
Questa guida documenta la libreria ACDL. Per utilizzare ACDL nell’interfaccia utente di Data Collection, consulta l’estensione tag Adobe Client Data Layer.
Perché utilizzare un livello dati why
Senza un livello di dati, i tag spesso eliminano i valori dalla pagina, ad esempio il testo nel DOM o i parametri nell’URL. Queste implementazioni si interrompono quando cambia la struttura della pagina e possono solo raccogliere ciò che viene visualizzato nella pagina. Un livello dati separa due responsabilità:
- Il codice del sito descrive ciò che accade sulla pagina, ad esempio il nome della pagina, il prodotto visualizzato da un visitatore o il modulo inviato.
- I tuoi tag e altri script decidono cosa fare con tali informazioni, ad esempio quali dati inviare ad Adobe e quando.
ACDL aggiunge le seguenti funzionalità a questo modello:
- Caricamento asincrono. Il codice del sito può inviare i dati prima del caricamento dello script ACDL. ACDL elabora tutto in ordine quando viene caricato, in modo da poterlo caricare con
asyncodefersenza perdere dati. - Eventi e listener. Gli script possono ascoltare eventi denominati o modifiche ai dati, inclusi eventi verificatisi prima dell’aggiunta del listener.
- Stato calcolato. ACDL unisce ogni push di dati in un singolo oggetto che qualsiasi script può leggere in qualsiasi momento.
- Cronologia. L’array mantiene un record dei dati e degli eventi inviati, che consentono di eseguire il debug dell’implementazione.
Come funziona how-it-works
ACDL è basato su un semplice array JavaScript:
- La pagina crea l’array
window.adobeDataLayerse non esiste già. - Il codice del sito aggiunge elementi all’array con
push(). Un elemento può essere un oggetto dati, un oggetto evento o una funzione. Prima del caricamento di ACDL, questi elementi attendono nell’array come una coda. - Quando lo script ACDL viene caricato, aggiunge metodi all’array, ad esempio
getState()eaddEventListener(), e sostituiscepush()con la propria versione. Elabora quindi ogni elemento in coda nell’ordine in cui è stato inviato. - Da quel momento in poi, ACDL elabora ogni nuovo elemento non appena viene inviato. Unisce i dati nello stato calcolato, chiama corrispondenti a listener di eventi e mantiene i dati e gli oggetti evento nell’array come cronologia.
// Site code: describe what happened on the page
window.adobeDataLayer = window.adobeDataLayer || [];
window.adobeDataLayer.push({
page: { title: "Home", language: "en" }
});
window.adobeDataLayer.push({ event: "page view" });
// Another script: react to what happened
window.adobeDataLayer.push(function(dl) {
dl.addEventListener("page view", function(event) {
console.log("Page title:", dl.getState("page.title"));
});
});
Poiché il listener utilizza l’ambito scope predefinito all, viene eseguito per l’evento page view anche se l’evento è stato inviato per primo.
ACDL memorizza e distribuisce i dati all’interno della pagina. Non invia dati da nessuna parte. Per inviare dati ad Adobe, utilizza i tag o il Web SDK per leggere dal livello dati. Consulta Inviare dati Adobe Client Data Layer con Web SDK.
Funzionamento di ACDL con altri strumenti di Adobe adobe-tools
Formato dei dati data-format
ACDL non richiede una struttura dati specifica. È possibile eseguire il push di qualsiasi oggetto normale e ACDL lo unisce allo stato calcolato. Poiché molti script e team dipendono dagli stessi dati, considera le seguenti procedure:
- Accetta una struttura prima di scrivere sul livello dati e documentala per tutti coloro che inviano dati o li leggono.
- Utilizzare valori compatibili con JSON, ad esempio stringhe, numeri, booleani, oggetti semplici e matrici. Altri valori, ad esempio
Dateoggetti e funzioni, non sopravvivono all’unione. Vedi Tipi di valore. - Considera la tua destinazione. Se invii i dati a Adobe Experience Platform, puoi strutturarli in modo da assomigliare allo schema XDM in modo da poterli mappare facilmente oppure mantenere la tua struttura e mapparla nello stream di dati con Preparazione dati per la raccolta dati.
Requisiti del browser browser-requirements
ACDL 3.x utilizza la funzione structuredClone() del browser e la sintassi JavaScript moderna. Richiede uno dei seguenti browser o versione successiva:
- Chrome 98
- Edge 98
- Firefox 94
- Safari 15.4
ACDL 2.x ha requisiti browser inferiori. Consulta Aggiornamento da 2.x a 3.x per informazioni sulle differenze tra le versioni.
Versioni e codice sorgente source
ACDL è open source in base alla Licenza Apache 2.0.
- Codice Source e problemi:
adobe/adobe-client-data-layersu GitHub - Pacchetto:
@adobe/adobe-client-data-layersu npm - Note sulla versione: Versioni GitHub
Per verificare quale versione è in esecuzione in una pagina, leggere la proprietà version nella console del browser:
adobeDataLayer.version