Client-seitige Protokollierung für A4T-Daten im Experience Platform Web SDK
Mit dem Adobe Experience Platform Web SDK können Sie Daten von Adobe Analytics for Target (A4T Client-seitig in Ihrer Web-Anwendung erfassen.
Client-seitige Protokollierung bedeutet, dass relevante Target-Daten Client-seitig zurückgegeben werden, sodass Sie Daten erfassen und für Analytics freigeben können. Diese Option sollte aktiviert werden, wenn Sie Daten manuell über die „Data Insertion " an Analyticsmöchten.
In diesem Dokument werden die Schritte zum Einrichten der Client-seitigen A4T-Protokollierung für die Platform Web SDK beschrieben und Implementierungsbeispiele für gängige Anwendungsfälle bereitgestellt.
Voraussetzungen prerequisites
In diesem Tutorial wird davon ausgegangen, dass Sie mit den grundlegenden Konzepten und Prozessen der Verwendung des Platform Web SDK zu Personalisierungszwecken vertraut sind. Lesen Sie die folgende Dokumentation, wenn Sie eine Einführung benötigen:
Einrichten Analytics Client-seitigen Protokollierung set-up-client-side-logging
In den folgenden Unterabschnitten wird beschrieben, wie Sie Analytics Client-seitige Protokollierung für Ihre Platform Web SDK-Implementierung aktivieren.
Aktivieren Analytics Client-seitigen Protokollierung enable-analytics-client-side-logging
Um Analytics Client-seitige Protokollierung für Ihre Implementierung aktivieren zu können, müssen Sie die Adobe Analytics-Konfiguration in Ihrem Datenstrom“.
Abrufen A4T Daten aus der SDK und Senden an Analytics a4t-to-analytics
Damit diese Berichtsmethode ordnungsgemäß funktioniert, müssen Sie die A4T Daten senden, die mit dem sendEvent-Befehl im Analytics-Treffer abgerufen wurden.
Wenn Target Edge eine Vorschlagsantwort berechnet, prüft es, ob Analytics Client-seitige Protokollierung aktiviert ist (z. B. wenn Analytics in Ihrem Datenstrom deaktiviert ist). Wenn die Client-seitige Protokollierung aktiviert ist, fügt das System jedem Vorschlag in der Antwort ein Analytics-Token hinzu.
Der Fluss sieht in etwa wie folgt aus:
Im Folgenden finden Sie ein Beispiel für eine interact-Antwort, wenn Analytics Client-seitige Protokollierung aktiviert ist. Wenn sich der Vorschlag auf eine Aktivität mit Analytics Berichtsfunktion bezieht, weist er eine scopeDetails.characteristics.analyticsToken Eigenschaft auf.
{
"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
}
]
}
Vorschläge für Form-based Experience Composer Aktivitäten können unter demselben Vorschlag sowohl Inhalts- als auch Klick-Metrik-Elemente enthalten. Anstatt also ein einzelnes Analytics-Token für die Inhaltsanzeige in scopeDetails.characteristics.analyticsToken Eigenschaft zu haben, können diese entsprechend sowohl ein Anzeige- als auch ein Klick-Analytics-Token in den scopeDetails.characteristics.analyticsDisplayToken- und scopeDetails.characteristics.analyticsClickToken-Eigenschaften angegeben haben.
{
"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
}
]
}
Alle Werte aus scopeDetails.characteristics.analyticsToken sowie scopeDetails.characteristics.analyticsDisplayToken (für angezeigte Inhalte) und scopeDetails.characteristics.analyticsClickToken (für Klickmetriken) sind die A4T-Payloads, die erfasst und als tnta-Tag in den Aufruf Dateneinfüge-API aufgenommen werden müssen.
analyticsToken-, analyticsDisplayToken- analyticsClickToken -Eigenschaften können mehrere Token enthalten, die als einzelne, durch Kommas getrennte Zeichenfolge verkettet sind.| code language-javascript |
|---|
|
Implementierungsbeispiele implementation-examples
Die folgenden Unterabschnitte zeigen, wie Sie Analytics Client-seitige Protokollierung für gängige Anwendungsfälle implementieren.
Form-Based Experience Composer Aktivitäten form-based-composer
Sie können die Platform Web SDK verwenden, um die Ausführung von Vorschlägen aus Adobe Target Form-Based Experience Composer-Aktivitäten zu steuern.
Wenn Sie Vorschläge für einen bestimmten Entscheidungsumfang anfordern, enthält der zurückgegebene Vorschlag das entsprechende Analytics-Token. Best Practice ist es, den Experience Platform Web SDK sendEvent-Befehl zu verketten und durch die zurückgegebenen Vorschläge zu iterieren, um sie auszuführen, während gleichzeitig die Analytics-Token erfasst werden.
Sie können einen sendEvent-Befehl für einen Form-Based Experience Composer Aktivitätsbereich wie den folgenden Trigger ausführen:
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
}
});
Von hier aus müssen Sie Code implementieren, um die Vorschläge auszuführen und eine Payload zu erstellen, die letztendlich an Analytics gesendet wird. Dies ist ein Beispiel dafür, was results.propositions enthalten könnte:
[
{
"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"
}
}
]
}
]
Um das Analytics-Token aus einem Vorschlag mit Inhaltselementen zu extrahieren, können Sie eine Funktion ähnlich der folgenden implementieren:
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;
}
Ein Vorschlag kann verschiedene Arten von Elementen aufweisen, wie in der schema Eigenschaft des betreffenden Elements angegeben. Für Form-Based Experience Composer Aktivitäten werden vier Schemata für Vorschlagselemente unterstützt:
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 und JSON_SCHEMA sind die Schemata, die den Typ des Angebots widerspiegeln, während MEASUREMENT_SCHEMA die Metriken widerspiegeln, die an ein DOM-Element angehängt werden sollen.
Analytics Payloads für Klickmetriken sollten erfasst und getrennt von Inhaltselementen an Analytics gesendet werden, und zwar zu dem Zeitpunkt, zu dem der Besucher tatsächlich auf den zuvor angezeigten Inhalt klickt.
Die folgende Hilfsfunktion zum Abrufen der Klickmetrik von A4T-Payloads ist in diesem Fall praktisch:
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;
}
Zusammenfassung der Implementierung implementation-summary
Zusammenfassend lässt sich sagen, dass beim Anwenden Form-Based Experience Composer Aktivitäten mit dem Experience Platform Web SDK die folgenden Schritte ausgeführt werden müssen:
-
Senden eines Ereignisses, das Form-Based Experience Composer Aktivitätsangebote abruft;
-
Anwenden der Inhaltsänderungen auf die Seite
-
Senden des
decisioning.propositionDisplayBenachrichtigungsereignisses; -
Erfassen Sie die Analytics Display-Token aus der SDK-Antwort und erstellen Sie eine Payload für den Analytics.
-
Senden der Payload an Analytics mithilfe der Dateneinfüge-API;
-
Wenn in den zugestellten Vorschlägen Klickmetriken vorhanden sind, sollten Klick-Listener so eingerichtet werden, dass bei einem Klick das
decisioning.propositionInteractBenachrichtigungsereignis gesendet wird. DeronBeforeEventSend-Handler sollte so konfiguriert sein, dass beim Abfangendecisioning.propositionInteractEreignisse die folgenden Aktionen auftreten:- Erfassen der Klick-Analytics-Token aus
xdm._experience.decisioning.propositions - Senden des Klick-Analytics-Treffers mit der erfassten Analytics-Payload über die Dateneinfüge-API;
- Erfassen der Klick-Analytics-Token aus
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
});
Visual Experience Composer (VEC)-Aktivitäten visual-experience-composer-acitivties
Mit dem Platform Web SDK können Sie Angebote verarbeiten, die mit Visual Experience Composer (VEC) erstellt wurden.
Wenn das automatische Rendering aktiviert ist, können Sie die Analytics Token aus den Vorschlägen erfassen, die auf der Seite ausgeführt wurden. Best Practice ist es, den Experience Platform Web SDK sendEvent-Befehl zu verketten und durch die zurückgegebenen Vorschläge zu iterieren, um die Vorschläge zu filtern, die Web SDK gerendert haben soll.
Beispiel
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
});
Verwenden von onBeforeEventSend zur Verarbeitung von Seitenmetriken using-onbeforeeventsend
Mithilfe Adobe Target Aktivitäten können Sie verschiedene Metriken auf der Seite einrichten, entweder manuell an das DOM angehängt oder automatisch an das DOM angehängt (von VEC erstellte Aktivitäten). Bei beiden Typen handelt es sich um eine verzögerte Endbenutzerinteraktion auf der Web-Seite.
Daher empfiehlt es sich, Analytics Payloads mithilfe des onBeforeEventSend-Adobe Experience Platform Web SDK-Hooks zu erfassen. Der onBeforeEventSend-Hook sollte mit dem configure-Befehl konfiguriert werden und wird für alle Ereignisse übernommen, die über den Datenstrom gesendet werden.
Im Folgenden finden Sie ein Beispiel dafür, wie onBeforeEventSent so konfiguriert werden können, dass der Trigger Analytics Treffer gelangt:
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
}
}
});
Nächste Schritte next-steps
In diesem Handbuch wurde die Client-seitige Protokollierung für A4T-Daten im Platform Web SDK behandelt. Weitere Informationen zum Umgang mit 4T-Daten in Edge Network findenim Handbuch zur Server-seitigen Protokollierung.