Integrare AEM Sites e Adobe Analytics

Accedi a Experienci Platform e creare una proprietà Tag (se non lo hai già fatto).

Assicurati che un tag iniziale JavaScript la libreria è stata creata e promosso al tag ambiente.

Copia il codice di incorporamento 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 Experienci Platform Debugger

Accedi a Tag Experience Platform > Configurazione e sotto Codici da incorporare inseriti sostituisci il codice di incorporamento esistente con tuo codice da incorporare copiato dal passaggio 3.

Abilita Registrazione console e Blocca il debugger nella scheda WKND.

Accedi a Sito WKND.

Apri gli strumenti di sviluppo del browser e passa a Console. Esegui il comando seguente:

adobeDataLayer.getState();

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

Espandi la risposta e controlla page voce. 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, consulta Schema pagina dagli schemi di dati dei Componenti core.

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

Accedi a Regole nell’interfaccia utente della proprietà Tag, quindi fai clic su Crea nuova regola.

Denomina la regola Pagina caricata.

In Eventi sottosezione, fai clic su Aggiungi per aprire Configurazione evento procedura guidata.

Per Tipo di evento campo, seleziona Codice personalizzato.

Clic Apri editor nel pannello principale e immetti il seguente frammento 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);
});

Lo snippet di codice sopra riportato aggiunge un listener di eventi di push di una funzione nel livello dati. Quando cmp:show viene attivato l'evento pageShownEventHandler viene chiamata la funzione. In questa funzione, vengono aggiunti alcuni controlli di integrità e una nuova event è costruito con il più recente stato del livello dati per il componente che ha attivato l’evento.

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

Salva le modifiche.

Successivo sotto Azioni click Aggiungi per aprire Configurazione azione procedura guidata.

Per Tipo di azione campo, scegli Codice personalizzato.

Clic Apri editor nel pannello principale e immetti il seguente frammento 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']);

Il event l'oggetto viene passato dal trigger() metodo chiamato nell'evento personalizzato. Ecco, il 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 in ambiente utilizzati nel 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 Experienci Platform e accedi alla proprietà tag integrata con il sito AEM.

Accedi a Elementi dati e fai clic su Creare un nuovo elemento dati.

Per Nome , immettere il Tipo risorsa componente.

Per Tipo di elemento dati campo, seleziona Codice personalizzato.

Clic 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.

Clic Aggiungi elemento dati pulsante

Per Nome campo, immetti Nome pagina.

Per Tipo di elemento dati campo, seleziona Codice personalizzato.

Clic 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 su Aggiungi elemento dati pulsante

Per Nome campo, immetti Modello pagina.

Per Tipo di elemento dati campo, seleziona Codice personalizzato.

Clic 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 Experienci Platform e accedi alla proprietà tag integrata con il sito AEM.

Vai a Estensioni > Catalogo

Individua il Adobe Analytics e fai clic su Installa

Sotto Gestione libreria > Suite di rapporti, immetti gli ID suite di rapporti che desideri utilizzare con ogni ambiente di tag.

Seleziona la casella per abilitare Usa Activity Map.

Sotto Generale > Server di tracciamento, immetti il server di tracciamento, ad esempio, tmd.sc.omtrdc.net. Immetti Server di tracciamento SSL se il sito supporta https://

Clic Salva per salvare le modifiche.

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

Sotto Condizioni click Aggiungi per aprire Configurazione condizione procedura guidata.

Per Tipo di condizione campo, seleziona Value Comparison opzione.

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

Imposta il secondo valore su wknd/components/page.

Salva le modifiche.

Nella regola Page Loaded: rimuovere il Core - Custom Code azione (istruzioni della console):

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

Imposta il Estensione digita in Adobe Analytics e imposta Tipo di azione a Imposta variabili

Nel pannello principale, seleziona una delle opzioni eVar e impostato come valore dell’elemento dati Modello pagina. Utilizzare l’icona Elementi dati per selezionare Modello pagina elemento.

Scorri verso il basso, sotto Impostazioni aggiuntive set Nome pagina all’elemento dati Nome pagina:

Salva le modifiche.

Quindi, aggiungi un’azione aggiuntiva a destra del Adobe Analytics - Imposta variabili toccando il più icona:

Imposta il Estensione digita in Adobe Analytics e imposta Tipo di azione a Invia beacon. Poiché questa azione è considerata una visualizzazione di pagina, lascia impostato il tracciamento predefinito su s.t().

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

• 1. Ascolta la cmp:show evento.
• 2. Verifica che l'evento sia stato attivato da una pagina.
• 3. Imposta variabili di Analytics per Nome pagina e Modello pagina
• 4. Inviare il beacon Vista pagina di Analytics

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

Apri Sito WKND nel browser.

Fai clic sull’icona Debugger per aprire Experienci Platform Debugger.

Assicurati che Debugger mappi la proprietà tag a tuo Ambiente di sviluppo, come descritto in precedenza e Registrazione console è selezionato.

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

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

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

Osserva nella console del browser l’istruzione della console:

Questo perché il carosello attiva una cmp:show evento ma a causa del nostro assegno Tipo risorsa componente, 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.