- Panoramica di Platform Web SDK
- Nozioni di base
- Identità
- Raccolta dati
- Personalizzazione
- Consenso
- Estensione tag Web SDK
- Note sulla versione
- Domande frequenti
- Risorse
Confronto della libreria at.js con Web SDK
Panoramica
Questo articolo fornisce una panoramica delle differenze tra at.js e Experience Platform Web SDK.
Installazione delle librerie
Installazione di at.js
Consentiamo ai nostri clienti di scaricare la libreria direttamente da Adobe Experience Cloud, nella scheda Implementazione. La libreria at.js è personalizzata con impostazioni simili a quelle del cliente: clientCode, imsOrgId, ecc.
Installazione di 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.
Struttura URL: https://cdn1.adoberesources.net/alloy/[VERSIONE]/alloy.min.js OR alloy.js per la versione non minimizzata.
Ad esempio:
- Minimizzato: https://cdn1.adoberesources.net/alloy/2.14.0/alloy.min.js
- Non minimizzato: https://cdn1.adoberesources.net/alloy/2.14.0/alloy.js
Configurazione delle librerie
Configurazione di at.js
Alla fine di ogni file at.js, troverai una sezione in cui creiamo un’istanza e trasmettiamo un oggetto impostazione. È personalizzabile, al momento del download viene compilata 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 del Web SDK
La configurazione per l'SDK viene eseguita con configure comando.
configure è sempre il primo comando chiamato.
Esempio:
alloy("configure", {
"edgeConfigId": "ebebf826-a01f-4458-8cec-ef61de241c93",
"orgId":"ADB3LETTERSANDNUMBERS@AdobeOrg"
});
È possibile impostare molte opzioni durante la configurazione. Di seguito sono riportate tutte le opzioni, raggruppate per categoria.
Come richiedere ed eseguire il rendering automatico delle offerte di Page Load Target
Utilizzo di at.js
Con at.js 2.x, se abiliti l’impostazione pageLoadEnabled, la libreria attiverà una chiamata a Target Edge con execute -> pageLoad. Se tutte le impostazioni sono impostate sui valori predefiniti, non è necessaria alcuna codifica personalizzata. Una volta che at.js viene aggiunto alla pagina e caricato dal browser, viene eseguita una chiamata Target Edge.
Utilizzo di Web SDK
Contenuto creato in Adobe Target Compositore esperienza visivo può essere recuperato e renderizzato automaticamente dall’SDK.
Per richiedere ed eseguire automaticamente il rendering delle offerte Target, utilizza sendEvent e impostare renderDecisions opzione per true. In questo modo l’SDK deve eseguire 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
}
}
}
});
Experienci Platform Web SDK invia automaticamente una notifica con le offerte eseguite dall’SDK WEB. Di seguito è riportato un esempio di payload per una 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 e NON eseguire automaticamente il rendering delle offerte di Page Load Target
Utilizzo di at.js
È possibile attivare una chiamata a Target Edge in due modi per recuperare 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 Web SDK
Eseguire un sendEvent comando con ambito speciale in decisionScopes: __view__. Questo ambito viene utilizzato come segnale per recuperare tutte le attività di caricamento della pagina da Target e preacquisire tutte le visualizzazioni. L’SDK per web tenterà inoltre di valutare tutte le attività basate sulla visualizzazione del Compositore esperienza visivo. La disattivazione del preacquisizione delle visualizzazioni non è attualmente supportata in Web SDK.
Per accedere a qualsiasi contenuto di personalizzazione, puoi fornire una funzione di callback che verrà chiamata dopo che l’SDK avrà ricevuto una risposta corretta dal server. Al callback viene fornito un oggetto risultato, che può 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
Puoi recuperare le attività del Compositore basato su moduli utilizzando getOffer funzione:
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 Web SDK
Puoi recuperare le attività basate su Compositore basato su moduli utilizzando sendEvent e passando i nomi mbox sotto il decisionScopes opzione. Il sendEvent Il comando restituirà una promessa che viene risolta con un oggetto contenente le attività/proposte richieste: in questo modo il propositions l'array ha un aspetto simile a:
[
{
"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
}
}
}
});
}
}
}
}
});
Applicare le attività Target
Utilizzo di at.js
Puoi applicare le attività Target utilizzando applyOffers funzione: 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 su applyOffers comando da documentazione dedicata.
Utilizzo di Web SDK
Puoi applicare le attività Target utilizzando applyPropositions comando.
Esempio:
alloy("applyPropositions", {
propositions: [...]
});
Ulteriori informazioni su applyPropositions comando da documentazione dedicata.
Come tenere traccia degli eventi
Utilizzo di at.js
È possibile tenere traccia degli eventi utilizzando trackEvent funzione o utilizzo di sendNotifications.
Questa funzione genera una richiesta per segnalare le azioni dell'utente, ad esempio clic e conversioni. 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 Web SDK
Puoi tenere traccia degli eventi e delle azioni degli utenti chiamando il sendEvent comando, popolamento _experience.decisioning.propositions Gruppo di campi XDM e impostazione della eventType a uno dei 2 valori:
decisioning.propositionDisplay: segnala il rendering dell’attività Target.decisioning.propositionInteract: segnala un’interazione dell’utente con l’attività, come un clic del mouse.
Il _experience.decisioning.propositions Il gruppo di campi XDM è un array di oggetti. Le proprietà di ciascun oggetto sono derivate dal result.propositions che viene restituito nel sendEvent comando: { id, scope, scopeDetails }
Esempio 1 - Traccia a 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: discountProposition.id,
scope: discountProposition.scope,
scopeDetails: discountProposition.scopeDetails
}
]
}
}
}
});
}
});
Esempio 2 - Traccia a decisioning.propositionInteract evento dopo la comparsa di 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
}
}
}
});
});
}
}
}
}
});
Come attivare una modifica della visualizzazione in un'applicazione a pagina singola
Utilizzo di at.js
Utilizza il adobe.target.triggerView funzione. È 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. È necessario implementare adobe.target.triggerView() per le applicazioni a pagina singola (SPA) per utilizzare il Compositore esperienza visiva per creare test A/B e attività di targeting delle esperienze (XT). Se adobe.target.triggerView() non è implementato sul sito, non è possibile utilizzare il Compositore esperienza visivo per l’SPA.
Esempio
adobe.target.triggerView("homeView")
Utilizzo di Web SDK
Per attivare o segnalare la modifica della visualizzazione di un'applicazione a pagina singola, impostare web.webPageDetails.viewName proprietà sotto xdm opzione del sendEvent comando. Web SDK controllerà la cache di visualizzazione se sono presenti offerte per viewName specificato in sendEvent le eseguirà e invierà un evento di notifica display.
Esempio
alloy("sendEvent", {
renderDecisions: true,
xdm:{
web:{
webPageDetails:{
viewName: "homeView"
}
}
}
});
Come sfruttare i token di risposta
Il contenuto di personalizzazione restituito da Adobe Target include token di risposta, ovvero dettagli sull’attività, l’offerta, l’esperienza, il profilo utente, le 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 di Adobe Target.
Utilizzo di at.js
Utilizza gli eventi personalizzati di at.js per ascoltare la risposta di 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 Web SDK
Assicurati di utilizzare Platform Web SDK versione 2.6.0 o successiva.
I token di risposta vengono restituiti come parte del propositions che sono esposti nel risultato del sendEvent comando. Ogni proposta contiene un array di items, e ogni elemento avrà un meta oggetto popolato con Token di risposta se abilitato 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 sia quello che si occuperebbe di nascondere anticipatamente i contenitori personalizzati prima che recuperi e applichi le modifiche DOM.
Le sezioni di pagina che contengono contenuto personalizzato possono essere pre-nascoste escludendo 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 Web SDK
Utilizzando Web SDK, il cliente può impostare il proprio stile di pre-hiding nel comando di configurazione, come nell’esempio seguente:
alloy("configure", {
edgeConfigId: "configurationId",
orgId: "orgId@AdobeOrg",
debugEnabled: true,
prehidingStyle: "body { opacity: 0 !important }"
});
Quando si carica l’SDK Web in modalità asincrona, si consiglia di inserire il seguente snippet nella pagina prima di inserire l’SDK Web:
<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 2 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 dell’impostazione globale di Target
La registrazione lato client di Analytics può essere abilitata impostando analyticsLogging: client_side nelle impostazioni at.js o eseguendo l’override di window.targetglobalSettings oggetto.
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 ad Analytics tramite l’API di inserimento dati.
Esempio 2: configurarlo in ogni getOffers funzione:
adobe.target.getOffers({
request: {
experienceCloud: {
analytics: {
logging: "client_side"
}
},
prefetch: {
mboxes: [{
index: 0,
name: "a1-serverside-xt"
}]
}
}
})
.then(console.log)
Ecco come si presenta il 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 di Analytics (tnta token) devono essere inclusi nell'hit di Analytics utilizzando API di inserimento dati.
Registrazione lato server di Analytics
La registrazione lato server di Analytics può essere attivata impostando analyticsLogging: server_side nelle impostazioni at.js o eseguendo l’override di window.targetglobalSettings oggetto.
I dati scorrono quindi come segue:
Utilizzo di Web SDK
L’SDK per web supporta anche:
- Registrazione lato client di Analytics
- Registrazione lato server di Analytics
Registrazione lato client di Analytics
La funzione di registrazione lato client di Analytics è abilitata quando Adobe Analytics è disabilitata per tale configurazione di DataStream.
Il cliente ha accesso al token di Analytics (tnta) che deve essere condiviso con Analytics tramite API di inserimento dati
in mediante concatenamento sendEvent e iterazione attraverso l’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 è abilitato Analytics Client Side:
Registrazione lato server di Analytics
La funzione di registrazione lato server di Analytics è abilitata quando Analytics è abilitata per tale configurazione di DataStream.
Quando la registrazione Analytics lato server è abilitata, il payload A4T che deve essere condiviso con Analytics in modo che i rapporti di Analytics mostrino le impression e le conversioni corrette venga condiviso a livello di rete Edge, in modo che il cliente non debba eseguire alcuna elaborazione aggiuntiva.
Ecco come fluiscono i dati nei nostri sistemi quando è abilitata la registrazione di Analytics lato server:
Come impostare le impostazioni globali di Target
Utilizzo di at.js
Puoi sovrascrivere le impostazioni nella libreria at.js utilizzandowindow.targetGlobalSettings, anziché configurare le impostazioni nell’interfaccia utente di Target Standard/Premium 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 Web SDK
Questa funzione non è supportata in Web SDK.
Come aggiornare gli attributi del profilo di 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 Web SDK
Per aggiornare un profilo Target, utilizza sendEvent e impostare data.__adobe.target prefisso dei nomi delle chiavi tramite 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 Web SDK
Per inviare i dati dei consigli, utilizza sendEvent e impostare data.__adobe.target prefisso dei nomi delle chiavi tramite 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, 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 esiste un modo per impostare mbox3rdPartyId in targetPageParams o targetPageParamsAll.
Quando lo si imposta in targetPageParams, verrà inviato nelle richieste di target-global-mbox noto anche come pag-lLoad.
Il consiglio deve essere impostato utilizzando targetPageParamsAll in quanto verrà inviato in ogni richiesta di target.
Il vantaggio di utilizzare targetPageParamsAll è che puoi definire la mbox3rdPartyId sulla pagina una volta e in questo modo tutte le richieste target avranno il diritto mbox3rdPartyId.
window.targetPageParamsAll = function() {
return {
"mbox3rdPartyId": "1234"
};
};
window.targetPageParams = function() {
return {
"mbox3rdPartyId": "1234"
};
};
Utilizzo di Web SDK
SDK per web supporta l’ID di terze parti di Target. Tuttavia, richiede alcuni passaggi aggiuntivi. Prima di addentrarci nella soluzione, dovremmo parlare un po' di identityMap.
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, possiamo vedere quali sono i passaggi necessari per impostare l’SDK web per utilizzare l’ID di terze parti di Target.
- Imposta lo spazio dei nomi che conterrà l’ID di terze parti di Target nella vista Configurazione del flusso 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 sono disponibili 2 modi per impostare i token di proprietà, utilizzando targetPageParams o targetPageParamsAll. Utilizzo di targetPageParams aggiunge il token di proprietà al target-global-mbox chiama, ma utilizzando targetPageParamsAll aggiunge il token 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 Web SDK
Utilizzando Web SDK i clienti possono impostare la proprietà a un livello più alto, durante la configurazione del flusso di dati, in Adobe Target namespace:
Ciò significa che ogni chiamata di Target per quella specifica configurazione di Flusso di dati conterrà quel token di proprietà.
Come posso preacquisire gli elementi mbox
Utilizzo di at.js
Questa funzionalità è disponibile solo in at.js 2.x. at.js 2.x ha una nuova funzione denominata getOffers. 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);
NOTA: si consiglia vivamente di garantire che ogni mbox nel mboxes l'array dispone di un proprio indice. Di solito la prima mbox ha index=0, il prossimo index=1, ecc.
Utilizzo di Web SDK
Questa funzionalità non è attualmente supportata in Web SDK.
Come si esegue il debug dell’implementazione di Target
Utilizzo di at.js
At.js espone le seguenti funzioni di debug:
- Mbox Disable (Disabilita mbox): disabilita il recupero e il rendering di Target per verificare se la pagina è interrotta senza le interazioni di Target
- Debug mbox: at.js registra ogni azione
- Traccia di Target: con un token di traccia mbox generato in Bullseye, un oggetto di traccia con i dettagli che hanno partecipato al processo decisionale è disponibile in
window.___target_traceoggetto
Nota: tutte queste funzioni di debug sono disponibili con funzionalità avanzate in Adobe Experience Platform Debugger
Utilizzo di Web SDK
Sono disponibili più funzionalità di debug quando si utilizza Web SDK:
- Utilizzo di Assurance
- Debug di Web SDK abilitato
- Utilizzare Hook di monitoraggio di Web SDK
- Utilizzare Adobe Experience Platform Debugger
- Traccia di destinazione
Risorse Business.Adobe.com
Risorse
Account Adobe
