Raccogliere dati di pagina con Adobe Analytics

Scopri come utilizzare le funzioni integrate di Adobe Client Data Layer con i componenti core di AEM per raccogliere i dati su una pagina in Adobe Experience Manager Sites. Experience Platform Launch e l’estensione Adobe Analytics verranno utilizzati per creare regole per inviare dati di pagina ad Adobe Analytics.

Cosa verrà creato

Tracciamento dei dati delle pagine

In questa esercitazione verrà attivata una regola Launch basata su un evento da Adobe Client Data Layer, verranno aggiunte le condizioni per l’attivazione della regola e verranno inviati Nome pagina e Modello di pagina di una pagina AEM ad Adobe Analytics.

Obiettivi

  1. Creare una regola basata su eventi in Launch in base alle modifiche al livello dati
  2. Mappatura delle proprietà del livello dati della pagina su elementi dati in Launch
  3. Raccogliere dati di pagina e inviarli ad Adobe Analytics con il beacon di visualizzazione della pagina

Prerequisiti

Sono necessari i seguenti requisiti:

NOTA

Ti serve aiuto per integrare Launch e il tuo sito AEM? Guarda questa serie video.

Cambiare ambienti Launch per il sito WKND

https://wknd. siteè un sito rivolto al pubblico basato su un progetto open source progettato come riferimento e 🔗 tutorial per le implementazioni AEM.

Invece di configurare un ambiente AEM e installare la base di codice WKND, puoi utilizzare il debugger di Experience Platform per passare dalla Live https://wknd.site/ a la proprietà Launch. Naturalmente puoi utilizzare il tuo sito AEM se il Livello dati client Adobe è già abilitato

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

  2. Assicurati che una libreria Launch iniziale sia stata creata e promossa a un ambiente Launch 🔗.

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

    Copia codice di incorporamento Launch

  4. Nel browser apri una nuova scheda e passa a https://wknd.site/

  5. Apri l’estensione del browser Experience Platform Debugger.

    Experience Platform Debugger

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

    Sostituisci codice di incorporamento

  7. Abilita Console Logging e Blocca il debugger nella scheda WKND.

    Registrazione console

Verifica di Adobe Client Data Layer sul sito WKND

Il progetto di riferimento WKND è generato con i componenti core di AEM e per impostazione predefinita è abilitato Adobe Client Data Layer. Successivamente, verifica che Adobe Client Data Layer sia abilitato.

  1. Passa a https://wknd.site.

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

    adobeDataLayer.getState();
    

    Restituisce lo stato corrente di Adobe Client Data Layer.

    Stato di Adobe Data Layer

  3. Espandi la risposta ed esamina la voce page. Dovresti visualizzare uno schema di dati simile al 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"
    

    Useremo le proprietà standard derivate dallo schema pagina, dc:title, xdm:language e xdm:template del livello dati per inviare i dati di pagina ad Adobe Analytics.

    NOTA

    L'oggetto javascript adobeDataLayer non viene visualizzato? Assicurati che Adobe Client Data Layer sia stato abilitato sul tuo sito.

Creare una regola di caricamento pagina

Adobe Client Data Layer è un livello di dati basato su eventi. Quando viene caricato il livello dati AEM Page, viene attivato un evento cmp:show. Crea una regola che verrà attivata in base all'evento cmp:show .

  1. Passa a Experience Platform Launch e alla proprietà Web integrata con il sito AEM.

  2. Passa alla sezione Regole nell’interfaccia utente di Launch, quindi fai clic su Crea nuova regola.

    Crea regola

  3. Denomina la regola Pagina caricata.

  4. Fai clic su Eventi Aggiungi per aprire la procedura guidata Configurazione evento.

  5. In Tipo evento selezionare Codice personalizzato.

    Denomina la regola e aggiungi l'evento codice personalizzato

  6. Fai clic su 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 Launch 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 Launch Rule, passing in the new `event` object
          // the `event` obj can now be referenced by the reserved name `event` by other Launch 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 riportato sopra aggiunge un listener di eventi premendo una funzione nel livello dati. Quando l'evento cmp:show viene attivato, viene chiamata la funzione pageShownEventHandler . In questa funzione vengono aggiunti alcuni controlli di integrità e viene costruito un nuovo event con lo stato più recente del livello dati per il componente che ha attivato l'evento.

    Dopo la chiamata di trigger(event) . trigger() è un nome riservato in Launch e “attiverà” la regola Launch. Trasmettiamo l’oggetto event come parametro che a sua volta sarà esposto da un altro nome riservato in Launch denominato event. Gli elementi dati in Launch possono ora fare riferimento a varie proprietà come questa: event.component['someKey'].

  7. Salva le modifiche.

  8. Successivamente, in Azioni fare clic su Aggiungi per aprire la procedura guidata Configurazione azione.

  9. In Tipo azione scegli Codice personalizzato.

    Tipo di azione Codice personalizzato

  10. Fai clic su Apri editor nel pannello principale e immetti il seguente frammento di codice:

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

    L'oggetto event viene passato dal metodo trigger() chiamato nell'evento personalizzato. component è la pagina corrente derivata dal livello dati getState nell’evento personalizzato. Richiama da prima lo schema di pagina esposto dal livello di dati per vedere le varie chiavi esposte fuori dalla scatola.

  11. Salva le modifiche ed esegui una build in Launch per promuovere il codice nell’ ambiente utilizzato sul tuo sito AEM.

    NOTA

    Può essere molto utile utilizzare il debugger di Adobe Experience Platform per passare il codice da incorporare a un ambiente Sviluppo .

  12. Accedi al tuo sito AEM e apri gli strumenti per sviluppatori per visualizzare la console. Aggiorna la pagina per visualizzare che i messaggi della console sono stati registrati:

    Messaggi console caricati pagina

