Documentazione AEM Tutorial su AEM Tutorial su AEM Sites

[Integrazione]{class="badge positive"}

Integrare AEM Sites e Experience Platform Web SDK

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Argomenti:

Creato per:

Principiante
Intermedio
Amministratore
Sviluppatore

[AEM Sites as a Cloud Service]{class="badge informative"}

Scopri come integrare AEM as a Cloud Service con Experience Platform Web SDK. Questo passaggio fondamentale è essenziale per l’integrazione di prodotti Adobe Experience Cloud, come Adobe Analytics, Target o prodotti innovativi recenti come Real-time Customer Data Platform, Customer Journey Analytics e Journey Optimizer.

Scopri anche come raccogliere e inviare WKND - dati di esempio del progetto Adobe Experience Manager pageview nel Experience Platform.

Dopo aver completato questa configurazione, hai implementato una solida base. Inoltre, sei pronto per far avanzare l'implementazione di Experience Platform utilizzando applicazioni come Real-time Customer Data Platform (Real-Time CDP), Customer Journey Analytics (CJA) e Adobe Journey Optimizer (AJO). L’implementazione avanzata contribuisce a migliorare il coinvolgimento dei clienti standardizzando il web e i dati dei clienti.

Prerequisiti

Durante l’integrazione di Experience Platform Web SDK sono necessari i seguenti elementi.

In AEM come Cloud Service:

Accesso dell’amministratore AEM all’ambiente AEM as a Cloud Service
Accesso di Responsabile dell’implementazione a Cloud Manager
Clona e distribuisci WKND - progetto Adobe Experience Manager di esempio nell'ambiente AEM as a Cloud Service.

In Experience Platform:

Accesso alla sandbox di produzione predefinita Prod.
Accesso a Schemi in Gestione dati
Accesso a Set di dati in Gestione dati
Accesso a Datastreams in Raccolta dati
Accesso a Tag in Raccolta dati

Se non disponi delle autorizzazioni necessarie, l'amministratore di sistema che utilizza Adobe Admin Console può concedere le autorizzazioni necessarie.

https://video.tv.adobe.com/v/3418856?quality=12&learn=on

Crea schema XDM - Experience Platform

Lo schema Experience Data Model (XDM) consente di standardizzare i dati sull’esperienza del cliente. Per raccogliere i dati WKND pageview, creare uno schema XDM e utilizzare i gruppi di campi AEP Web SDK ExperienceEvent forniti dall'Adobe per la raccolta dei dati Web.

Sono disponibili modelli generici e specifici per settori, ad esempio vendita al dettaglio, servizi finanziari, sanità e altro ancora, suite di modelli di dati di riferimento. Per ulteriori informazioni, consulta Panoramica sui modelli di dati di settore.

https://video.tv.adobe.com/v/3431090?quality=12&learn=on&captions=ita

Scopri lo schema XDM e i concetti correlati, come gruppi di campi, tipi, classi e tipi di dati, dalla panoramica del sistema XDM.

Panoramica del sistema XDM è un'ottima risorsa per conoscere lo schema XDM e i concetti correlati, come gruppi di campi, tipi, classi e tipi di dati. Fornisce informazioni complete sul modello dati XDM e su come creare e gestire schemi XDM per standardizzare i dati in tutta l’azienda. Esploralo per comprendere più a fondo lo schema XDM e i vantaggi che può apportare ai processi di raccolta e gestione dei dati.

Crea stream di dati - Experience Platform

Un flusso di dati indica all’Edge Network di Platform dove inviare i dati raccolti. Può essere inviato ad Experience Platform, Analytics o Adobe Target.

https://video.tv.adobe.com/v/3418895?quality=12&learn=on

Acquisisci familiarità con il concetto di flussi di dati e gli argomenti correlati, come la governance e la configurazione dei dati, visitando la pagina Panoramica sui flussi di dati.

Crea proprietà tag - Experience Platform

Scopri come creare una proprietà tag in Experience Platform per aggiungere la libreria JavaScript dell’SDK web al sito web WKND. La proprietà tag appena definita dispone delle seguenti risorse:

