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.
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.
cmp:click
.Questa esercitazione è una continuazione di Raccogliere dati di pagina con Adobe Analytics e presuppone che tu abbia:
Prima di creare regole in Launch è utile rivedere lo schema per i pulsanti e i teaser e ispezionarli 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 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.
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
.
Passa a Experience Platform Launch e alla proprietà Web integrata con il sito AEM.
Passa alla sezione Regole nell’interfaccia utente di Launch, quindi fai clic su Aggiungi regola.
Denomina la regola CTA Clic.
Fai clic su Eventi > Aggiungi per aprire la procedura guidata Configurazione evento.
In Tipo evento selezionare Codice personalizzato.
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']
.
Salva le modifiche.
Successivamente, in Azioni fare clic su Aggiungi per aprire la procedura guidata Configurazione azione.
In Tipo azione scegli Codice personalizzato.
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.
Salva le modifiche ed esegui una build in Launch per promuovere il codice nell’ ambiente utilizzato sul sito AEM.
Può essere molto utile utilizzare il debugger Adobe Experience Platform per passare il codice da incorporare a un ambiente Sviluppo.
Passa al sito WKND e apri gli strumenti per sviluppatori per visualizzare la console. Selezionare Conserva registro.
Fai clic su uno dei pulsanti Teaser o Button CTA per passare a un’altra pagina.
Osserva nella console per sviluppatori che la regola CTA Click è 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 simile a component.button-b6562c963d
e il valore di event.component['dc:title']
era simile a “Visualizza viaggi”.
Passa a Experience Platform Launch e alla proprietà Web integrata con il sito AEM.
Passa alla sezione Elementi dati e fai clic su Aggiungi nuovo elemento dati.
Per Nome immetti ID componente.
Per Tipo di elemento dati seleziona Codice personalizzato.
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.
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.
Passa alla sezione Elementi dati e fai clic su Aggiungi nuovo elemento dati.
Per Nome immetti Titolo componente.
Per Tipo di elemento dati seleziona Codice personalizzato.
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.
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.
Nell’interfaccia utente di Launch, passa alla regola CTA Clic creata in precedenza.
In Condizioni fai clic su Aggiungi per aprire la procedura guidata Configurazione condizione.
Per Tipo condizione selezionare Codice personalizzato.
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.
Salva le modifiche.
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.
Nella regola CTA Clic rimuovi l'azione Core - Custom Code (le istruzioni della console):
In Azioni, fai clic su Aggiungi per aggiungere una nuova azione.
Imposta il tipo Estensione su Adobe Analytics e imposta Tipo azione su Imposta variabili.
Imposta i seguenti valori per eVars, Props e Events:
evar8
- %Component ID%
prop8
- %Component ID%
event8
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.
Quindi, aggiungi un'azione aggiuntiva a destra di Adobe Analytics - Imposta variabili toccando l'icona più :
Imposta il tipo Estensione su Adobe Analytics e imposta Tipo azione su Invia beacon.
In Tracking impostare il pulsante di scelta su s.tl()
.
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.
Salva le modifiche. La regola CTA Clic deve ora avere la seguente configurazione:
cmp:click
evento.Salva tutte le modifiche e crea la libreria Launch, promuovendo l’ambiente appropriato.
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.
Apri il sito WKND nel browser.
Fai clic sull’icona Debugger per aprire Experience Platform Debugger.
Accertati che Debugger mappi la proprietà Launch nel tuo ambiente di sviluppo, come descritto in precedenza e che sia selezionato Logging console .
Apri il menu Analytics e verifica che la suite di rapporti sia impostata su la suite di rapporti.
Nel browser, fai clic su uno dei pulsanti Teaser o Button CTA per passare a un’altra pagina.
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 .
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 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.
Se non trovi registri della console, assicurati che Registrazione console sia selezionato 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.