Tenere traccia del componente su cui è stato fatto clic con Adobe Analytics

Utilizza Adobe Client Data Layer basato su eventi con AEM Core Components per tenere traccia dei clic su componenti specifici su un sito Adobe Experience Manager. Scopri come utilizzare le regole in Experience Platform Launch 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 verrà creato

Il team di marketing WKND desidera capire quali pulsanti Invito all’azione (CTA) hanno prestazioni migliori nella home page. In questa esercitazione aggiungeremo una nuova regola in Experience Platform Launch che ascolta gli eventi cmp:click dai componenti Teaser e Button e invieremo l’ID componente e un nuovo evento ad Adobe Analytics insieme al beacon di tracciamento del collegamento.

Obiettivi

1. Crea una regola basata su eventi in Launch in base all'evento cmp:click .
2. Filtrare i diversi eventi per tipo di risorsa componente.
3. Imposta l’id del componente su cui hai fatto clic e invia l’evento Adobe Analytics con il beacon di tracciamento del collegamento.

Prerequisiti

Questa esercitazione è una continuazione di Raccogliere dati di pagina con Adobe Analytics e presuppone che tu abbia:

• A Proprietà Launch con l'estensione Adobe Analytics abilitata
• Adobe ID suite di rapporti Analytics/dev e server di tracciamento. Consulta la seguente documentazione per creare una nuova suite di rapporti.
• Experience Platform estensione Debuggerbrowser configurata con la proprietà Launch caricata su https://wknd.site/us/en. htmlor un sito AEM con l’Adobe Data Layer abilitato.

Inspect Pulsante e schema teaser

Prima di creare regole in Launch è utile rivedere lo schema per i pulsanti e i teaser e ispezionarli nell'implementazione del livello dati.

1. Passa a https://wknd.site/us/en.html

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

   adobeDataLayer.getState();
   

   Restituisce lo stato corrente del livello dati client di Adobe.

   

3. Espandi la risposta e trova le voci con prefisso button- e teaser-xyz-cta. Dovresti visualizzare uno schema di dati simile al seguente:

   Schema pulsante:

   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:

   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"
   

   Si basano su Schema componente/contenitore elemento. La regola che creeremo in Launch utilizzerà questo schema.

Creare una regola Clic su CTA

Adobe Client Data Layer è un livello dati guidato da evento . Quando fai clic su un componente core qualsiasi, un evento cmp:click viene inviato tramite il livello dati. Quindi crea una regola per ascoltare l'evento cmp:click .

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 Aggiungi regola.

3. Denomina la regola CTA Clic.

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

5. In Tipo evento selezionare Codice personalizzato.

   

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

   var componentClickedHandler = 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: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 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: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);
   });
   

   Lo snippet di codice riportato sopra aggiunge un listener di eventi premendo una funzione nel livello dati. Quando l'evento cmp:click viene attivato, viene chiamata la funzione componentClickedHandler . In questa funzione vengono aggiunti alcuni controlli di integrità e viene creato un nuovo oggetto 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.

   

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

    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 viene passato dal metodo trigger() chiamato nell'evento personalizzato. component è lo stato corrente del componente derivato dal livello dati getState che ha attivato il clic.

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

    NOTA

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

12. Passa al sito WKND e apri gli strumenti per sviluppatori per visualizzare la console. Selezionare Conserva registro.

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

    

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

    

Creare elementi dati

Crea quindi un elemento dati per acquisire l’ID componente e il titolo su cui hai fatto clic. Ricorda nell’esercizio precedente l’output di event.path era simile a component.button-b6562c963d e il valore di event.component['dc:title'] era simile a “Visualizza viaggi”.

ID 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 Aggiungi nuovo elemento dati.

3. Per Nome immetti ID componente.

4. Per Tipo di elemento dati seleziona Codice personalizzato.

   

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

   if(event && event.path && event.path.includes('.')) {
       // split on the `.` to return just the component ID
       return event.path.split('.')[1];
   }
   

   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 CTA Clic creata nell’esercizio 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 Nome immetti Titolo componente.

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.

Aggiungi una condizione alla regola CTA Clic

Quindi, aggiorna la regola CTA Clic per garantire che la regola si attivi 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 il padre per verificarlo che provenga da un teaser.

1. Nell’interfaccia utente di Launch, passa alla regola CTA Clic creata in precedenza.

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

3. Per Tipo condizione selezionare Codice personalizzato.

   

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

   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 di cui sopra controlla prima se il tipo di risorsa proviene da un Pulsante, quindi controlla se il tipo di risorsa proviene da un CTA all'interno di un Teaser.

5. Salva le modifiche.

Impostare le variabili di Analytics e attivare il beacon Track Link

Attualmente la regola CTA Clic restituisce semplicemente un'istruzione console. Quindi, utilizza gli elementi dati e l'estensione Analytics per impostare le variabili Analytics come azione. Imposta anche un’azione aggiuntiva per attivare il Track Link e inviare i dati raccolti ad Adobe Analytics.

1. Nella regola CTA Clic rimuovi l'azione Core - Custom Code (le istruzioni della console):

   

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.

4. Imposta i seguenti valori per eVars, Props e Events:

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

   

   NOTA

   Viene utilizzato qui %Component ID% in quanto garantisce un identificatore univoco per l’Invito all’azione selezionato. Un potenziale lato negativo dell’utilizzo di %Component ID% è che il rapporto di Analytics conterrà valori come button-2e6d32893a. L’utilizzo di %Component Title% fornisce 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ù :

   

6. Imposta il tipo Estensione su Adobe Analytics e imposta Tipo azione su Invia beacon.

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

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

   

   In questo modo si combinano la variabile dinamica dell'elemento dati Titolo componente e la stringa statica CTA selezionata.

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

   

   • 1. Ascolta l' cmp:click evento.
   • 2. Controlla che l’evento sia stato attivato da un ​​Teaser o Teaser.
   • 3. Imposta le variabili di Analytics per per tenere traccia dell’ ID componente come eVar, prop e un evento.
   • 4. Invia il beacon Track Link di Analytics (e ​​non crearlo come visualizzazione di pagina).

10. Salva tutte le modifiche e crea la libreria Launch, promuovendo l’ambiente appropriato.

Convalida il beacon Track Link e la chiamata di Analytics

Ora che la regola CTA Click 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 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.

   

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

   

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

   

7. Torna al browser e apri la console per sviluppatori. Passa al piè di pagina del sito e fai clic su uno dei collegamenti di navigazione:

   

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

   Questo perché il componente Navigazione attiva un evento cmp:click ma a causa del controllo di rispetto al tipo di risorsa, non viene eseguita alcuna azione.

   NOTA

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

Congratulazioni!

Hai appena utilizzato Adobe Client Data Layer e il Experience Platform Launch basati sugli eventi per tenere traccia dei clic su componenti specifici su un sito Adobe Experience Manager.