Estensioni tag: Core e Adobe Experience Platform Web SDK
Elementi dati: gli elementi dati del tipo di codice personalizzato che estraggono nome-pagina, sezione-sito e nome-host utilizzando l’Adobe del livello dati client del sito WKND. Inoltre, l'elemento dati del tipo di oggetto XDM conforme alla nuova generazione dello schema XDM WKND descritta nel passaggio precedente di creazione dello schema XDM.
Regola: invia dati all'Edge Network di Platform ogni volta che viene visitata una pagina Web WKND utilizzando l'evento cmp:show attivato dal livello dati client di Adobe.

Durante la creazione e la pubblicazione della libreria di tag utilizzando Flusso di pubblicazione, puoi utilizzare il pulsante Aggiungi tutte le risorse modificate. Per selezionare tutte le risorse come Elemento dati, Regola ed Estensioni tag invece di identificare e selezionare una singola risorsa. Inoltre, durante la fase di sviluppo, puoi pubblicare la libreria solo nell'ambiente Sviluppo, quindi verificarla e promuoverla nell'ambiente Stage o Produzione.

https://video.tv.adobe.com/v/3418896?quality=12&learn=on

TIP

L'elemento dati e il codice di evento regola mostrati nel video sono disponibili come riferimento, espandi il seguente elemento pannello a soffietto. Tuttavia, se NON utilizzi Adobe Client Data Layer, devi modificare il codice seguente, ma il concetto di definizione degli elementi dati e di utilizzo degli stessi nella definizione della regola è ancora applicabile.

Codice elemento dati e regola-evento

Codice elemento dati Page Name.

code language-javascript

