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 async o defer senza 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:

  1. La pagina crea l’array window.adobeDataLayer se non esiste già.
  2. 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.
  3. Quando lo script ACDL viene caricato, aggiunge metodi all’array, ad esempio getState() e addEventListener(), e sostituisce push() con la propria versione. Elabora quindi ogni elemento in coda nell’ordine in cui è stato inviato.
  4. 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

Strumento
Relazione con ACDL
Tag
L’estensione tag ACDL può caricare la libreria, attivare regole quando vengono inviati dati o eventi, leggere lo stato calcolato negli elementi dati e inviare dati push o cancellare la cronologia nelle azioni regola.
Web SDK
Il Web SDK invia i dati ad Edge Network. Il codice o le regole di tag leggono i dati da ACDL e li trasmettono al Web SDK. Consulta Inviare dati Adobe Client Data Layer con Web SDK.
Adobe Experience Manager
I Componenti core 2.9.0 e versioni successive includono ACDL e possono inviare automaticamente i dati e gli eventi dei componenti. Consulta Utilizzo di Adobe Client Data Layer con i Componenti core.

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 Date oggetti 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.

Per verificare quale versione è in esecuzione in una pagina, leggere la proprietà version nella console del browser:

adobeDataLayer.version

Passaggi successivi next-steps

recommendation-more-help
experience-platform-help-collection