[Integrazione]{class="badge positive"}

Tracciare il componente su cui è stato fatto clic con Adobe Analytics

Utilizza Adobe Client Data Layer basato sugli eventi con i componenti core AEM per tenere traccia dei clic su componenti specifici in un sito Adobe Experience Manager. Scopri come utilizzare le regole nella proprietà tag per rilevare gli eventi di clic, filtrare per componente e inviare i dati a un Adobe Analytics con un beacon di tracciamento dei collegamenti.

Cosa intendi creare what-build

Il team di marketing WKND è interessato a sapere quali pulsanti Call to Action (CTA) offrono le migliori prestazioni nella home page. In questa esercitazione, aggiungiamo una regola alla proprietà tag che ascolta gli eventi cmp:click dai componenti Teaser e Button. Quindi invia l’ID del componente e un nuovo evento ad Adobe Analytics insieme al beacon track link.

Cosa verrà creato per tenere traccia dei clic

Obiettivi objective

  1. Creare una regola basata su eventi nella proprietà tag che acquisisce l'evento cmp:click.
  2. Filtra i diversi eventi in base al tipo di risorsa del componente.
  3. Imposta l’ID del componente e invia un evento ad Adobe Analytics con il beacon track link.

Prerequisiti

Questo tutorial è una continuazione di Raccogli dati di pagina con Adobe Analytics e presuppone che tu abbia:

Schema Pulsante e teaser di Inspect

Prima di creare regole nella proprietà tag, è utile rivedere lo schema per Button e Teaser e analizzarli nell'implementazione del livello dati.

  1. Passa a Home page WKND

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

    code language-js
    adobeDataLayer.getState();
    

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

    Stato del livello dati tramite la console del browser

  3. Espandere la risposta e trovare le voci con il prefisso button- e teaser-xyz-cta. Dovresti visualizzare uno schema di dati come il seguente:

    Schema pulsante:

    code language-json
    button-2e6d32893a:
        @type: "wknd/components/button"
        dc:title: "View All"
        parentId: "page-2eee4f8914"
        repo:modifyDate: "2020-07-11T22:17:55Z"
        xdm:linkURL: "/content/wknd/us/en/magazine.html"
    

    Schema teaser:

    code language-json
    teaser-da32481ec8-cta-adf3c09db9:
        @type: "wknd/components/teaser/cta"
        dc:title: "Surf's Up"
        parentId: "teaser-da32481ec8"
        xdm:linkURL: "/content/wknd/us/en/magazine/san-diego-surf.html"
    

    I dettagli dei dati di cui sopra si basano sullo schema Componente/Contenitore. La nuova regola di tag utilizza questo schema.

Creare una regola con clic su CTA