Creare elementi dati

Crea quindi diversi elementi dati per acquisire valori diversi da Adobe Client Data Layer. Come visto nell’esercizio precedente, è possibile accedere direttamente alle proprietà del livello dati tramite codice personalizzato. Il vantaggio dell’utilizzo degli elementi dati è che possono essere riutilizzati nelle regole di Launch.

Richiama da prima lo schema pagina esposto dal livello dati:

Gli elementi dati saranno mappati sulle proprietà @type, dc:title e xdm:template .

Tipo di risorsa componente

  1. Passa a Experience Platform Launch e alla proprietà Web integrata con il sito AEM.

  2. Passa alla sezione Elementi dati e fai clic su Crea nuovo elemento dati.

  3. Per Nome immetti Tipo di risorsa componente.

  4. Per Tipo di elemento dati seleziona Codice personalizzato.

    Tipo di risorsa componente

  5. Fai clic su 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.

    NOTA

    Ricorda che l'oggetto event è reso disponibile e rientrato in base all'evento che ha attivato la Regola in Launch. Il valore di un elemento dati non viene impostato finché l'elemento dati non viene referenziato all'interno di una regola. Pertanto è sicuro utilizzare questo elemento dati all'interno di una regola come la regola Page Loaded creata nel passaggio precedente ma non sarebbe sicuro da utilizzare in altri contesti.

Nome pagina

  1. Fai clic su Aggiungi elemento dati.

  2. Per Nome immetti Nome pagina.

  3. Per Tipo di elemento dati seleziona Codice personalizzato.

  4. Fai clic su 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.

Modello pagina

  1. Fai clic su Aggiungi elemento dati.

  2. Per Nome immetti Modello pagina.

  3. Per Tipo di elemento dati seleziona Codice personalizzato.

  4. Fai clic su 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.

  5. Ora devi disporre di tre elementi dati come parte della regola:

    Elementi dati nella regola

Aggiungere l’estensione Analytics

Quindi aggiungi l’estensione Analytics alla proprietà Launch. Dobbiamo inviare questi dati da qualche parte!

  1. Passa a Experience Platform Launch e alla proprietà Web integrata con il sito AEM.

  2. Vai a Estensioni > Catalogo

  3. Individua l'estensione Adobe Analytics e fai clic su Installa

    Estensione Adobe Analytics

  4. In Gestione libreria > Suite di rapporti, immetti gli ID suite di rapporti che desideri utilizzare con ogni ambiente Launch.

    Immetti gli ID suite di rapporti

    NOTA

    In questa esercitazione puoi utilizzare una suite di rapporti per tutti gli ambienti, ma in tempo reale puoi utilizzare suite di rapporti separate, come illustrato nell’immagine seguente

    SUGGERIMENTO

    È consigliabile utilizzare l'opzione Gestisci la libreria per me come impostazione di Gestione libreria in quanto consente di mantenere la libreria AppMeasurement.js aggiornata molto più facilmente.

  5. Seleziona la casella per abilitare Usa Activity Map.

    Attiva Activity Map

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

    Immettere i server di tracciamento

  7. Fai clic su Salva per salvare le modifiche.

Aggiungi una condizione alla regola Page Loaded

