Dokumentation Target Target Developer Guide

Loggning på klientsidan för A4T-data i Experience Platform Web SDK

Last update: Mon Aug 11 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Ämnen:

Skapat för:

Utvecklare

Med Adobe Experience Platform Web SDK kan du samla in Adobe Analytics for Target-data (A4T) på klientsidan av webbprogrammet.

Loggning på klientsidan innebär att relevanta Target-data returneras på klientsidan, vilket gör att du kan samla in data och dela dem med Analytics. Det här alternativet bör vara aktiverat om du tänker skicka data manuellt till Analytics med API:t för datainfogning.

NOTE

En metod för att utföra detta med AppMeasurement.js håller på att utvecklas och kommer att vara tillgänglig inom den närmaste framtiden.

Det här dokumentet innehåller stegen för konfiguration av A4T-loggning på klientsidan för Platform Web SDK och exempel på implementering för vanliga användningsområden.

Förutsättningar prerequisites

I den här självstudiekursen antas att du är bekant med de grundläggande begreppen och processerna som är kopplade till användningen av Platform Web SDK i personaliseringssyfte. Läs följande dokumentation om du behöver en introduktion:

Konfigurera Analytics-loggning på klientsidan set-up-client-side-logging

I följande underavsnitt beskrivs hur du aktiverar Analytics-loggning på klientsidan för din Platform Web SDK-implementering.

Aktivera loggning på klientsidan för Analytics enable-analytics-client-side-logging

Om du vill ta hänsyn till att Analytics-loggning på klientsidan är aktiverad för din implementering måste du inaktivera Adobe Analytics-konfigurationen i datastream.

Analytics-datastream-konfiguration inaktiverad

Hämta A4T-data från SDK och skicka dem till Analytics a4t-to-analytics

För att den här rapporteringsmetoden ska fungera på rätt sätt måste du skicka A4T-relaterade data som hämtats från kommandot sendEvent i Analytics-träffen.

När Target Edge beräknar ett svar på en offert kontrollerar det om Analytics-loggning på klientsidan är aktiverad (till exempel om Analytics är inaktiverad i din datastream). Om loggning på klientsidan är aktiverad lägger systemet till en Analytics-token i varje förslag i svaret.

Flödet ser ut ungefär så här:

Loggningsflöde på klientsidan

Följande är ett exempel på ett interact-svar när Analytics-loggning på klientsidan är aktiverad. Om förslaget gäller en aktivitet som har Analytics rapporter har det en scopeDetails.characteristics.analyticsToken-egenskap.

{
  "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
    }
  ]
}

Förslag för Form-based Experience Composer-aktiviteter kan innehålla både innehåll och klicka på måttobjekt under samma förslag. I stället för att ha en enda analystoken för visning av innehåll i egenskapen scopeDetails.characteristics.analyticsToken kan de därför ha både en visnings- och en klickanalystoken angiven i egenskaperna scopeDetails.characteristics.analyticsDisplayToken och scopeDetails.characteristics.analyticsClickToken.

{
  "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
    }
  ]
}

Alla värden från scopeDetails.characteristics.analyticsToken samt scopeDetails.characteristics.analyticsDisplayToken (för visat innehåll) och scopeDetails.characteristics.analyticsClickToken (för klickvärden) är de A4T-nyttolaster som måste samlas in och inkluderas som tnta -tagg i API-anropet för datainmatning.

IMPORTANT

Egenskaperna analyticsToken, analyticsDisplayToken, analyticsClickToken kan innehålla flera tokens, sammanfogade som en kommaavgränsad sträng.

I implementeringsexemplen i nästa avsnitt samlas flera Analytics-tokens in iterativt. Om du vill sammanfoga en matris med Analytics-tokens använder du en funktion som ser ut så här:

code language-javascript

code language-javascript
`var concatenateAnalyticsPayloads = function concatenateAnalyticsPayloads(analyticsPayloads) { if (analyticsPayloads.size > 1) { return [].concat(analyticsPayloads).join(','); } return [].concat(analyticsPayloads).join(); };`

var concatenateAnalyticsPayloads = function concatenateAnalyticsPayloads(analyticsPayloads) {
   if (analyticsPayloads.size > 1) {
       return [].concat(analyticsPayloads).join(',');
   }
   return [].concat(analyticsPayloads).join();
};

Exempel på implementering implementation-examples

I följande underavsnitt visas hur du implementerar Analytics-loggning på klientsidan för vanliga användningsfall.