Adobe Client Data Layer è un livello dati basato su evento. Ogni volta che si fa clic su un Componente core, viene inviato un evento cmp:click tramite Data Layer. Per ascoltare l'evento cmp:click, creiamo una regola.

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

  2. Passa alla sezione Regole nell'interfaccia utente della proprietà Tag, quindi fai clic su Aggiungi regola.

  3. Denomina la regola CTA selezionata.

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

  5. Per il campo Tipo evento, selezionare Codice personalizzato.

    Denomina la regola CTA su cui hai fatto clic e aggiungi levento del codice personalizzato

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

    code language-js
    var componentClickedHandler = function(evt) {
       // defensive coding to avoid a null pointer exception
       if(evt.hasOwnProperty("eventInfo") && evt.eventInfo.hasOwnProperty("path")) {
          //trigger Tag Rule and pass event
          console.debug("cmp:click 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 Property 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:click into the data layer
    window.adobeDataLayer.push(function (dl) {
       //add event listener for `cmp:click` and callback to the `componentClickedHandler` function
       dl.addEventListener("cmp:click", componentClickedHandler);
    });
    

    Il frammento di codice sopra riportato aggiunge un listener di eventi inviando una funzione nel livello dati. Ogni volta che viene attivato l'evento cmp:click, viene chiamata la funzione componentClickedHandler. In questa funzione vengono aggiunti alcuni controlli di integrità e viene costruito un nuovo oggetto event con il stato più recente 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'].

  7. Salva le modifiche.

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

  9. Per il campo Tipo azione, scegli Codice personalizzato.

    Tipo azione Codice Personalizzato

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

    code language-js
    console.debug("Component Clicked");
    console.debug("Component Path: " + event.path);
    console.debug("Component type: " + event.component['@type']);
    console.debug("Component text: " + event.component['dc:title']);
    

    L'oggetto event è passato dal metodo trigger() chiamato nell'evento personalizzato. L'oggetto component è lo stato corrente del componente derivato dal metodo getState() del livello dati ed è l'elemento che ha attivato il clic.

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

    note note
    NOTE
    Può essere utile utilizzare l'Adobe Experience Platform Debugger per cambiare il codice da incorporare in un ambiente Sviluppo.
  12. Passa al sito WKND e apri gli strumenti per sviluppatori per visualizzare la console. Selezionare inoltre la casella di controllo Mantieni registro.

  13. Fai clic su uno dei pulsanti Teaser o Pulsante CTA per passare a un'altra pagina.

    Pulsante CTA su cui fare clic

  14. Osserva nella console per sviluppatori che la regola CTA clicked è stata attivata:

    Pulsante CTA selezionato

Creare elementi dati

Quindi crea un elemento dati per acquisire l’ID componente e il titolo su cui hai fatto clic. Ricorda nell'esercizio precedente che l'output di event.path era simile a component.button-b6562c963d e il valore di event.component['dc:title'] era simile a "Viaggi di visualizzazione".

ID componente

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

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

  3. Per il campo Nome, immettere ID componente.

  4. Per il campo Tipo elemento dati, selezionare Codice personalizzato.

    Modulo elemento dati ID componente

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

    code language-js
    if(event && event.path && event.path.includes('.')) {
        // split on the `.` to return just the component ID
        return event.path.split('.')[1];
    }
    
  6. Salva le modifiche.

    note note
    NOTE
    Ricorda che l'oggetto event è reso disponibile e con ambito in base all'evento che ha attivato la regola nella proprietà tag. Il valore di un elemento dati non viene impostato finché all'elemento dati non viene fatto riferimento ​ in una regola. Pertanto, è sicuro utilizzare questo elemento dati all'interno di una regola come la regola ​ Pagina caricata** creata nel passaggio precedente ma non sarebbe sicuro da utilizzare in altri contesti.

Titolo componente

  1. Passa alla sezione Elementi dati e fai clic su Aggiungi nuovo elemento dati.

  2. Per il campo Nome, immettere Titolo componente.

  3. Per il campo Tipo elemento dati, selezionare Codice personalizzato.

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

    code language-js
    if(event && event.component && event.component.hasOwnProperty('dc:title')) {
        return event.component['dc:title'];
    }
    
  5. Salva le modifiche.

Aggiungi una condizione alla regola CTA Clicked

Quindi, aggiorna la regola CTA clicked per assicurarti che la regola venga attivata solo quando l'evento cmp:click viene attivato per un Teaser o un Button. Poiché il CTA del teaser è considerato un oggetto separato nel livello dati, è importante controllare l’elemento principale per verificare che provenga da un teaser.

  1. Nell'interfaccia utente della proprietà Tag, passa alla regola CTA Clicked creata in precedenza.

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

  3. Per il campo Tipo condizione, selezionare Codice personalizzato.

    Codice personalizzato condizione CTA selezionata

  4. Fai clic su Apri editor e immetti quanto segue nell'editor di codice personalizzato:

    code language-js
    if(event && event.component && event.component.hasOwnProperty('@type')) {
        // console.log("Event Type: " + event.component['@type']);
        //Check for Button Type OR Teaser CTA type
        if(event.component['@type'] === 'wknd/components/button' ||
           event.component['@type'] === 'wknd/components/teaser/cta') {
            return true;
        }
    }
    
    // none of the conditions are met, return false
    return false;
    

    Il codice riportato sopra controlla innanzitutto se il tipo di risorsa proviene da un Button o se il tipo di risorsa proviene da un CTA all'interno di un Teaser.

  5. Salva le modifiche.

Attualmente la regola CTA Clicked restituisce semplicemente un'istruzione della console. Quindi, utilizza gli elementi dati e l'estensione Analytics per impostare le variabili Analytics come azione. Impostiamo inoltre un'azione aggiuntiva per attivare il collegamento di tracciamento e inviare i dati raccolti ad Adobe Analytics.

  1. Nella regola CTA clicked, rimuovi l'azione Core - Codice personalizzato (le istruzioni della console):

    Rimuovi azione codice personalizzato

  2. In Azioni, fai clic su Aggiungi per creare un'azione.

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

  4. Imposta i seguenti valori per eVar, Prop e Eventi:

    • evar8 - %Component ID%
    • prop8 - %Component ID%
    • event8

    Imposta proprietà ed eventi eVar

    note note
    NOTE
    Qui %Component ID% viene utilizzato perché garantisce un identificatore univoco per il CTA su cui è stato fatto clic. Un potenziale svantaggio dell'utilizzo di %Component ID% è che il report di Analytics contiene valori come button-2e6d32893a. Se si utilizza %Component Title%, verrà fornito un nome più descrittivo, ma il valore potrebbe non essere univoco.
  5. Quindi, aggiungi un'azione aggiuntiva a destra di Adobe Analytics - Imposta variabili toccando l'icona più:

    Aggiungi unazione aggiuntiva alla regola di tag

  6. Imposta il tipo Extension su Adobe Analytics e imposta il tipo Action su Send Beacon.

  7. In Tracciamento impostare il pulsante di scelta su s.tl().

  8. Per il campo Tipo di collegamento, scegli Collegamento personalizzato e per Nome collegamento imposta il valore su: %Component Title%: CTA Clicked:

    Configurazione per il beacon Invia collegamento

    La configurazione precedente combina la variabile dinamica dell'elemento dati Component Title e la stringa statica CTA Clicked.

  9. Salva le modifiche. La regola CTA clicked ora deve avere la seguente configurazione:

    Configurazione regola tag finale

    • 1. Ascolta l'evento cmp:click.
    • 2. Verificare che l'evento sia stato attivato da un pulsante o teaser.
    • 3. Imposta le variabili di Analytics per tenere traccia dell'ID componente come eVar, prop e un evento.
    • 4. Invia il beacon Track Link di Analytics (e non lo considera come una visualizzazione di pagina).
  10. Salva tutte le modifiche e crea la libreria tag, passando all’ambiente appropriato.

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

  1. Apri il sito WKND nel browser.

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

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

  4. Apri il menu Analytics e verifica che la suite di rapporti sia impostata su la tua suite di rapporti.

    Debugger scheda Analytics

  5. Nel browser, fai clic su uno dei pulsanti CTA Teaser o Button per passare a un'altra pagina.

    Pulsante CTA su cui fare clic

  6. Torna a Debugger Experience Platform, scorri verso il basso ed espandi Richieste di rete > Suite di rapporti. Dovresti trovare il set eVar, prop e event.

    Eventi, evar e prop di Analytics tracciati al clic

  7. Torna al browser e apri la console per sviluppatori. Passare al piè di pagina del sito e fare clic su uno dei collegamenti di spostamento:

    Fare clic sul collegamento di spostamento nel piè di pagina

  8. Osserva che nella console del browser il messaggio "Custom Code" per la regola "CTA cliccato" non è stato soddisfatto.

    Il messaggio sopra riportato è dovuto al fatto che il componente Navigazione attiva un evento cmp:click ma a causa della condizione alla regola che controlla il tipo di risorsa senza intraprendere alcuna azione.

    note note
    NOTE
    Se non trovi alcun registro della console, assicurati che Registrazione console sia selezionato in Tag Experience Platform nel debugger Experience Platform.

Congratulazioni.

Hai appena utilizzato Adobe Client Data Layer e Tag basati sugli eventi in Experience Platform per monitorare i clic di componenti specifici su un sito AEM.

recommendation-more-help
bb44cebf-d964-4e3c-b64e-ce882243fe4d