Utilisez la couche de données client d’Adobe pilotée par l’événement avec les composants principaux d’AEM pour effectuer le suivi des clics sur des composants spécifiques d’un site Adobe Experience Manager. Découvrez comment utiliser des règles dans Experience Platform Launch pour écouter les événements de clics, filtrer par composant et envoyer les données à une instance Adobe Analytics avec une balise de lien de suivi.
L’équipe marketing WKND souhaite déterminer les boutons CTA (Appel à l’action) les plus performants sur la page d’accueil. Dans ce tutoriel, nous allons ajouter une nouvelle règle dans Experience Platform Launch qui écoute les événements cmp:click
provenant des composants Teaser et Bouton et envoyer l’identifiant du composant et un nouvel événement à Adobe Analytics avec la balise de lien de suivi.
cmp:click
.Ce tutoriel est la suite de la section Collecter les données de page avec Adobe Analytics et suppose que vous disposez des éléments suivants :
Avant d’établir des règles dans Launch, il est utile de consulter le schéma pour le bouton et le teaser et de les examiner dans l’implémentation de la couche de données.
Accédez à https://wknd.site/us/en.html
Ouvrez les outils de développement du navigateur et accédez à la console. Exécutez la commande suivante :
adobeDataLayer.getState();
Cette opération renvoie l’état actuel de la couche de données client Adobe.
Développez la réponse et recherchez les entrées affectées du préfixe button-
et de l’entrée teaser-xyz-cta
. Vous devriez voir un schéma de données comme suit :
Schéma de bouton :
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"
Schéma du 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"
Ils sont basés sur le schéma d’élément de composant/conteneur. La règle que nous allons créer dans Launch utilisera ce schéma.
La couche de données client Adobe est une couche de données pilotée par event. Lorsque l’utilisateur clique sur un composant principal, un événement cmp:click
est distribué via la couche de données. Créez ensuite une règle pour écouter l’événement cmp:click
.
Accédez à Experience Platform Launch et à la propriété Web intégrée au site AEM.
Accédez à la section Règles de l’interface utilisateur de Launch, puis cliquez sur Ajouter une règle.
Nommez la règle CTA cliqué.
Cliquez sur Événements > Ajouter pour ouvrir l’assistant Configuration d’événement.
Sous Type d’événement, sélectionnez Code personnalisé.
Cliquez sur Ouvrir l’éditeur dans le panneau principal et saisissez le fragment de code suivant :
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);
});
Le fragment de code ci-dessus ajoute un écouteur d’événement en insérant une fonction dans la couche de données. Lorsque l’événement cmp:click
est déclenché, la fonction componentClickedHandler
est appelée. Dans cette fonction, quelques contrôles d’intégrité sont ajoutés et un nouvel objet event
est construit avec le dernier état de la couche de données pour le composant qui a déclenché l’événement.
Ensuite, trigger(event)
est appelé. trigger()
est un nom réservé dans Launch qui “déclenche” la règle Launch. Nous transmettons l’objet event
en tant que paramètre qui sera à son tour exposé par un autre nom réservé dans Launch nommé event
. Les éléments de données de Launch peuvent désormais référencer diverses propriétés comme suit : event.component['someKey']
.
Enregistrez les modifications.
Ensuite, sous Actions cliquez sur Ajouter pour ouvrir l’assistant Configuration de l’action.
Sous Type d’action, sélectionnez Code personnalisé.
Cliquez sur Ouvrir l’éditeur dans le panneau principal et saisissez le fragment de code suivant :
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’objet event
est transmis à partir de la méthode trigger()
appelée dans l’événement personnalisé. component
est l’état actuel du composant dérivé de la couche de données getState
qui a déclenché le clic.
Enregistrez les modifications et exécutez un build dans Launch pour convertir le code en environnement utilisé sur votre site AEM.
Il peut s’avérer très utile d’utiliser le débogueur Adobe Experience Platform pour passer le code incorporé à un environnement de développement.
Accédez au site WKND et ouvrez les outils de développement pour afficher la console. Sélectionnez Conserver le journal.
Cliquez sur l’un des boutons Teaser ou Bouton CTA pour accéder à une autre page.
Observez dans la console de développement que la règle CTA ayant fait l’objet d’un clic a été déclenchée :
Créez ensuite un élément de données pour capturer l’identifiant et le titre du composant sur lequel l’utilisateur a cliqué. Rappelez-vous dans l’exercice précédent que la sortie de event.path
ressemblait à component.button-b6562c963d
et que la valeur de event.component['dc:title']
ressemblait à “View Trips”.
Accédez à Experience Platform Launch et à la propriété Web intégrée au site AEM.
Accédez à la section Éléments de données et cliquez sur Ajouter un nouvel élément de données.
Pour Nom, saisissez ID de composant.
Pour Type d’élément de données, sélectionnez Code personnalisé.
Cliquez sur Ouvrir l’éditeur et saisissez ce qui suit dans l’éditeur de code personnalisé :
if(event && event.path && event.path.includes('.')) {
// split on the `.` to return just the component ID
return event.path.split('.')[1];
}
Enregistrez les modifications.
N’oubliez pas que l’objet event
est rendu disponible et défini sur la portée en fonction de l’événement qui a déclenché la règle dans Launch. La valeur d’un élément de données n’est pas définie tant que l’élément de données n’est pas référencé dans une règle. Par conséquent, il est sans risque d’utiliser cet élément de données à l’intérieur d’une règle telle que la règle CTA cliquée créée dans l’exercice précédent mais ne serait pas utilisable en toute sécurité dans d’autres contextes.
Accédez à la section Éléments de données et cliquez sur Ajouter un nouvel élément de données.
Pour Nom, saisissez Titre du composant.
Pour Type d’élément de données, sélectionnez Code personnalisé.
Cliquez sur Ouvrir l’éditeur et saisissez ce qui suit dans l’éditeur de code personnalisé :
if(event && event.component && event.component.hasOwnProperty('dc:title')) {
return event.component['dc:title'];
}
Enregistrez les modifications.
Ensuite, mettez à jour la règle CTA cliquée pour vous assurer que la règle ne se déclenche que lorsque l’événement cmp:click
est déclenché pour un teaser ou un bouton. Puisque le CTA du teaser est considéré comme un objet distinct dans la couche de données, il est important de vérifier le parent pour vérifier qu’il provient d’un teaser.
Dans l’interface utilisateur de Launch, accédez à la règle CTA cliquée créée précédemment.
Sous Conditions cliquez sur Ajouter pour ouvrir l’assistant Configuration de condition.
Pour Type de condition, sélectionnez Code personnalisé.
Cliquez sur Ouvrir l’éditeur et saisissez ce qui suit dans l’éditeur de code personnalisé :
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;
Le code ci-dessus vérifie d’abord si le type de ressource provient d’un bouton, puis vérifie si le type de ressource provient d’une CTA dans un teaser.
Enregistrez les modifications.
Actuellement, la règle CTA cliquée génère simplement une instruction console. Ensuite, utilisez les éléments de données et l’extension Analytics pour définir les variables Analytics sous la forme d’une action. Nous définirons également une action supplémentaire pour déclencher le lien de suivi et envoyer les données collectées à Adobe Analytics.
Dans la règle CTA cliquée remove l’action Core - Custom Code (instructions de la console) :
Sous Actions, cliquez sur Ajouter pour ajouter une nouvelle action.
Définissez le type Extension sur Adobe Analytics et définissez le Type d’action sur Définir des variables.
Définissez les valeurs suivantes pour eVars, Props et Events :
evar8
- %Component ID%
prop8
- %Component ID%
event8
Ici, %Component ID%
est utilisé, car il garantit un identifiant unique pour l’CTA sur lequel l’utilisateur a cliqué. L’un des inconvénients potentiels de l’utilisation de %Component ID%
est que le rapport Analytics contiendra des valeurs telles que button-2e6d32893a
. L’utilisation de %Component Title%
donnerait un nom plus convivial à l’homme, mais la valeur peut ne pas être unique.
Ajoutez ensuite une action supplémentaire à droite de Adobe Analytics - Set Variables en appuyant sur l’icône plus :
Définissez le type Extension sur Adobe Analytics et définissez le Type d’action sur Envoyer la balise.
Sous Tracking, définissez le bouton radio sur s.tl()
.
Pour Type de lien choisissez Lien personnalisé et pour Nom de lien définissez la valeur sur : %Component Title%: CTA Clicked
:
Cela combinera la variable dynamique de l’élément de données Titre du composant et la chaîne statique CTA cliqué.
Enregistrez les modifications. La règle CTA cliquée doit maintenant avoir la configuration suivante :
cmp:click
événement.Enregistrez toutes les modifications et créez votre bibliothèque Launch, en effectuant la promotion vers l’environnement approprié.
Maintenant que la règle CTA cliquée envoie la balise Analytics, vous devriez être en mesure de voir les variables de suivi Analytics à l’aide du débogueur Experience Platform.
Ouvrez le site WKND dans votre navigateur.
Cliquez sur l’icône Debugger pour ouvrir Debugger Experience Platform.
Assurez-vous que le débogueur mappe la propriété Launch à votre environnement de développement, comme décrit précédemment et que la journalisation de la console est cochée.
Ouvrez le menu Analytics et vérifiez que la suite de rapports est définie sur votre suite de rapports.
Dans le navigateur, cliquez sur l’un des boutons Teaser ou Bouton CTA pour accéder à une autre page.
Revenez au débogueur Experience Platform, faites défiler l’écran vers le bas et développez Requêtes réseau > Votre suite de rapports. Vous devriez être en mesure de trouver le jeu eVar, prop et event.
Revenez au navigateur et ouvrez la console de développement. Accédez au pied de page du site et cliquez sur l’un des liens de navigation :
Observez dans la console du navigateur que le message "Code personnalisé" pour la règle "CTA cliqué" n’a pas été rempli.
En effet, le composant Navigation ne déclenche pas d’événement cmp:click
mais en raison de la vérification du par rapport au type de ressource, aucune action n’est effectuée.
Si vous ne voyez aucun journal de la console, assurez-vous que Journalisation de la console est coché sous Launch dans le débogueur Experience Platform.
Vous venez d’utiliser la couche de données client et l’Experience Platform Launch Adobe pilotés par les événements pour effectuer le suivi des clics sur des composants spécifiques d’un site Adobe Experience Manager.