Journalisation côté client pour les données A4T dans le Experience Platform Web SDK
Le Adobe Experience Platform Web SDK vous permet de collecter des données Adobe Analytics for Target (A4T) côté client de votre application web.
La journalisation côté client signifie que les données de Target pertinentes sont renvoyées côté client, ce qui vous permet de collecter des données et de les partager avec Analytics. Cette option doit être activée si vous envisagez d’envoyer manuellement des données à Analytics à l’aide de l’API Data Insertion.
Ce document décrit les étapes de configuration de la journalisation A4T côté client pour le Platform Web SDK et fournit des exemples d’implémentation pour les cas d’utilisation courants.
Conditions préalables prerequisites
Ce tutoriel suppose que vous connaissez les concepts et processus fondamentaux liés à l’utilisation de l’Platform Web SDK à des fins de personnalisation. Consultez la documentation suivante si vous avez besoin d’une introduction :
Configurer Analytics journalisation côté client set-up-client-side-logging
Les sous-sections suivantes décrivent comment activer Analytics journalisation côté client pour votre implémentation Platform Web SDK.
Activer la journalisation côté client Analytics enable-analytics-client-side-logging
Pour que Analytics journalisation côté client soit activée pour votre implémentation, vous devez désactiver la configuration Adobe Analytics dans votre flux de données.
Récupérez A4T données du SDK et envoyez-les à Analytics a4t-to-analytics
Pour que cette méthode de création de rapports fonctionne correctement, vous devez envoyer les données liées au A4T récupérées à partir de la commande sendEvent dans l’accès au Analytics.
Lorsqu’Target Edge calcule une réponse de propositions, il vérifie si Analytics journalisation côté client est activée (par exemple, si Analytics est désactivé dans votre flux de données). Si la journalisation côté client est activée, le système ajoute un jeton Analytics à chaque proposition dans la réponse.
Le flux ressemble à ceci :
Voici un exemple de réponse interact lorsque Analytics journalisation côté client est activée. Si la proposition concerne une activité qui fait l'objet de rapports Analytics, elle possède une propriété scopeDetails.characteristics.analyticsToken.
{
"requestId": "1234",
"handle": [
{
"payload": [
{
"id": "AT:eyJhY3Rpdml0eUlkIjoiNDM0Njg5IiwiZXhwZXJpZW5jZUlkIjoiMCJ9",
"scope": "a4t-test",
"scopeDetails": {
"decisionProvider": "TGT",
"activity": {
"id": "434689"
},
"experience": {
"id": "0"
},
"strategies": [
{
"algorithmID": "0",
"trafficType": "0"
}
],
"characteristics": {
"eventToken": "2lTS5KA6gj4JuSjOdhqUhGqipfsIHvVzTQxHolz2IpTMromRrB5ztP5VMxjHbs7c6qPG9UF4rvQTJZniWgqbOw==",
"analyticsToken": "434689:0:0|2,434689:0:0|1"
}
},
"items": [
{
"id": "1184844",
"schema": "https://ns.adobe.com/personalization/html-content-item",
"meta": {
"geo.state": "bucuresti",
"activity.id": "434689",
"experience.id": "0",
"activity.name": "a4t test form based activity",
"offer.id": "1184844",
"profile.tntId": "04608610399599289452943468926942466370-pybgfJ"
},
"data": {
"id": "1184844",
"format": "text/html",
"content": "<div> analytics impressions </div>"
}
}
]
},
{
"id": "AT:eyJhY3Rpdml0eUlkIjoiNDM0Njg5IiwiZXhwZXJpZW5jZUlkIjoiMCJ9",
"scope": "a4t-test",
"scopeDetails": {
"decisionProvider": "TGT",
"activity": {
"id": "434689"
},
"characteristics": {
"eventToken": "E0gb6q1+WyFW3FMbbQJmrg==",
"analyticsToken": "434689:0:0|32767"
}
},
"items": [
{
"id": "434689",
"schema": "https://ns.adobe.com/personalization/measurement",
"data": {
"type": "click",
"format": "application/vnd.adobe.target.metric"
}
}
]
}
],
"type": "personalization:decisions",
"eventIndex": 0
}
]
}
Les propositions d’activités Form-based Experience Composer peuvent contenir à la fois du contenu et des éléments de mesure de clic sous la même proposition. Ainsi, au lieu d’avoir un seul jeton d’analyse pour l’affichage du contenu dans scopeDetails.characteristics.analyticsToken propriété , ceux-ci peuvent avoir à la fois un jeton d’affichage et un jeton d’analyse de clic spécifiés dans les propriétés scopeDetails.characteristics.analyticsDisplayToken et scopeDetails.characteristics.analyticsClickToken, en conséquence.
{
"requestId": "1234",
"handle": [
{
"payload": [
{
"id": "AT:eyJhY3Rpdml0eUlkIjoiNDM0Njg5IiwiZXhwZXJpZW5jZUlkIjoiMCJ9",
"scope": "a4t-test",
"scopeDetails": {
"decisionProvider": "TGT",
"activity": {
"id": "434689"
},
"experience": {
"id": "0"
},
"strategies": [
{
"algorithmID": "0",
"trafficType": "0"
}
],
"characteristics": {
"displayToken": "2lTS5KA6gj4JuSjOdhqUhGqipfsIHvVzTQxHolz2IpTMromRrB5ztP5VMxjHbs7c6qPG9UF4rvQTJZniWgqbOw==",
"clickToken": "E0gb6q1+WyFW3FMbbQJmrg==",
"analyticsDisplayToken": "434689:0:0|2,434689:0:0|1",
"analyticsClickToken": "434689:0:0|32767"
}
},
"items": [
{
"id": "1184844",
"schema": "https://ns.adobe.com/personalization/html-content-item",
"meta": {
"geo.state": "bucuresti",
"activity.id": "434689",
"experience.id": "0",
"activity.name": "a4t test form based activity",
"offer.id": "1184844",
"profile.tntId": "04608610399599289452943468926942466370-pybgfJ"
},
"data": {
"id": "1184844",
"format": "text/html",
"content": "<div> analytics impressions </div>"
}
},
{
"id": "434689",
"schema": "https://ns.adobe.com/personalization/measurement",
"data": {
"type": "click",
"format": "application/vnd.adobe.target.metric"
}
}
]
}
],
"type": "personalization:decisions",
"eventIndex": 0
}
]
}
Toutes les valeurs de scopeDetails.characteristics.analyticsToken, ainsi que scopeDetails.characteristics.analyticsDisplayToken (pour le contenu affiché) et scopeDetails.characteristics.analyticsClickToken (pour les mesures de clics) sont les payloads A4T qui doivent être collectées et incluses en tant que balise tnta dans l’appel API Data Insertion.
analyticsToken, analyticsDisplayToken et analyticsClickToken peuvent contenir plusieurs jetons, concaténés sous la forme d’une seule chaîne délimitée par des virgules.| code language-javascript |
|---|
|
Exemples de mises en œuvre implementation-examples
Les sous-sections suivantes montrent comment implémenter la journalisation côté client Analytics pour les cas d’utilisation courants.
activités Form-Based Experience Composer form-based-composer
Vous pouvez utiliser l’Platform Web SDK pour contrôler l’exécution des propositions à partir des activités du Compositeur d’expérience d’après les formulaires d’Adobe Target.
Lorsque vous demandez des propositions pour une portée de décision spécifique, la proposition renvoyée contient son jeton d’Analytics approprié. Une bonne pratique consiste à enchaîner la commande Experience Platform Web SDK sendEvent et à effectuer une itération sur les propositions renvoyées pour les exécuter tout en collectant les jetons Analytics en même temps.
Vous pouvez déclencher une commande sendEvent pour une portée d’activité Form-Based Experience Composer comme celle-ci :
alloy("sendEvent", {
"decisionScopes": ["a4t-test"],
"xdm": {
"web": {
"webPageDetails": {
"name": "Home Page"
}
}
}
}
).then(function(results) {
for (var i = 0; i < results.propositions.length; i++) {
//Execute the propositions and collect the Analytics payload
}
});
À partir de là, vous devez implémenter le code pour exécuter les propositions et construire une payload qui sera finalement envoyée à Analytics. Voici un exemple de ce que results.propositions peut contenir :
[
{
"id": "AT:eyJhY3Rpdml0eUlkIjoiNDM0Njg5IiwiZXhwZXJpZW5jZUlkIjoiMCJ9",
"scope": "a4t-test",
"scopeDetails": {
"decisionProvider": "TGT",
"activity": {
"id": "434689"
},
"experience": {
"id": "0"
},
"strategies": [
{
"algorithmID": "0",
"trafficType": "0"
}
],
"characteristics": {
"eventToken": "2lTS5KA6gj4JuSjOdhqUhGqipfsIHvVzTQxHolz2IpTMromRrB5ztP5VMxjHbs7c6qPG9UF4rvQTJZniWgqbOw==",
"analyticsToken": "434689:0:0|2,434689:0:0|1"
}
},
"items": [
{
"id": "1184844",
"schema": "https://ns.adobe.com/personalization/html-content-item",
"meta": {
"geo.state": "bucuresti",
"activity.id": "434689",
"experience.id": "0",
"activity.name": "a4t test form based activity",
"offer.id": "1184844",
"profile.tntId": "04608610399599289452943468926942466370-pybgfJ"
},
"data": {
"id": "1184844",
"format": "text/html",
"content": "<div> analytics impressions </div>"
}
}
]
},
{
"id": "AT:eyJhY3Rpdml0eUlkIjoiNDM0Njg5IiwiZXhwZXJpZW5jZUlkIjoiMCJ9",
"scope": "a4t-test",
"scopeDetails": {
"decisionProvider": "TGT",
"activity": {
"id": "434689"
},
"characteristics": {
"eventToken": "E0gb6q1+WyFW3FMbbQJmrg==",
"analyticsToken": "434689:0:0|32767"
}
},
"items": [
{
"id": "434689",
"schema": "https://ns.adobe.com/personalization/measurement",
"data": {
"type": "click",
"format": "application/vnd.adobe.target.metric"
}
}
]
},
{
"id": "AT:eyJhY3Rpdml0eUlkIjoiNDM0Njg5IiwiZXhwZXJpZW5jZUlkIjoiMCJ9",
"scope": "a4t-test",
"scopeDetails": {
"decisionProvider": "TGT",
"activity": {
"id": "434688"
},
"experience": {
"id": "0"
},
"strategies": [
{
"algorithmID": "0",
"trafficType": "0"
}
],
"characteristics": {
"displayToken": "91TS5KA6gj4JuSjOdhqUhGqipfsIHvVzTQxHolz2IpTMromRrB5ztP5VMxjHbs7c6qPG9UF4rvQTJZniWgqgEt==",
"clickToken": "Tagb6q1+WyFW3FMbbQJrtg==",
"analyticsDisplayTokens": "434688:0:0|2,434688:0:0|1",
"analyticsClickTokens": "434688:0:0|32767"
}
}
},
"items": [
{
"id": "1184845",
"schema": "https://ns.adobe.com/personalization/html-content-item",
"meta": {
"geo.state": "bucuresti",
"activity.id": "434688",
"experience.id": "0",
"activity.name": "a4t test form based activity 1",
"offer.id": "1184845"
},
"data": {
"id": "1184845",
"format": "text/html",
"content": "<div> analytics impressions 1</div>"
}
},
{
"id": "434688",
"schema": "https://ns.adobe.com/personalization/measurement",
"data": {
"type": "click",
"format": "application/vnd.adobe.target.metric"
}
}
]
}
]
Pour extraire le jeton Analytics d’une proposition avec des éléments de contenu, vous pouvez implémenter une fonction similaire à ce qui suit :
function getDisplayAnalyticsPayload(proposition) {
if (!proposition || !proposition.scopeDetails || !proposition.scopeDetails.characteristics) {
return;
}
var characteristics = proposition.scopeDetails.characteristics;
if (characteristics.analyticsDisplayToken) {
return characteristics.analyticsDisplayToken;
}
return characteristics.analyticsToken;
}
Une proposition peut comporter différents types d’éléments, comme indiqué par la propriété schema de l’élément en question. Quatre schémas d'élément de proposition sont pris en charge pour les activités Form-Based Experience Composer :
var HTML_SCHEMA = "https://ns.adobe.com/personalization/html-content-item";
var MEASUREMENT_SCHEMA = "https://ns.adobe.com/personalization/measurement";
var JSON_SCHEMA = "https://ns.adobe.com/personalization/json-content-item";
var REDIRECT_SCHEMA = "https://ns.adobe.com/personalization/redirect-item";
HTML_SCHEMA et JSON_SCHEMA sont les schémas qui reflètent le type de l’offre, tandis que MEASUREMENT_SCHEMA reflète les mesures qui doivent être jointes à un élément DOM.
Analytics payloads pour les mesures de clics doivent être collectées et envoyées aux Analytics séparément des éléments de contenu, au moment où le visiteur clique réellement sur le contenu précédemment affiché.
La fonction d’assistance suivante permettant d’obtenir les payloads A4T des mesures de clic s’avère pratique dans ce cas :
function getClickAnalyticsPayload(proposition) {
if (!proposition || !proposition.scopeDetails || !proposition.scopeDetails.characteristics) {
return;
}
var characteristics = proposition.scopeDetails.characteristics;
if (characteristics.analyticsClickToken) {
return characteristics.analyticsClickToken;
}
return characteristics.analyticsToken;
}
Résumé de la mise en œuvre implementation-summary
En résumé, les étapes suivantes doivent être exécutées lors de l’application d’activités Form-Based Experience Composer avec le Experience Platform Web SDK :
-
envoyer un événement qui récupère Form-Based Experience Composer offres d’activité ;
-
appliquer les modifications du contenu à la page ;
-
Envoyer l’événement de notification
decisioning.propositionDisplay; -
Collectez les jetons d’affichage Analytics à partir de la réponse SDK et construisez une payload pour l’accès Analytics ;
-
Envoyez la payload à Analytics à l’aide de l’API Data Insertion ;
-
Si des mesures de clic sont présentes dans les propositions diffusées, les écouteurs de clic doivent être configurés de sorte que lorsqu’un clic est effectué, il envoie l’événement de notification
decisioning.propositionInteract. Le gestionnaire deonBeforeEventSenddoit être configuré de sorte que, lors de l’interception d’événementsdecisioning.propositionInteract, les actions suivantes se produisent :- Collecte des jetons de Analytics de clics depuis
xdm._experience.decisioning.propositions - Envoi de l’accès au Analytics de clics avec la payload Analytics collectée via API Data Insertion ;
- Collecte des jetons de Analytics de clics depuis
alloy("sendEvent", {
"decisionScopes": ["a4t-test"],
"xdm": {
"web": {
"webPageDetails": {
"name": "Home Page"
}
}
}
}
).then(function(results) {
var analyticsPayload = new Set();
results.propositions.forEach(function (proposition) {
proposition.items.forEach(function (item) {
if (item.schema === HTML_SCHEMA) {
// 1. Apply offer
// 2. Collect executed propositions and send the decisioning.propositionDisplay notification event
// 3. Collect the display Analytics tokens
}
if (item.schema === MEASUREMENT_SCHEMA) {
// Setup click listener, so that when clicked:
// 1. Collect clicked propositions and send the decisioning.propositionInteract notification event
// Note: onBeforeEventSend handler should be configured, so that when intercepting decisioning.propositionInteract events:
// 1. Collect the click Analytics tokens from xdm._experience.decisioning.propositions
// 2. Send the click Analytics hit with the collected Analytics payload via Data Insertion API
}
});
});
// Send the page view Analytics hit with the collected display Analytics payload via Data Insertion API
});
Activités Visual Experience Composer (VEC) visual-experience-composer-acitivties
Le Platform Web SDK vous permet de gérer les offres qui ont été créées à l’aide du compositeur d’expérience visuelle (VEC).
Lorsque le rendu automatique est activé, vous pouvez collecter les jetons Analytics à partir des propositions qui ont été exécutées sur la page. Une bonne pratique consiste à enchaîner la commande Experience Platform Web SDK sendEvent et à effectuer une itération sur les propositions renvoyées pour filtrer celles que le SDK Web a tenté de rendre.
Exemple
alloy("sendEvent", {
"renderDecisions": true,
"xdm": {
"web": {
"webPageDetails": {
"name": "Home Page"
}
}
}
}
).then(function (results) {
var analyticsPayloads = new Set();
for (var i = 0; i < results.propositions.length; i++) {
var proposition = propositions[i];
var renderAttempted = proposition.renderAttempted;
if (renderAttempted === true) {
var analyticsPayload = getDisplayAnalyticsPayload(proposition);
if (analyticsPayload !== undefined) {
analyticsPayloads.add(analyticsPayload);
}
}
}
var analyticsPayloadsToken = concatenateAnalyticsPayloads(analyticsPayloads);
// Send the page view Analytics hit with collected Analytics payload via Data Insertion API
});
Utilisation de onBeforeEventSend pour gérer les mesures de page using-onbeforeeventsend
À l’aide des activités Adobe Target, vous pouvez configurer différentes mesures sur la page, soit manuellement rattachées au modèle DOM, soit automatiquement rattachées au modèle DOM (activités créées par le compositeur d’expérience visuelle). Les deux types correspondent à une interaction différée de l’utilisateur final sur la page web.
Pour en tenir compte, il est recommandé de collecter les payloads Analytics à l’aide du hook de onBeforeEventSend Adobe Experience Platform Web SDK. Le hook onBeforeEventSend doit être configuré à l’aide de la commande configure et est reflété sur tous les événements envoyés par le biais du flux de données.
Voici un exemple de configuration d’onBeforeEventSent pour déclencher des accès Analytics :
alloy("configure", {
datastreamId: "datastream configuration ID",
orgId: "adobe ORG ID",
onBeforeEventSend: function(options) {
const xdm = options.xdm;
const eventType = xdm.eventType;
if (eventType === "decisioning.propositionInteract") {
const analyticsPayloads = new Set();
const propositions = xdm._experience.decisioning.propositions;
for (var i = 0; i < propositions.length; i++) {
var proposition = propositions[i];
analyticsPayloads.add(getClickAnalyticsPayload(proposition));
}
// Trigger the Analytics hit
}
}
});
Étapes suivantes next-steps
Ce guide couvre la journalisation côté client pour les données A4T dans le Platform Web SDK . Pour plus d’informations sur la gestion des données A4T sur Edge Network consultez le guide sur lajournalisation côté serveur .