Form-Based Experience Composer aktiviteter form-based-composer

Du kan använda Platform Web SDK för att styra körningen av förslag från Adobe Target Form-Based Experience Composer-aktiviteter.

När du begär förslag för ett specifikt beslutsområde innehåller det returnerade förslaget en lämplig Analytics-token. Det bästa sättet är att kedja kommandot Experience Platform Web SDK sendEvent och iterera genom de returnerade förslagen för att köra dem när Analytics-tokenen samlas in samtidigt.

Du kan utlösa ett sendEvent-kommando för ett Form-Based Experience Composer-aktivitetsomfång så här:

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
  }
});

Härifrån måste du implementera kod för att kunna köra förslagen och skapa en nyttolast som slutligen skickas till Analytics. Detta är ett exempel på vad results.propositions kan innehålla:

[
  {
    "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"
        }
      }
    ]
  }
]

Om du vill extrahera Analytics-token från ett förslag med innehållsobjekt kan du implementera en funktion som liknar följande:

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;
}

Ett förslag kan ha olika typer av objekt, vilket anges av egenskapen schema för det aktuella objektet. Det finns fyra offert-objektscheman som stöds för Form-Based Experience Composer-aktiviteter:

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 och JSON_SCHEMA är de scheman som återspeglar erbjudandets typ, medan MEASUREMENT_SCHEMA speglar de mått som ska bifogas till ett DOM-element.

Analytics nyttolaster för klickmått ska samlas in och skickas till Analytics separat från innehållsobjekten, när besökaren faktiskt klickar på det innehåll som visades tidigare.

Följande hjälpfunktion för att hämta A4T-nyttolasterna för klickmått är användbar i det här fallet:

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;
}

Sammanfattning av implementering implementation-summary

Sammanfattningsvis måste följande steg utföras när Form-Based Experience Composer-aktiviteter används med Experience Platform Web SDK:

Skicka en händelse som hämtar Form-Based Experience Composer aktivitetserbjudanden;
Använda innehållsändringarna på sidan;
Skicka meddelandehändelsen decisioning.propositionDisplay;
Samla in Analytics-visningstoken från SDK-svaret och konstruera en nyttolast för Analytics-träffen;
Skicka nyttolasten till Analytics med API för datainmatning;
Om det finns klickvärden i levererade förslag bör klickavlyssnare ställas in så att när en klickning utförs skickas meddelandehändelsen decisioning.propositionInteract. Hanteraren onBeforeEventSend bör konfigureras så att följande åtgärder inträffar när decisioning.propositionInteract-händelser fångas upp:
1. Samlar in klicktoken Analytics från xdm._experience.decisioning.propositions
2. Skickar klickhändelsen Analytics med den insamlade Analytics-nyttolasten via API för datainmatning;

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) aktiviteter visual-experience-composer-acitivties

Med Platform Web SDK kan du hantera erbjudanden som har skapats med Visual Experience Composer (VEC).

NOTE

Stegen för implementering av det här användningsexemplet liknar mycket stegen för formulärbaserade Experience Composer-aktiviteter. I föregående avsnitt finns mer information.

När automatisk återgivning är aktiverat kan du samla in Analytics-tokens från de förslag som kördes på sidan. Bästa sättet är att kedja kommandot Experience Platform Web SDK sendEvent och iterera genom de returnerade förslagen för att filtrera dem som Web SDK har försökt återge.

Exempel

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
});

Använder `onBeforeEventSend` för att hantera sidmått using-onbeforeeventsend

Med hjälp av Adobe Target-aktiviteter kan du ställa in olika mått på sidan, antingen manuellt kopplade till DOM eller automatiskt kopplade till DOM (VEC-skapade aktiviteter). Båda typerna är en fördröjd användarinteraktion på webbsidan.

För att ta hänsyn till detta är det bästa sättet att samla in Analytics-nyttolaster med hjälp av kroken onBeforeEventSend Adobe Experience Platform Web SDK. Koppeln onBeforeEventSend bör konfigureras med kommandot configure och återspeglas i alla händelser som skickas via datastream.

Följande är ett exempel på hur onBeforeEventSent kan konfigureras för att utlösa Analytics träffar:

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ästa steg next-steps

Den här guiden täcker klientloggning för A4T-data i Platform Web SDK. Mer information om hur du hanterar A4T-data på Edge Network finns i handboken om serverloggning.

recommendation-more-help

6906415f-169c-422b-89d3-7118e147c4e3