Integrare AEM Sites e Adobe Analytics

Accedi a Experience Platform e crea una proprietà tag (se non lo hai già fatto).

Assicurati che sia stata creata una libreria di JavaScript con tag iniziale e promossa al tag environment.

Copia il codice di incorporamento di JavaScript dall’ambiente di tag in cui è stata pubblicata la libreria.

Nel browser, apri una nuova scheda e passa a Sito WKND

Apri l’estensione del browser Experience Platform Debugger

Passa a Tag di Experience Platform > Configurazione e in Codici di incorporamento inseriti sostituisci il codice di incorporamento esistente con il codice di incorporamento copiato dal passaggio 3.

Abilita Registrazione console e Blocca il debugger nella scheda WKND.

Passa a Sito WKND.

Apri gli strumenti per sviluppatori del browser e passa alla console. Esegui il comando seguente:

adobeDataLayer.getState();

Il codice riportato sopra restituisce lo stato corrente di Adobe Client Data Layer.

Espandere la risposta ed esaminare la voce page. Dovresti visualizzare uno schema di dati come il seguente:

page-2eee4f8914:
    @type: "wknd/components/page"
    dc:description: WKND is a collective of outdoors, music, crafts, adventure sports, and travel enthusiasts that want to share our experiences, connections, and expertise with the world.
    dc:title: "WKND Adventures and Travel"
    repo:modifyDate: "2020-08-31T21:02:21Z"
    repo:path: "/content/wknd/us/en.html"
    xdm:language: "en-US"
    xdm:tags: ["Attract"]
    xdm:template: "/conf/wknd/settings/wcm/templates/landing-page-template"

Per inviare i dati di pagina ad Adobe Analytics, utilizziamo le proprietà standard come dc:title, xdm:language e xdm:template del livello dati.

Per ulteriori informazioni, controlla lo Schema pagina dagli schemi dati dei Componenti core.

Passa a Experience Platform e accedi alla proprietà tag integrata con il sito AEM.

Passare alla sezione Rules nell'interfaccia utente di Tag Property, quindi fare clic su Create New Rule.

Denomina la regola Pagina caricata.

Nella sottosezione Events, fai clic su Aggiungi per aprire la procedura guidata Configurazione evento.

Per il campo Tipo evento, selezionare Codice personalizzato.

Fai clic su Apri editor nel pannello principale e immetti il seguente snippet di codice:

