Confronta la libreria at.js con Adobe Experience Platform Web SDK
Panoramica
Questo articolo fornisce una panoramica delle differenze tra la libreria at.js
e Experience Platform Web SDK.
Installazione delle librerie
Installazione di at.js
Adobe consente ai clienti di scaricare la libreria direttamente dalla scheda Adobe Experience Cloud, Implementation. La libreria at.js è personalizzata con impostazioni simili a quelle del cliente: clientCode, imsOrgId, ecc.
Installazione del Web SDK
La versione predefinita è disponibile su una rete CDN. Puoi fare riferimento alla libreria sulla rete CDN direttamente sulla tua pagina, oppure scaricarla e ospitarla sulla tua infrastruttura. È disponibile in formati minimizzati e non minimizzati. La versione non minimizzata è utile a scopo di debug.
Per ulteriori informazioni, vedere Installare il Web SDK utilizzando la libreria JavaScript.
Configurazione delle librerie
Configurazione di at.js
Alla fine di ogni file at.js, viene visualizzata una sezione in cui Adobe crea un'istanza e passa un oggetto impostazione. È personalizzabile; al momento del download, Adobe popola tale sezione con le impostazioni correnti del cliente.
window.adobe.target.init(window, document, {
"clientCode": "demo",
"imsOrgId": "",
"serverDomain": "localhost:5000",
"timeout": 2000,
"globalMboxName": "target-global-mbox",
"version": "2.0.0",
"defaultContentHiddenStyle": "visibility: hidden;",
"defaultContentVisibleStyle": "visibility: visible;",
"bodyHiddenStyle": "body {opacity: 0 !important}",
"bodyHidingEnabled": true,
"deviceIdLifetime": 63244800000,
"sessionIdLifetime": 1860000,
"selectorsPollingTimeout": 5000,
"visitorApiTimeout": 2000,
"overrideMboxEdgeServer": false,
"overrideMboxEdgeServerTimeout": 1860000,
"optoutEnabled": false,
"optinEnabled": false,
"secureOnly": false,
"supplementalDataIdParamTimeout": 30,
"authoringScriptUrl": "//cdn.tt.omtrdc.net/cdn/target-vec.js",
"urlSizeLimit": 2048,
"endpoint": "/rest/v1/delivery",
"pageLoadEnabled": true,
"viewsEnabled": true,
"analyticsLogging": "server_side",
"serverState": {},
"decisioningMethod": "server-side",
"legacyBrowserSupport": false
});
Configurazione di Platform Web SDK
La configurazione per SDK viene eseguita con il comando configure
. Il comando configure
è always chiamato per primo.
Come richiedere ed eseguire automaticamente il rendering delle offerte di caricamento pagina Target
Utilizzo di at.js
Utilizzando at.js 2.x, se abiliti l'impostazione pageLoadEnabled,
la libreria attiva una chiamata a Target Edge con execute -> pageLoad
. Se tutte le impostazioni sono impostate sui valori predefiniti, non è necessaria alcuna codifica personalizzata. Una volta aggiunto at.js alla pagina e caricato dal browser, viene eseguita una chiamata Edge Target.
Utilizzo di PLatform Web SDK
Il contenuto creato in Target Compositore esperienza visivo può essere recuperato e renderizzato automaticamente da SDK.
Per richiedere ed eseguire automaticamente il rendering di Target offerte, utilizza il comando sendEvent
e imposta l'opzione renderDecisions
su true.
In questo modo SDK esegue automaticamente il rendering di qualsiasi contenuto personalizzato idoneo per il rendering automatico.
Esempio:
alloy("sendEvent", {
"renderDecisions": true,
"xdm": {
"commerce": {
"order": {
"purchaseID": "a8g784hjq1mnp3",
"purchaseOrderNumber": "VAU3123",
"currencyCode": "USD",
"priceTotal": 999.98
}
}
}
});
Experience Platform Web SDK invia automaticamente una notifica con le offerte eseguite da Platform WEB SDK. Questo è un esempio di come si presenta un payload di richiesta di notifica:
{
"events": [{
"xdm": {
"_experience": {
"decisioning": {
"propositions": [
{
"id": "AT:eyJhY3Rpdml0eUlkIjoiMTI3MDE5IiwiZXhwZXJpZW5jZUlkIjoiMCJ9",
"scope": "cart",
"scopeDetails": {
"decisionProvider": "TGT",
"activity": {
"id": "127019"
},
"experience": {
"id": "0"
},
"strategies": [
{
"step": "entry",
"algorithmID": "0",
"trafficType": "0"
},
{
"step": "display",
"algorithmID": "0",
"trafficType": "0"
}
],
"characteristics": {
"eventToken": "bKMxJ8dCR1XlPfDCx+2vSGqipfsIHvVzTQxHolz2IpSCnQ9Y9OaLL2gsdrWQTvE54PwSz67rmXWmSnkXpSSS2Q=="
}
}
}
]
}
},
"eventType": "display",
"web": {
"webPageDetails": {
"viewName": "cart",
"URL": "https://alloyio.com/personalizationSpa/cart"
},
"webReferrer": {
"URL": ""
}
},
"device": {
"screenHeight": 800,
"screenWidth": 1280,
"screenOrientation": "landscape"
},
"environment": {
"type": "browser",
"browserDetails": {
"viewportWidth": 1280,
"viewportHeight": 284
}
},
"placeContext": {
"localTime": "2021-12-10T15:50:34.467+02:00",
"localTimezoneOffset": -120
},
"timestamp": "2021-12-10T13:50:34.467Z",
"implementationDetails": {
"name": "https://ns.adobe.com/experience/alloy",
"version": "2.6.2",
"environment": "browser"
}
}
}
]
}
Come richiedere ed eseguire il rendering automatico di NOT delle offerte di Page Load Target
Utilizzo di at.js
Esistono due modi per attivare una chiamata ad Edge Target che recupera le offerte per il caricamento della pagina.
Esempio 1:
adobe.target.getOffer({
mbox: "target-global-mbox",
success: console.log,
error: console.error
});
Esempio 2:
adobe.target.getOffers({
request: {
execute: {
pageLoad: {}
}
}
})
.then(console.log)
.catch(console.error);
Utilizzo di Platform Web SDK
Eseguire un comando sendEvent
con un ambito speciale in decisionScopes
: __view__
. Adobe utilizza questo ambito come segnale per recuperare tutte le attività di caricamento pagina da Target e preacquisire tutte le visualizzazioni. Platform Web SDK tenta inoltre di valutare tutte le attività basate sulla visualizzazione del Compositore esperienza visivo. La disabilitazione del recupero preventivo delle visualizzazioni non è attualmente supportata in Platform Web SDK.
Per accedere a qualsiasi contenuto di personalizzazione, puoi fornire una funzione di callback, che verrà chiamata dopo che SDK avrà ricevuto una risposta corretta dal server. Al callback viene fornito un oggetto risultato, che potrebbe contenere una proprietà proposition contenente eventuali contenuti di personalizzazione restituiti.
Esempio:
alloy("sendEvent", {
xdm: {...},
decisionScopes: ["__view__"]
}).then(function(result) {
if (result.propositions) {
result.propositions.forEach(proposition => {
proposition.items.forEach(item => {
if (item.schema === HTML_SCHEMA) {
// manually apply offer
document.getElementById("form-based-offer-container").innerHTML =
item.data.content;
const executedPropositions = [
{
id: proposition.id,
scope: proposition.scope,
scopeDetails: proposition.scopeDetails
}
];
// manually send the display notification event, so that Target/Analytics impressions aare increased
alloy("sendEvent",{
"xdm": {
"eventType": "decisioning.propositionDisplay",
"_experience": {
"decisioning": {
"propositions": executedPropositions
}
}
}
});
}
});
});
}
});
Richiedere mbox di Target basate su moduli specifiche
Utilizzo di at.js
È possibile recuperare le attività utilizzando la funzione getOffer
:
Esempio 1:
adobe.target.getOffer({
mbox: "hero-banner",
success: console.log,
error: console.error
});
Esempio 2:
adobe.target.getOffers({
request: {
execute: {
mboxes: [
{
index: 0,
name: "hero-banner"
}]
}
}
})
.then(console.log)
.catch(console.error);
Utilizzo di Platform Web SDK
È possibile recuperare Form-Based Composer attività basate sul comando sendEvent
e passare i nomi mbox nell'opzione decisionScopes
. Il comando sendEvent
restituisce una promessa che viene risolta con un oggetto contenente le attività/proposte richieste:
Questo frammento di codice è l'aspetto dell'array propositions
:
[
{
"id": "AT:eyJhY3Rpdml0eUlkIjoiNDM0Njg5IiwiZXhwZXJpZW5jZUlkIjoiMCJ9",
"scope": "hero-banner",
"scopeDetails": {
"decisionProvider": "TGT",
"activity": {
"id": "434689"
},
"experience": {
"id": "0"
},
"strategies": [
{
"algorithmID": "0",
"trafficType": "0"
}
],
"characteristics": {
"eventToken": "2lTS5KA6gj4JuSjOdhqUhGqipfsIHvVzTQxHolz2IpTMromRrB5ztP5VMxjHbs7c6qPG9UF4rvQTJZniWgqbOw=="
}
},
"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": "hero-banner",
"scopeDetails": {
"decisionProvider": "TGT",
"activity": {
"id": "434689"
},
"characteristics": {
"eventToken": "E0gb6q1+WyFW3FMbbQJmrg=="
}
},
"items": [
{
"id": "434689",
"schema": "https://ns.adobe.com/personalization/measurement",
"data": {
"type": "click",
"format": "application/vnd.adobe.target.metric"
}
}
]
}
]
Esempio:
alloy("sendEvent", {
xdm: { ...},
decisionScopes: ["hero-banner"]
}).then(function (result) {
var propositions = result.propositions;
if (propositions) {
// Find the discount proposition, if it exists.
for (var i = 0; i < propositions.length; i++) {
var proposition = propositions[i];
for (var j = 0; j < proposition.items; j++) {
var item = proposition.items[j];
if (item.schema === HTML_SCHEMA) {
// apply offer
document.getElementById("form-based-offer-container").innerHTML =
item.data.content;
const executedPropositions = [
{
id: proposition.id,
scope: proposition.scope,
scopeDetails: proposition.scopeDetails
}
];
alloy("sendEvent", {
"xdm": {
"eventType": "decisioning.propositionDisplay",
"_experience": {
"decisioning": {
"propositions": executedPropositions
}
}
}
});
}
}
}
}
});
Come applicare le attività Target
Utilizzo di at.js
È possibile applicare le attività Target utilizzando la funzione applyOffers
: adobe.target.applyOffer(options).
Esempio:
adobe.target.getOffers({...})
.then(response => adobe.target.applyOffers({ response: response }))
.then(() => console.log("Success"))
.catch(error => console.log("Error", error));
Ulteriori informazioni sul comando applyOffers
sono disponibili nella documentazione dedicata.
Utilizzo di Platform Web SDK
È possibile applicare le attività Target utilizzando il comando applyPropositions
.
Esempio:
alloy("applyPropositions", {
propositions: [...]
});
Ulteriori informazioni sul comando applyPropositions
sono disponibili nella documentazione dedicata.
Come tenere traccia degli eventi
Utilizzo di at.js
È possibile tenere traccia degli eventi utilizzando la funzione trackEvent
o utilizzando sendNotifications.
Questa funzione genera una richiesta per segnalare le azioni dell'utente, ad esempio clic e conversioni. Questa funzione non fornisce attività nella risposta.
Esempio 1
adobe.target.trackEvent({
"type": "click",
"mbox": "some-mbox"
});
Esempio 2
adobe.target.sendNotifications({
request: {
notifications: [{
...,
mbox: {
name: "some-mbox"
},
type: "click",
...
}]
}
});
Utilizzo di Platform Web SDK
È possibile tenere traccia degli eventi e delle azioni dell'utente chiamando il comando sendEvent
, popolando _experience.decisioning.propositions
XDM fieldgroup
e impostando eventType
su uno dei due valori seguenti:
decisioning.propositionDisplay
: segnala il rendering dell'attività Target.decisioning.propositionInteract
: segnala un'interazione dell'utente con l'attività, come un clic del mouse.
L'XDM _experience.decisioning.propositions
di fieldgroup
è un array di oggetti. Le proprietà di ciascun oggetto sono derivate da result.propositions
restituito nel comando sendEvent
: { id, scope, scopeDetails }.
Esempio 1 - Traccia un evento decisioning.propositionDisplay
dopo il rendering di un'attività
alloy("sendEvent", {
xdm: {},
decisionScopes: ['discount']
}).then(function(result) {
var propositions = result.propositions;
var discountProposition;
if (propositions) {
// Find the discount proposition, if it exists.
for (var i = 0; i < propositions.length; i++) {
var proposition = propositions[i];
if (proposition.scope === "discount") {
discountProposition = proposition;
break;
}
}
}
if (discountProposition) {
// Find the item from proposition that should be rendered.
// Rather than assuming there a single item that has HTML
// content, find the first item whose schema indicates
// it contains HTML content.
for (var j = 0; j < discountProposition.items.length; j++) {
var discountPropositionItem = discountProposition.items[i];
if (discountPropositionItem.schema === "https://ns.adobe.com/personalization/html-content-item") {
var discountHtml = discountPropositionItem.data.content;
// Render the content
var dailySpecialElement = document.getElementById("daily-special");
dailySpecialElement.innerHTML = discountHtml;
// For this example, we assume there is only a single place to update in the HTML.
break;
}
}
// Send a "decisioning.propositionDisplay" event signaling that the proposition has been rendered.
alloy("sendEvent", {
"xdm": {
"eventType": "decisioning.propositionDisplay",
"_experience": {
"decisioning": {
"propositions": [{
"id": id,
"scope": scope,
"scopeDetails": scopeDetails
}],
"propositionEventType": {
"display": 1
}
}
}
}
});
}
});
Esempio 2 - Traccia un evento decisioning.propositionInteract
dopo che si è verificata una metrica di clic
alloy("sendEvent", {
xdm: { ...},
decisionScopes: ["hero-banner"]
}).then(function (result) {
var propositions = result.propositions;
if (propositions) {
// Find the discount proposition, if it exists.
for (var i = 0; i < propositions.length; i++) {
var proposition = propositions[i];
for (var j = 0; j < proposition.items.length; j++) {
var item = proposition.items[j];
if (item.schema === "https://ns.adobe.com/personalization/measurement") {
// add metric to the DOM element
const button = document.getElementById("form-based-click-metric");
button.addEventListener("click", event => {
const executedPropositions = [
{
id: proposition.id,
scope: proposition.scope,
scopeDetails: proposition.scopeDetails
}
];
// send the click track event
alloy("sendEvent", {
"xdm": {
"eventType": "decisioning.propositionInteract",
"_experience": {
"decisioning": {
"propositions": executedPropositions
}
}
}
});
});
}
}
}
}
});
Esempio 3 - Tracciare un evento generato dopo l'esecuzione di un'azione
Questo esempio tiene traccia di un evento che è stato attivato dopo l’esecuzione di un’azione specifica, ad esempio il clic su un pulsante.
È possibile aggiungere altri parametri personalizzati tramite l'oggetto dati __adobe.target
.
È inoltre possibile aggiungere l'oggetto XDM commerce
.
alloy("sendEvent", {
"xdm": {
"_experience": {
"decisioning": {
"propositions": [
{
"scope": "orderConfirm" //example scope name
}
],
"propositionEventType": {
"display": 1
}
}
},
"eventType": "decisioning.propositionDisplay"
},
"commerce": {
"order": {
"purchaseID": "a8g784hjq1mnp3",
"purchaseOrderNumber": "VAU3123",
"currencyCode": "USD",
"priceTotal": 999.98
}
},
"data": {
"__adobe": {
"target": {
"pageType": "Order Confirmation",
"user.categoryId": "Insurance"
}
}
}
})
Come attivare una modifica della visualizzazione in un'applicazione a pagina singola
Utilizzo di at.js
Utilizzare la funzione adobe.target.triggerView
. È possibile chiamare questa funzione a ogni caricamento di una nuova pagina o quando si esegue di nuovo il rendering di un componente di una pagina. La funzione adobe.target.triggerView()
deve essere implementata affinché le applicazioni a pagina singola utilizzino il Compositore esperienza visiva Visual Experience Composer per creare attività A/B Test e Experience Targeting (XT). Se adobe.target.triggerView()
non è implementato sul sito, non è possibile utilizzare il Compositore esperienza visivo per le applicazioni a pagina singola.
Esempio
adobe.target.triggerView("homeView")
Utilizzo di Platform Web SDK
Per attivare o segnalare un'applicazione a pagina singola View Change, impostare la proprietà web.webPageDetails.viewName
nell'opzione xdm
del comando sendEvent
. Platform Web SDK controlla la cache di visualizzazione. Se sono presenti offerte per viewName
specificate in sendEvent
, le esegue e invia un evento di notifica di visualizzazione.
Esempio
alloy("sendEvent", {
renderDecisions: true,
xdm:{
web:{
webPageDetails:{
viewName: "homeView"
}
}
}
});
Come sfruttare Response Tokens
Il contenuto Personalization restituito da Target include token di risposta. I token di risposta sono dettagli su attività, offerta, esperienza, profilo utente, informazioni geografiche e altro ancora. Questi dettagli possono essere condivisi con strumenti di terze parti o utilizzati per il debug. I token di risposta possono essere configurati nell'interfaccia utente Target.
Utilizzo di at.js
Utilizza gli eventi personalizzati di at.js per ascoltare la risposta Target e leggere i token di risposta.
Esempio
document.addEventListener(adobe.target.event.REQUEST_SUCCEEDED, function(e) {
console.log("Request succeeded", e.detail);
});
Utilizzo di Platform Web SDK
I token di risposta vengono restituiti come parte di propositions
esposti nel risultato del comando sendEvent
. Ogni proposta contiene un array di items,
e ogni elemento ha un oggetto meta
popolato con token di risposta, se abilitati nell'interfaccia utente di amministrazione di Target. Ulteriori informazioni
Esempio
alloy("sendEvent", {
renderDecisions: true,
xdm: {}
}).then(function(result) {
if (result.propositions) {
// Format of result.propositions:
/*
[
{
"id": "",
"scope": "",
"items": [
{
"id": "",
"schema": "",
"data": {},
"meta": { // RESPONSE TOKENS
"activity.name": ...,
"offer.id": ...,
"profile.activeActivities": ...
}
}
],
"scopeDetails": {}
"renderAttempted": false
}
]
*/
}
});
Come gestire la visualizzazione momentanea di altri contenuti
Utilizzo di at.js
Utilizzando at.js puoi gestire la visualizzazione momentanea di altri contenuti impostando bodyHidingEnabled: true
in modo che at.js si occupi di
nascondere anticipatamente i contenitori personalizzati prima che vengano recuperate e applicate le modifiche DOM.
Le sezioni di pagina che contengono contenuto personalizzato possono essere nascoste anticipatamente eseguendo l'override di at.js bodyHiddenStyle.
Per impostazione predefinita bodyHiddenStyle
nasconde l'intero HTML body.
Entrambe le impostazioni possono essere ignorate utilizzando window.targetGlobalSettings.
window.targetGlobalSettings
deve essere inserito prima di caricare at.js.
Utilizzo di Platform Web SDK
Utilizzando Platform Web SDK il cliente può impostare il proprio stile di pre-hiding nel comando di configurazione, come nell'esempio seguente:
alloy("configure", {
datastreamId: "configurationId",
orgId: "orgId@AdobeOrg",
debugEnabled: true,
prehidingStyle: "body { opacity: 0 !important }"
});
Durante il caricamento dell'asincronia Platform Web SDK, Adobe consiglia di inserire il seguente frammento nella pagina prima di inserire Platform Web SDK:
<script>
!function(e,a,n,t){
if (a) return;
var i=e.head;if(i){
var o=e.createElement("style");
o.id="alloy-prehiding",o.innerText=n,i.appendChild(o),
setTimeout(function(){o.parentNode&&o.parentNode.removeChild(o)},t)}}
(document, document.location.href.indexOf("adobe_authoring_enabled") !== -1, "body { opacity: 0 !important }", 3000);
</script>
Come viene gestito A4T
Utilizzo di at.js
Esistono due tipi di registrazione A4T supportati utilizzando at.js:
- Registrazione lato client di Analytics
- Registrazione lato server di Analytics
Registrazione lato client di Analytics
Esempio 1: utilizzo di Target impostazione globale
La registrazione lato client di Analytics può essere abilitata impostando analyticsLogging: client_side
nelle impostazioni at.js o ignorando l'oggetto window.targetglobalSettings
.
Quando questa opzione è impostata, il formato del payload restituito è simile al seguente:
{
"analytics": {
"payload": {
"pe": "tnt",
"tnta": "167169:0:0|0|100,167169:0:0|2|100,167169:0:0|1|100"
}
}
}
Il payload può quindi essere inoltrato a Analytics tramite Data Insertion API.
Esempio 2: configurazione in ogni funzione getOffers
:
adobe.target.getOffers({
request: {
experienceCloud: {
analytics: {
logging: "client_side"
}
},
prefetch: {
mboxes: [{
index: 0,
name: "a1-serverside-xt"
}]
}
}
})
.then(console.log)
Questo frammento di codice mostra l’aspetto del payload di risposta:
{
"prefetch": {
"mboxes": [{
"index": 0,
"name": "a1-serverside-xt",
"options": [{
"content": "<img src=\"http://s7d2.scene7.com/is/image/TargetAdobeTargetMobile/L4242-xt-usa?tm=1490025518668&fit=constrain&hei=491&wid=980&fmt=png-alpha\"/>",
"type": "html",
"eventToken": "n/K05qdH0MxsiyH4gX05/2qipfsIHvVzTQxHolz2IpSCnQ9Y9OaLL2gsdrWQTvE54PwSz67rmXWmSnkXpSSS2Q==",
"responseTokens": {
"profile.memberlevel": "0",
"geo.city": "bucharest",
"activity.id": "167169",
"experience.name": "USA Experience",
"geo.country": "romania"
}
}],
"analytics": {
"payload": {
"pe": "tnt",
"tnta": "167169:0:0|0|100,167169:0:0|2|100,167169:0:0|1|100"
}
}
}]
}
}
Il payload Analytics (tnta
token) deve essere incluso nell'hit Analytics utilizzando API di inserimento dati.
Registrazione lato server di Analytics
La registrazione lato server di Analytics può essere abilitata impostando analyticsLogging: server_side
nelle impostazioni at.js o ignorando l'oggetto window.targetglobalSettings
.
I dati scorrono quindi come segue:
Utilizzo di Platform Web SDK
Il Web SDK supporta inoltre:
- Registrazione lato client di Analytics
- Registrazione lato server di Analytics
Registrazione lato client Analytics
La registrazione lato client di Analytics è abilitata quando Adobe Analytics è disabilitato per la configurazione DataStream.
Il cliente ha accesso al token Analytics (tnta
) che deve essere condiviso con Analytics utilizzando Data Insertion API concatenando il comando sendEvent
e ripetendo l'iterazione nell'array di proposte risultante.
Esempio
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 = results.propositions[i];
var renderAttempted = proposition.renderAttempted;
if (renderAttempted === true) {
var analyticsPayload = getAnalyticsPayload(proposition);
if (analyticsPayload !== undefined) {
analyticsPayloads.add(analyticsPayload);
}
}
}
var analyticsPayloadsToken = concatenateAnalyticsPayloads(analyticsPayloads);
// send the page view Analytics hit with collected Analytics payload using Data Insertion API
});
Ecco un diagramma per mostrare il flusso dei dati quando Analytics Client Side è abilitato:
Registrazione lato server di Analytics
La registrazione lato server di Analytics è abilitata quando Analytics è abilitato per tale configurazione DataStream.
Quando la registrazione lato server Analytics è abilitata, il payload A4T deve essere condiviso con Analytics in modo che il reporting di Analytics mostri le impression corrette e le conversioni condivise a livello di Edge Network, in modo che il cliente non debba eseguire alcuna elaborazione aggiuntiva.
Ecco come fluiscono i dati nei sistemi quando è abilitata la registrazione di Analytics lato server:
Come impostare le impostazioni globali di Target
Utilizzo di at.js
È possibile modificare le impostazioni nella libreria at.js utilizzando window.targetGlobalSettings,
anziché configurare le impostazioni nell'interfaccia utente di Target o utilizzando le API REST.
La sostituzione deve essere definita prima che at.js sia caricato o in Amministrazione > Implementazione > Modifica impostazioni at.js > Impostazioni codice > Intestazione libreria.
Esempio:
window.targetGlobalSettings = {
timeout: 200, // using custom timeout
visitorApiTimeout: 500, // using custom API timeout
enabled: document.location.href.indexOf('https://www.adobe.com') >= 0 // enabled ONLY on adobe.com
};
Utilizzo di Platform Web SDK
Questa funzione non è supportata nel Web SDK.
Come aggiornare gli attributi del profilo Target
Utilizzo di at.js
Esempio 1
adobe.target.getOffer({
mbox: "target-global-mbox",
params: {
"profile.name": "test",
"profile.gender": "female"
},
success: console.log,
error: console.error
});
Esempio 2
adobe.target.getOffers({
request: {
execute: {
pageLoad: {
profileParameters: {
name: "test",
gender: "female"
}
}
}
}
})
.then(console.log)
.catch(console.error);
Utilizzo di Platform Web SDK
Per aggiornare un profilo Target, utilizzare il comando sendEvent
e impostare la proprietà data.__adobe.target
, con prefisso per i nomi delle chiavi profile.
Esempio
alloy("sendEvent", {
renderDecisions: true,
data: {
__adobe: {
target: {
"profile.gender": "female",
"profile.age": 30
}
}
}
});
Come si utilizza Target Recommendations
Utilizzo di at.js
Esempio 1
adobe.target.getOffer({
mbox: "target-global-mbox",
params: {
"entity.name": "T-shirt",
"entity.id": "1234"
},
success: console.log,
error: console.error
});
Esempio 2
adobe.target.getOffers({
request: {
execute: {
pageLoad: {
parameters: {
"entity.name": "T-shirt",
"entity.id": "1234"
}
}
}
}
})
.then(console.log)
.catch(console.error);
Utilizzo di Platform Web SDK
Per inviare i dati di Recommendations, utilizzare il comando sendEvent
e impostare la proprietà data.__adobe.target
, con prefisso per i nomi delle chiavi entity.
Esempio
alloy("sendEvent", {
renderDecisions: true,
data: {
__adobe: {
target: {
"entity.name": "T-shirt",
"entity.id": "1234"
}
}
}
});
Come si utilizzano gli ID di terze parti
Utilizzo di at.js
Utilizzando at.js è possibile inviare mbox3rdPartyId
in diversi modi, utilizzando getOffer,
o getOffers
:
Esempio 1
adobe.target.getOffer({
mbox:"test",
params:{
"mbox3rdPartyId": "1234"
},
success: console.log,
error: console.error
});
Esempio 2
adobe.target.getOffers({
request: {
id:{
thirdPartyId: "1234"
},
execute: {
pageLoad: {}
}
}
})
.then(console.log)
.catch(console.error);
Oppure è possibile impostare mbox3rdPartyId
in targetPageParams
o targetPageParamsAll.
Durante l'impostazione di targetPageParams
, invia le richieste per target-global-mbox
note anche come pag-lLoad
.
Il consiglio deve essere impostato utilizzando targetPageParamsAll
in quanto verrà inviato in ogni richiesta di Target. Il vantaggio dell'utilizzo di targetPageParamsAll
è che è possibile definire mbox3rdPartyId
sulla pagina una volta per assicurarsi che tutte le Target richieste abbiano il diritto mbox3rdPartyId.
window.targetPageParamsAll = function() {
return {
"mbox3rdPartyId": "1234"
};
};
window.targetPageParams = function() {
return {
"mbox3rdPartyId": "1234"
};
};
Utilizzo di Platform Web SDK
Platform Web SDK supporta Target ID di terze parti. Tuttavia, richiede alcuni passaggi aggiuntivi.
Identity Map consente ai clienti di inviare più identità. Tutte le identità sono namespace. Ogni spazio dei nomi può avere una o più identità. Una particolare identità può essere contrassegnata come primaria. Tenendo conto di queste informazioni, puoi visualizzare i passaggi necessari per impostare Platform Web SDK per l'utilizzo dell'ID di terze parti Target.
- Imposta lo spazio dei nomi che contiene l'ID di terze parti Target nella pagina di configurazione dello stream di dati:
- Invia lo spazio dei nomi dell'identità in ogni comando
sendEvent
come segue:
alloy("sendEvent", {
"renderDecisions": true,
"xdm": {
"identityMap": {
"TGT3PID": [
{
"id": "1234",
"primary": true
}
]
}
}
});
Come si impostano i token di proprietà
Utilizzo di at.js
Utilizzando at.js è possibile configurare i token di proprietà in due modi, utilizzando targetPageParams
o targetPageParamsAll.
Utilizzando targetPageParams
il token di proprietà viene aggiunto alla chiamata target-global-mbox
, ma utilizzando targetPageParamsAll
il token viene aggiunto a tutte le chiamate Target:
Esempio 1
window.targetPageParamsAll = function() {
return {
"at_property": "1234"
};
};
Esempio 2
window.targetPageParams = function() {
return {
"at_property": "1234"
};
};
Utilizzo di Platform Web SDK
Utilizzando Platform Web SDK i clienti possono impostare la proprietà a un livello più alto, durante la configurazione dello stream di dati, nello spazio dei nomi Adobe Target:
Ciò significa che ogni chiamata Target per quella specifica configurazione del flusso di dati contiene quel token di proprietà.
Come posso preacquisire gli elementi mbox
Utilizzo di at.js
Questa funzionalità è disponibile solo in at.js 2.x. In at.js 2.x è presente una nuova funzione denominata getOffers
. La funzione getOffers
consente ai clienti di preacquisire il contenuto per una o più mbox. Ecco un esempio:
adobe.target.getOffers({
request: {
prefetch: {
mboxes: [{
index: 0,
name: "test-mbox",
parameters: {
...
},
profileParameters: {
...
}
}]
}
}
})
.then(console.log)
.catch(console.error);
mbox
nell'array mboxes
abbia il proprio indice. Di solito la prima mbox ha index=0
la successiva index=1,
e così via.Utilizzo di Platform Web SDK
Questa funzionalità non è attualmente supportata in Platform Web SDK.
Come si esegue il debug dell'implementazione di Target
Utilizzo di at.js
La libreria at.js espone le seguenti funzioni di debug:
- Disabilita mbox: disabilita il recupero e il rendering di Target per verificare se la pagina è interrotta senza Target interazioni
- Debug mbox: at.js registra ogni azione
- Traccia di destinazione: con un token di traccia mbox generato in un oggetto di traccia con dettagli che hanno partecipato al processo decisionale, è disponibile nell'oggetto
window.___target_trace
.
Utilizzo di Platform Web SDK
Sono disponibili più funzionalità di debug quando si utilizza Platform Web SDK:
- Utilizzo di Assurance
- Debug di Web SDK abilitato
- Utilizza hook di monitoraggio di Web SDK
- Usa Adobe Experience Platform Debugger
- Traccia di destinazione