Installare Adobe Client Data Layer

L’installazione di Adobe Client Data Layer (ACDL) prevede due parti:

Creare l’array di livello dati initialize

Aggiungi la seguente riga prima di qualsiasi codice che viene inviato al livello dati:

window.adobeDataLayer = window.adobeDataLayer || [];

Questa riga crea l’array se non esiste e lo mantiene se esiste. Includilo in ogni script che viene inviato al livello dati, non solo nel primo. Gli script possono essere caricati in qualsiasi ordine e la riga assicura che ogni script esegua il push sullo stesso array senza sovrascriverlo.

Dopo questa riga, invia dati, eventi e funzioni con push():

window.adobeDataLayer = window.adobeDataLayer || [];
window.adobeDataLayer.push({ page: { title: "Home" } });

Fino al caricamento di ACDL, push() è il metodo di array standard di JavaScript e l’array funziona come una coda. Quando viene caricato, ACDL elabora gli elementi in coda in ordine. Vedi Coda e cronologia.

Scegliere un metodo di installazione methods

Carica ACDL su ogni pagina con uno dei seguenti metodi:

Estensione tag tags

L’estensione tag Adobe Client Data Layer carica ACDL al caricamento della libreria di tag, a meno che la pagina non sia già stata caricata. Non è necessario aggiungere la libreria ai modelli di pagina. Il codice del sito deve ancora creare l’array di livello dati e inviare i dati. Consulta Configurare l’estensione Adobe Client Data Layer.

Tag script script

Scarica la libreria da npm (vedi npm) e ospita adobe-client-data-layer.min.js sul tuo sito. Quindi caricarlo in <head> di ogni pagina con entrambi gli attributi async e defer:

<script src="/js/adobe-client-data-layer.min.js" async defer></script>

I browser che supportano async eseguono lo script non appena viene scaricato, senza bloccare la pagina. Poiché ACDL elabora tutto ciò che era in coda prima del caricamento, i dati sono sicuri anche se altri script vengono inviati prima al livello dati.

L’esempio seguente mostra una pagina in cui uno script in linea e uno script esterno eseguono entrambi il push al livello dati prima del caricamento di ACDL:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My page</title>
    <script src="/js/myscripts.js" defer></script>
    <script>
      window.adobeDataLayer = window.adobeDataLayer || [];
      window.adobeDataLayer.push({ page: { title: "My page" } });
    </script>
    <script src="/js/adobe-client-data-layer.min.js" async defer></script>
  </head>
  <body>
    <h1>My page</h1>
  </body>
</html>

Anche lo script esterno /js/myscripts.js crea l’array prima che venga eseguito il push:

window.adobeDataLayer = window.adobeDataLayer || [];
window.adobeDataLayer.push({ user: { loggedIn: false } });

Anche le reti CDN npm pubbliche, come unpkg e jsDelivr, distribuiscono il file di libreria. Se lo carichi da una rete CDN di terze parti, aggiungi una versione esatta nell’URL in modo che il file non cambi a tua insaputa.

npm npm

Installare il pacchetto:

npm install @adobe/adobe-client-data-layer

Il pacchetto contiene uno script del browser in dist/adobe-client-data-layer.min.js. Copiare il file nel sito e caricarlo con un tag script oppure importare il file nel JavaScript in bundle:

import "@adobe/adobe-client-data-layer/dist/adobe-client-data-layer.min.js";

Lo script non esporta nulla. Durante l’esecuzione, imposta window.adobeDataLayer.

Adobe Experience Manager aem

AEM Core Components 2.9.0 e versioni successive includono ACDL come libreria client e i dati push e gli eventi dei Componenti core per ciascun componente. Consulta Utilizzo di Adobe Client Data Layer con i Componenti core.

Se il tuo sito AEM utilizza anche l’estensione tag ACDL, disattiva l’opzione Carica la libreria di Adobe Client Data Layer se assente in modo che solo AEM carichi la libreria. Consulta Configurare l’estensione Adobe Client Data Layer.

Carica la libreria una sola volta load-once

Carica ACDL una volta per pagina. Se viene caricata una seconda copia, il seguente avviso viene registrato nella console del browser e non modifica il livello dati:

Adobe Client Data Layer v3.0.1 has already been imported/initialized on this page. You may be erroneously loading it a second time.

La prima copia continua a funzionare, in modo che i dati e i listener continuino a funzionare. Rimuovi il duplicato per evitare il download aggiuntivo. I duplicati sono comuni quando sia un modello di pagina che l’estensione tag caricano la libreria.

Verificare l’installazione verify

Apri la console per sviluppatori del browser in una pagina che carica ACDL ed esegue i seguenti comandi:

adobeDataLayer.version     // For example, "3.0.1"
adobeDataLayer.getState()  // The computed state of everything pushed so far

Se adobeDataLayer.version è undefined, ACDL non è stato caricato sulla pagina. Consulta Risoluzione dei problemi.

Aggiornamento da 2.x a 3.x upgrade

I componenti core Adobe Experience Manager caricano ACDL 2.x per impostazione predefinita, pertanto molti siti vengono ancora eseguiti in versione 2.x. Rivedi le seguenti modifiche prima di eseguire l’aggiornamento a 3.x. Per tutte le versioni, consulta le note sulla versione su GitHub.

ACDL 3.0 ha sostituito la propria libreria di utilità interna con funzioni browser integrate. Il file è molto più piccolo, ma i requisiti e alcuni comportamenti di unione sono cambiati:

Verifica l’implementazione dopo l’aggiornamento, in particolare il codice che invia gli array o modifica il tipo di un valore.