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.
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.
cmp:click
evento.Questa esercitazione è una continuazione di Raccogliere dati di pagina con Adobe Analytics e presuppone che:
Prima di creare regole in Launch, è utile rivedere le schema per il pulsante e il teaser e le ispeziona nell’implementazione del livello dati.
Passa a https://wknd.site/us/en.html
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.
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.
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.
Passa a Experience Platform Launch e alla proprietà Web integrata con il sito AEM.
Passa a Regole nell’interfaccia utente di Launch, quindi fai clic su Aggiungi regola.
Denomina la regola CTA selezionato.
Fai clic su Eventi > Aggiungi per aprire Configurazione evento procedura guidata.
Sotto Tipo evento select Codice personalizzato.
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']
.
Salva le modifiche.
Successivo sotto Azioni click Aggiungi per aprire Configurazione azione procedura guidata.
Sotto Tipo di azione scegli Codice personalizzato.
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.
Salvare le modifiche ed eseguire un build in Launch per promuovere il codice nel ambiente utilizzato sul sito AEM.
Può essere molto utile utilizzare il Debugger Adobe Experience Platform per convertire il codice di incorporamento in un Sviluppo ambiente.
Passa a Sito WKND e apri gli strumenti per sviluppatori per visualizzare la console. Seleziona Conserva registro.
Fai clic su uno dei Teaser o Pulsante Pulsanti CTA per passare a un’altra pagina.
Osserva nella console per sviluppatori che la CTA selezionato La regola è stata attivata:
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”.
Passa a Experience Platform Launch e alla proprietà Web integrata con il sito AEM.
Passa a Elementi dati e fai clic su Aggiungi nuovo elemento dati.
Per Nome enter ID componente.
Per Tipo di elemento dati select Codice personalizzato.
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.
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.
Passa a Elementi dati e fai clic su Aggiungi nuovo elemento dati.
Per Nome enter Titolo componente.
Per Tipo di elemento dati select Codice personalizzato.
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.
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.
Nell’interfaccia utente di Launch, passa a CTA selezionato creato in precedenza.
Sotto Condizioni click Aggiungi per aprire Configurazione condizione procedura guidata.
Per Tipo di condizione select Codice personalizzato.
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.
Salva le modifiche.
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.
In CTA selezionato regola remove la Core - Codice personalizzato azione (le istruzioni della console):
In Azioni, fai clic su Aggiungi per aggiungere una nuova azione.
Imposta la Estensione digitare Adobe Analytics e imposta Tipo di azione a Imposta variabili.
Imposta i seguenti valori per eVar, Proprietà e Eventi:
evar8
- %Component ID%
prop8
- %Component ID%
event8
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.
Quindi, aggiungi un’azione aggiuntiva a destra di Adobe Analytics - Impostare le variabili toccando plus icona:
Imposta la Estensione digitare Adobe Analytics e imposta Tipo di azione a Invia beacon.
Sotto Tracking imposta il pulsante di scelta su s.tl()
.
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.
Salva le modifiche. La CTA selezionato La regola deve ora avere la seguente configurazione:
cmp:click
evento.Salva tutte le modifiche e crea la libreria Launch, promuovendo l’ambiente appropriato.
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.
Apri Sito WKND nel browser.
Fai clic sull’icona Debugger per aprire Experience Platform Debugger.
Accertati che Debugger mappi la proprietà Launch su le Ambiente di sviluppo, come descritto in precedenza e Registrazione console è controllata.
Apri il menu Analytics e verifica che la suite di rapporti sia impostata su le suite di rapporti.
Nel browser, fai clic su una delle Teaser o Pulsante Pulsanti CTA per passare a un’altra pagina.
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.
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:
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.
Se non trovi registri della console, assicurati che Registrazione console è controllato in Launch in Experience Platform Debugger.
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.