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

Utilizzare il motore basato su eventi Adobe Client Data Layer con AEM componenti core 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 clic, filtrarli per componente e inviare i dati ad 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 verrà aggiunta una nuova regola in Experience Platform Launch che ascolta cmp:click eventi da Teaser e Pulsante e invia l’ID del 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 basata su cmp:click evento.
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:

• A Launch, proprietà con Estensione Adobe Analytics abilitato
• Adobe Analytics ID suite di rapporti test/dev e server di tracciamento. Consulta la seguente documentazione per creazione di una nuova suite di rapporti.
• Debugger Experience Platform estensione del browser configurata con la proprietà Launch caricata in https://wknd.site/us/en.html o un sito AEM con Adobe Data Layer abilitato.

Inspect Pulsante e schema teaser

Prima di creare regole in Launch, è utile rivedere le schema per il pulsante e il teaser e le ispeziona 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 il prefisso button- e teaser-xyz-cta voce. 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 sui Schema componente/elemento contenitore. La regola che creeremo in Launch utilizzerà questo schema.

Creare una regola Clic su CTA

Il livello dati client di Adobe è un event livello dati guidato. Quando si fa clic su un componente core qualsiasi cmp:click viene inviato tramite il livello dati. Crea quindi una regola per ascoltare cmp:click evento.

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

2. Passa a Regole nell’interfaccia utente di Launch, quindi fai clic su Aggiungi regola.

3. Denomina la regola CTA selezionato.

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

5. Sotto Tipo evento select Codice personalizzato.

   

6. Fai clic su Open 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 di cui sopra aggiunge un listener di eventi da spingere una funzione nel livello dati. Quando il cmp:click viene attivato l'evento componentClickedHandler viene chiamata la funzione . In questa funzione vengono aggiunti alcuni controlli di integrità e un nuovo event viene creato con l'ultima stato del livello dati per il componente che ha attivato l’evento.

   Dopo trigger(event) viene chiamato. trigger() è un nome riservato in Launch e “attiva” la regola Launch. Passiamo il event oggetto come parametro che a sua volta è 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. Successivo sotto Azioni click Aggiungi per aprire Configurazione azione procedura guidata.

9. Sotto Tipo di azione scegli Codice personalizzato.

   

10. Fai clic su Open 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']);
    

    La event viene passato dall'oggetto trigger() chiamato nell'evento personalizzato. component è lo stato corrente del componente derivato dal livello dati getState che ha attivato il clic.

11. Salvare le modifiche ed eseguire un build in Launch per promuovere il codice nel ambiente utilizzato sul sito AEM.

    NOTA

    Può essere molto utile utilizzare il Debugger Adobe Experience Platform per convertire il codice di incorporamento in un Sviluppo ambiente.

12. Passa a Sito WKND e apri gli strumenti per sviluppatori per visualizzare la console. Seleziona Conserva registro.

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

    

14. Osserva nella console per sviluppatori che la CTA selezionato La regola è 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 qualcosa di simile a component.button-b6562c963d e il valore event.component['dc:title'] Era qualcosa tipo “Viaggi in vista”.

ID componente

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

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

3. Per Nome enter ID componente.

4. Per Tipo di elemento dati select Codice personalizzato.

   

5. Fai clic su Open 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 la event l'oggetto è reso disponibile e delimitato in base all'evento che ha attivato il Regola in Launch. Il valore di un elemento dati non viene impostato finché l’elemento dati non è referenza all'interno di una regola. Pertanto è sicuro utilizzare questo elemento dati all’interno di una regola come la CTA selezionato regola creata nell'esercizio precedente ma non sarebbe sicuro da utilizzare in altri contesti.

Titolo componente

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

2. Per Nome enter Titolo componente.

3. Per Tipo di elemento dati select Codice personalizzato.

4. Fai clic su Open 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 il CTA selezionato per garantire che la regola si attivi solo quando cmp:click viene attivato per un Teaser o Pulsante. 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 a CTA selezionato creato in precedenza.

2. Sotto Condizioni click Aggiungi per aprire Configurazione condizione procedura guidata.

3. Per Tipo di condizione select Codice personalizzato.

   

4. Fai clic su Open 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 CTA selezionato restituisce semplicemente un'istruzione console. Quindi, utilizza gli elementi dati e l’estensione Analytics per impostare le variabili Analytics come action. Inoltre, verrà impostata un’azione aggiuntiva per attivare la Traccia collegamento e inviare i dati raccolti ad Adobe Analytics.

1. In CTA selezionato regola remove la Core - Codice personalizzato azione (le istruzioni della console):

   

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

3. Imposta la Estensione digitare Adobe Analytics e imposta Tipo di azione a Imposta variabili.

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

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

   

   NOTA

   Qui %Component ID% viene utilizzato in quanto garantisce un identificatore univoco per il CTA su cui hai fatto clic. Un potenziale svantaggio nell'utilizzo di %Component ID% è che il rapporto di Analytics conterrà valori come button-2e6d32893a. Utilizzo %Component Title% darebbe un nome più umano amichevole, ma il valore potrebbe non essere unico.

5. Quindi, aggiungi un’azione aggiuntiva a destra di Adobe Analytics - Impostare le variabili toccando plus icona:

   

6. Imposta la Estensione digitare Adobe Analytics e imposta Tipo di azione a Invia beacon.

7. Sotto Tracking imposta il pulsante di scelta su s.tl().

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

   

   In questo modo si combina la variabile dinamica dell’elemento dati Titolo componente e la stringa statica CTA selezionato.

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

   

   • 1. Ascolta i cmp:click evento.
   • 2. Controlla che l'evento sia stato attivato da un Pulsante o Teaser.
   • 3. Imposta le variabili di Analytics per per tenere traccia del ID componente come eVar, prop e un event.
   • 4. Invia il beacon Track Link di Analytics (e fai not trattarla come visualizzazione di una 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 CTA selezionato La regola 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 Sito WKND nel browser.

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

3. Accertati che Debugger mappi la proprietà Launch su le Ambiente di sviluppo, come descritto in precedenza e Registrazione console è controllata.

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

   

5. Nel browser, fai clic su una delle Teaser o Pulsante Pulsanti 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. Dovresti essere in grado di trovare il eVar, prop e event impostato.

   

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 il messaggio nella console del browser "Codice personalizzato" per la regola "CTA cliccato" non è stato soddisfatto.

   Questo perché il componente Navigazione attiva un cmp:click event 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 è controllato 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.

Risorse Business.Adobe.com