Quindi, aggiorna la regola Page Loaded per utilizzare l'elemento dati Component Resource Type per garantire che la regola si attivi solo quando l'evento cmp:show è per la pagina Page. Altri componenti possono attivare l’evento cmp:show , ad esempio il componente Carosello si attiva quando le diapositive cambiano. Pertanto è importante aggiungere una condizione per questa regola.

  1. Nell’interfaccia utente di Launch, passa alla regola Page Loaded creata in precedenza.

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

  3. Per Tipo condizione selezionare Confronto valori.

  4. Imposta il primo valore nel campo modulo su %Component Resource Type%. Puoi utilizzare l'icona Elemento dati icona elemento dati per selezionare l'elemento dati Tipo risorsa componente. Lasciare il comparatore impostato su Equals.

  5. Imposta il secondo valore su wknd/components/page.

    Configurazione delle condizioni per la regola di caricamento pagina

    NOTA

    È possibile aggiungere questa condizione all'interno della funzione del codice personalizzato che ascolta l'evento cmp:show creato in precedenza nell'esercitazione. Tuttavia, l’aggiunta di questa funzionalità all’interno dell’interfaccia utente offre maggiore visibilità agli utenti aggiuntivi che potrebbero dover apportare modifiche alla regola. Inoltre, possiamo utilizzare il nostro elemento dati!

  6. Salva le modifiche.

Impostare le variabili di Analytics e attivare il beacon Vista pagina

Attualmente la regola Page Loaded restituisce semplicemente un'istruzione console. Quindi, utilizza gli elementi dati e l’estensione Analytics per impostare le variabili Analytics come azione nella regola Pagina caricata. Imposta anche un’azione aggiuntiva per attivare il beacon Vista pagina e inviare i dati raccolti ad Adobe Analytics.

  1. Nella regola Page Loaded remove l'azione Core - Custom Code (le istruzioni della console):

    Rimuovi azione codice personalizzato

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

  3. Imposta il tipo Estensione su Adobe Analytics e imposta Tipo azione su Imposta variabili

    Impostare l’estensione dell’azione su Imposta variabili di Analytics

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

    Imposta come modello di pagina eVar

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

    Set di variabili per l’ambiente Nome pagina

    Salva le modifiche.

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

    Aggiungi un’azione Launch aggiuntiva

  7. Imposta il tipo Estensione su Adobe Analytics e imposta Tipo azione su Invia beacon. Poiché questo viene considerato una visualizzazione di pagina, lascia il tracciamento predefinito impostato su s.t().

    Azione Invia beacon Adobe Analytics

  8. Salva le modifiche. La regola Page Loaded deve ora avere la seguente configurazione:

    Configurazione di Final Launch

    • 1. Ascolta l' cmp:show evento.
    • 2. Controlla che l'evento sia stato attivato da una pagina.
    • 3. Imposta le variabili di Analytics per il nome pagina e il modello pagina
    • 4. Invia il beacon Vista pagina di Analytics
  9. Salva tutte le modifiche e crea la libreria Launch, promuovendo l’ambiente appropriato.

Convalida il beacon Vista pagina e la chiamata Analytics

Ora che la regola Page Loaded invia il beacon di Analytics, dovresti essere in grado di visualizzare le variabili di tracciamento di Analytics utilizzando il debugger di Experience Platform.

  1. Apri il sito WKND nel browser.

  2. Fai clic sull’icona Debugger icona Debugger di Experience Platform per aprire Experience Platform Debugger.

  3. Accertati che Debugger mappi la proprietà Launch nel tuo ambiente di sviluppo, come descritto in precedenza e che sia selezionato Logging console .

  4. Apri il menu Analytics e verifica che la suite di rapporti sia impostata su la suite di rapporti. È inoltre necessario compilare il campo Nome pagina :

    Debugger scheda Analytics

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

    Impostazione Evar e Nome pagina

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

    Fai clic sulla pagina del carosello

  7. Osserva l’istruzione console nella console del browser:

    Condizione non soddisfatta

    Questo perché il carosello attiva un evento cmp:show ma a causa del controllo del tipo di risorsa componente, non viene attivato alcun evento.

    NOTA

    Se non trovi registri della console, assicurati che Registrazione console sia selezionato in Launch in Experience Platform Debugger.

  8. Passa a una pagina di articolo come Australia occidentale. Osserva che il nome della pagina e il tipo di modello cambiano.

Congratulazioni!

Hai appena utilizzato Adobe Client Data Layer basato sugli eventi e Experience Platform Launch per raccogliere i dati della pagina da un sito AEM e inviarli ad Adobe Analytics.

Passaggi successivi

Consulta la seguente esercitazione per scoprire come utilizzare Adobe Client Data Layer basato sugli eventi per tenere traccia dei clic su componenti specifici su un sito Adobe Experience Manager.

In questa pagina