var pageShownEventHandler = function(evt) {
   // defensive coding to avoid a null pointer exception
   if(evt.hasOwnProperty("eventInfo") && evt.eventInfo.hasOwnProperty("path")) {
      //trigger the Tag Rule and pass event
      console.log("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 Tag Rule, passing in the new `event` object
      // the `event` obj can now be referenced by the reserved name `event` by other Tag 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);
});

Il frammento di codice sopra riportato aggiunge un listener di eventi inviando una funzione nel livello dati. Quando viene attivato l'evento cmp:show, viene chiamata la funzione pageShownEventHandler. In questa funzione vengono aggiunti alcuni controlli di integrità e viene costruito un nuovo event con l'ultimo stato del livello dati per il componente che ha attivato l'evento.

Infine, viene chiamata la funzione trigger(event). La funzione trigger() è un nome riservato nella proprietà tag e attiva la regola. L'oggetto event viene passato come parametro che a sua volta è esposto da un altro nome riservato nella proprietà tag. Gli elementi dati nella proprietà tag ora possono fare riferimento a varie proprietà utilizzando lo snippet di codice come event.component['someKey'].

Salva le modifiche.

Avanti in Azioni fare clic su Aggiungi per aprire la Configurazione azione guidata.

Per il campo Tipo azione, scegli Codice personalizzato.

Fai clic su Apri editor nel pannello principale e immetti il seguente snippet di codice:

console.log("Page Loaded ");
console.log("Page name: " + event.component['dc:title']);
console.log("Page type: " + event.component['@type']);
console.log("Page template: " + event.component['xdm:template']);

L'oggetto event è passato dal metodo trigger() chiamato nell'evento personalizzato. component è la pagina corrente derivata dal livello dati getState nell'evento personalizzato.

Salva le modifiche ed esegui una build nella proprietà tag per promuovere il codice nell'ambiente utilizzato nel tuo sito AEM.

Vai al tuo sito AEM e apri gli strumenti per sviluppatori per visualizzare la console. Aggiorna la pagina per verificare che i messaggi della console siano stati registrati:

Passa a Experience Platform e accedi alla proprietà tag integrata con il sito AEM.

Passare alla sezione Elementi dati e fare clic su Crea nuovo elemento dati.

Per il campo Nome, immettere il Tipo risorsa componente.

Per il campo Tipo elemento dati, selezionare Codice personalizzato.

Fai clic sul pulsante Apri editor e immetti quanto segue nell'editor di codice personalizzato:

if(event && event.component && event.component.hasOwnProperty('@type')) {
    return event.component['@type'];
}

Salva le modifiche.

Fai clic sul pulsante Aggiungi elemento dati

Per il campo Nome, immetti Nome pagina.

Per il campo Tipo elemento dati, selezionare Codice personalizzato.

Fai clic sul pulsante Apri editor e immetti quanto segue nell'editor di codice personalizzato:

if(event && event.component && event.component.hasOwnProperty('dc:title')) {
    return event.component['dc:title'];
}

Salva le modifiche.

Fai clic sul pulsante Aggiungi elemento dati

Per il campo Nome, immetti Modello pagina.

Per il campo Tipo elemento dati, selezionare Codice personalizzato.

Fai clic sul pulsante Apri editor e immetti quanto segue nell'editor di codice personalizzato:

if(event && event.component && event.component.hasOwnProperty('xdm:template')) {
    return event.component['xdm:template'];
}

Salva le modifiche.

Ora dovrebbero essere presenti tre elementi dati come parte della regola:

Passa a Experience Platform e accedi alla proprietà tag integrata con il sito AEM.

Vai a Estensioni > Catalogo

Individua l'estensione Adobe Analytics e fai clic su Installa

In Gestione libreria > Suite per report, immetti gli ID suite per report che desideri utilizzare con ogni ambiente di tag.

Seleziona la casella per abilitare Usa Activity Map.

In Generale > Server di monitoraggio, immetti il server di monitoraggio, ad esempio tmd.sc.omtrdc.net. Immetti SSL Tracking Server se il tuo sito supporta https://

Fai clic su Salva per salvare le modifiche.

Nell'interfaccia utente della proprietà Tag, passa alla regola Pagina caricata creata in precedenza.

In Condizioni fare clic su Aggiungi per aprire la procedura guidata Configurazione condizione.

Per il campo Tipo condizione, selezionare l'opzione Confronto valori.

Impostare il primo valore nel campo modulo su %Component Resource Type%. È possibile utilizzare l'icona dell'elemento dati per selezionare l'elemento dati Tipo risorsa componente. Lascia il comparatore impostato su Equals.

Impostare il secondo valore su wknd/components/page.

Salva le modifiche.

Nella regola Page Loaded, rimuovi l'azione Core - Custom Code (istruzioni della console):

In sottosezione Azioni, fai clic su Aggiungi per aggiungere una nuova azione.

Imposta il tipo Extension su Adobe Analytics e imposta il tipo Action su Set Variables

Nel pannello principale, seleziona un eVar disponibile e imposta come valore dell'elemento dati Modello pagina. Utilizza l'icona Elementi dati per selezionare l'elemento Modello pagina.

Scorri verso il basso, in Impostazioni aggiuntive imposta Nome pagina sull'elemento dati Nome pagina:

Salva le modifiche.

Quindi, aggiungi un'azione aggiuntiva a destra di Adobe Analytics - Imposta variabili toccando l'icona più:

Imposta il tipo Extension su Adobe Analytics e imposta il tipo Action su Send Beacon. Poiché questa azione è considerata una visualizzazione di pagina, lasciare impostato il tracciamento predefinito su s.t().

Salva le modifiche. La regola Pagina caricata deve ora avere la seguente configurazione:

• 1. Ascolta l'evento cmp:show.
• 2. Verificare che l'evento sia stato attivato da una pagina.
• 3. Imposta le variabili di Analytics per Nome pagina e Modello pagina
• 4. Invia il beacon di visualizzazione della pagina di Analytics

Salva tutte le modifiche e crea la libreria tag, passando all’ambiente appropriato.

Apri il sito WKND nel browser.

Fai clic sull'icona Debugger per aprire Experience Platform Debugger.

Accertati che Debugger mappi la proprietà tag nell'ambiente di sviluppo your, come descritto in precedenza, e che sia selezionato Registrazione console.

Apri il menu Analytics e verifica che la suite di rapporti sia impostata su la tua suite di rapporti. Compilare anche il Nome pagina:

Scorri verso il basso ed espandi Richieste di rete. Dovresti essere in grado di trovare il set evar per il modello pagina:

Torna al browser e apri la console per sviluppatori. Fai clic sul carosello nella parte superiore della pagina.

Osserva nella console del browser l’istruzione della console:

Il carosello non attiva un evento cmp:show ma a causa del controllo del tipo di risorsa Component, non viene attivato alcun evento.

Passa a una pagina di articolo come Australia occidentale. Osserva che il Nome pagina e il Tipo di modello cambiano.