code language-javascript
if(event && event.component && event.component.hasOwnProperty('dc:title')) { // return value of 'dc:title' from the data layer Page object, which is propogated via 'cmp:show` event return event.component['dc:title']; }

if(event && event.component && event.component.hasOwnProperty('dc:title')) {
    // return value of 'dc:title' from the data layer Page object, which is propogated via 'cmp:show` event
    return event.component['dc:title'];
}

Codice elemento dati Site Section.

code language-javascript

code language-javascript
if(event && event.component && event.component.hasOwnProperty('repo:path')) { let pagePath = event.component['repo:path']; let siteSection = ''; //Check of html String in URL. if (pagePath.indexOf('.html') > -1) { siteSection = pagePath.substring(0, pagePath.lastIndexOf('.html')); //replace slash with colon siteSection = siteSection.replaceAll('/', ':'); //remove `:content` siteSection = siteSection.replaceAll(':content:',''); } return siteSection }

if(event && event.component && event.component.hasOwnProperty('repo:path')) {
let pagePath = event.component['repo:path'];

let siteSection = '';

//Check of html String in URL.
if (pagePath.indexOf('.html') > -1) {
 siteSection = pagePath.substring(0, pagePath.lastIndexOf('.html'));

 //replace slash with colon
 siteSection = siteSection.replaceAll('/', ':');

 //remove `:content`
 siteSection = siteSection.replaceAll(':content:','');
}

    return siteSection
}

Codice elemento dati Host Name.

code language-javascript
`if(window && window.location && window.location.hostname) { return window.location.hostname; }`

Codice evento regola all pages - on load

code language-javascript

code language-javascript
var pageShownEventHandler = function(evt) { // defensive coding to avoid a null pointer exception if(evt.hasOwnProperty("eventInfo") && evt.eventInfo.hasOwnProperty("path")) { // trigger tags Rule and pass event console.debug("cmp:show event: " + evt.eventInfo.path); var event = { // include the path of the component that triggered the event path: evt.eventInfo.path, // get the state of the component that triggered the event component: window.adobeDataLayer.getState(evt.eventInfo.path) }; // Trigger the tags Rule, passing in the new 'event' object // the 'event' obj can now be referenced by the reserved name 'event' by other tags data elements // i.e 'event.component['someKey']' trigger(event); } } // set the namespace to avoid a potential race condition window.adobeDataLayer = window.adobeDataLayer \|\| []; // push the event listener for cmp:show into the data layer window.adobeDataLayer.push(function (dl) { //add event listener for 'cmp:show' and callback to the 'pageShownEventHandler' function dl.addEventListener("cmp:show", pageShownEventHandler); });

var pageShownEventHandler = function(evt) {
// defensive coding to avoid a null pointer exception
if(evt.hasOwnProperty("eventInfo") && evt.eventInfo.hasOwnProperty("path")) {
    // trigger tags Rule and pass event
    console.debug("cmp:show event: " + evt.eventInfo.path);
    var event = {
        // include the path of the component that triggered the event
        path: evt.eventInfo.path,
        // get the state of the component that triggered the event
        component: window.adobeDataLayer.getState(evt.eventInfo.path)
    };

    // Trigger the tags Rule, passing in the new 'event' object
    // the 'event' obj can now be referenced by the reserved name 'event' by other tags data elements
    // i.e 'event.component['someKey']'
    trigger(event);
    }
}

// set the namespace to avoid a potential race condition
window.adobeDataLayer = window.adobeDataLayer || [];

// push the event listener for cmp:show into the data layer
window.adobeDataLayer.push(function (dl) {
    //add event listener for 'cmp:show' and callback to the 'pageShownEventHandler' function
    dl.addEventListener("cmp:show", pageShownEventHandler);
});

La Panoramica sui tag fornisce informazioni approfondite su concetti importanti come elementi dati, regole ed estensioni.

Per ulteriori informazioni sull'integrazione dei componenti core AEM con Adobe Client Data Layer, fare riferimento alla guida Utilizzo di Adobe Client Data Layer con i componenti core AEM.

Connettere la proprietà Tag a AEM

Scopri come collegare all’AEM la proprietà tag creata di recente tramite Adobe IMS e i tag nella configurazione di Adobe Experience Platform nell’AEM. Quando viene stabilito un ambiente AEM as a Cloud Service, vengono generate automaticamente diverse configurazioni dell’account tecnico Adobe IMS, inclusi i tag. Tuttavia, per la versione AEM 6.5, è necessario configurarne manualmente una.

Dopo aver collegato la proprietà tag, il sito WKND è in grado di caricare la libreria JavaScript della proprietà tag nelle pagine web utilizzando i tag nella configurazione del servizio cloud Adobe Experience Platform.

Verifica del caricamento della proprietà tag in WKND

Utilizzando l'estensione Adobe Experience Platform Debugger Chrome, verifica se la proprietà tag è in fase di caricamento sulle pagine WKND. Puoi verificare:

Dettagli della proprietà tag come estensione, versione, nome e altro ancora.
Versione della libreria dell’SDK web di Platform, ID dello stream di dati
Oggetto XDM come parte dell’attributo events in Experience Platform Web SDK

https://video.tv.adobe.com/v/3418897?quality=12&learn=on

Crea set di dati - Experience Platform

I dati di pageview raccolti tramite Web SDK vengono memorizzati nel data lake di Experience Platform come set di dati. Il set di dati è un costrutto di archiviazione e gestione per una raccolta di dati come una tabella di database che segue uno schema. Scopri come creare un set di dati e configurare lo stream di dati creato in precedenza per inviare dati all’Experience Platform.

https://video.tv.adobe.com/v/3418898?quality=12&learn=on

La Panoramica sui set di dati fornisce ulteriori informazioni su concetti, configurazioni e altre funzionalità di acquisizione.

Dati WKND pageview in Experience Platform

Dopo la configurazione dell’SDK per web con AEM, in particolare sul sito WKND, è ora di generare il traffico navigando tra le pagine del sito. Quindi verifica che i dati di pageview vengano acquisiti nel set di dati Experience Platform. Nell’interfaccia utente del set di dati, vengono visualizzati vari dettagli quali record totali, dimensioni e batch acquisiti, insieme a un grafico a barre visivamente accattivante.

https://video.tv.adobe.com/v/3418899?quality=12&learn=on

Riepilogo

Ottimo lavoro! Hai completato la configurazione dell’AEM con Experience Platform Web SDK per raccogliere e acquisire dati da un sito web. Con questa base, ora puoi esplorare ulteriori possibilità per migliorare e integrare prodotti come Analytics, Target, Customer Journey Analytics (CJA) e molti altri per creare esperienze ricche e personalizzate per i tuoi clienti. Continua ad apprendere ed esplorare per sfruttare appieno il potenziale di Adobe Experience Cloud.

https://video.tv.adobe.com/v/3418900?quality=12&learn=on

AVAILABILITY

Se preferisci il video end-to-end che copre l'intero processo di integrazione invece dei singoli video delle fasi di configurazione, puoi fare clic qui per accedervi.

Risorse aggiuntive

recommendation-more-help

bb44cebf-d964-4e3c-b64e-ce882243fe4d