Este artigo fornece uma visão geral das diferenças entre os at.js
e o SDK da Web da Experience Platform.
Nós permitimos que nossos clientes baixem a biblioteca diretamente do Adobe Experience Cloud, guia Implementação. A biblioteca at.js é personalizada com as configurações desejadas pelo cliente: clientCode, imsOrgId etc.
A versão pré-criada está disponível em um CDN. Você pode fazer referência à biblioteca no CDN diretamente na sua página ou baixá-la e hospedá-la em sua própria infraestrutura. Ele está disponível em formatos minificados e não minificados. A versão não minificada é útil para fins de depuração.
Estrutura do URL: https://cdn1.adoberesources.net/alloy/[VERSÃO]/alloy.min.js OU alloy.js para a versão não minificada.
Por exemplo:
Ao final de cada arquivo at.js, você encontrará uma seção na qual instanciamos e passamos um objeto de configuração. É personalizável. No download, preenchemos essa seção com as configurações atuais do 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
});
A configuração do SDK é feita com a variável configure
comando.
configure
é always o primeiro comando chamado.
Exemplo:
alloy("configure", {
"edgeConfigId": "ebebf826-a01f-4458-8cec-ef61de241c93",
"orgId":"ADB3LETTERSANDNUMBERS@AdobeOrg"
});
Há muitas opções que podem ser definidas durante a configuração. Todas as opções podem ser encontradas abaixo, agrupadas por categoria.
Uso da at.js 2.x, se você ativar a configuração pageLoadEnabled
, a biblioteca acionará uma chamada para o Target Edge com execute -> pageLoad
. Se todas as configurações estiverem definidas com os valores padrão, nenhuma codificação personalizada será necessária.Depois que a at.js for adicionada à página e carregada pelo navegador, uma chamada do Target Edge será executada.
Conteúdo criado no Adobe Target Visual Experience Composer pode ser recuperada e renderizada automaticamente pelo SDK.
Para solicitar e renderizar ofertas do Target automaticamente, use a variável sendEvent
e defina o renderDecisions
para true
. Isso força o SDK a renderizar automaticamente qualquer conteúdo personalizado elegível para renderização automática.
Exemplo:
alloy("sendEvent", {
"renderDecisions": true,
"xdm": {
"commerce": {
"order": {
"purchaseID": "a8g784hjq1mnp3",
"purchaseOrderNumber": "VAU3123",
"currencyCode": "USD",
"priceTotal": 999.98
}
}
}
});
O SDK da Web do Experience Platform envia automaticamente uma notificação com as ofertas que foram executadas pelo SDK da WEB. Este é um exemplo de como a carga da solicitação de notificação se parece com:
{
"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"
}
}
}
]
}
Há duas maneiras de disparar uma chamada para o Target Edge que buscará ofertas para carregamento de página.
Exemplo 1:
adobe.target.getOffer({
mbox: "target-global-mbox",
success: console.log,
error: console.error
});
Exemplo 2:
adobe.target.getOffers({
request: {
execute: {
pageLoad: {}
}
}
})
.then(console.log)
.catch(console.error);
Executar um sendEvent
comando com escopo especial em decisionScopes
: __view__
. Usamos esse escopo como um sinal para buscar todas as atividades de carregamento de página do Target e realizar uma busca prévia em todas as exibições. O SDK da Web também tentará avaliar todas as atividades baseadas na visualização do VEC. No momento, não há suporte para desativar a pré-busca da visualização no SDK da Web.
Para acessar qualquer conteúdo de personalização, você pode fornecer uma função de retorno de chamada, que será chamada depois que o SDK receber uma resposta bem-sucedida do servidor. O retorno de chamada é fornecido como um objeto de resultado, que pode conter propriedades de propostas contendo qualquer conteúdo de personalização retornado.
Exemplo:
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
}
}
}
});
}
});
});
}
});
Você pode buscar atividades do Criador baseado em formulário usando o getOffer
função:
Exemplo 1:
adobe.target.getOffer({
mbox: "hero-banner",
success: console.log,
error: console.error
});
Exemplo 2:
adobe.target.getOffers({
request: {
execute: {
mboxes: [
{
index: 0,
name: "hero-banner"
}]
}
}
})
.then(console.log)
.catch(console.error);
Você pode buscar atividades baseadas no Criador baseado em formulário usando o sendEvent
e transmitindo os nomes da mbox sob a decisionScopes
opção. O sendEvent
retornará uma promessa que é resolvida com um objeto contendo as atividades / propostas solicitadas: É assim que a função propositions
matriz tem a seguinte aparência:
[
{
"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"
}
}
]
}
]
Exemplo:
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
}
}
}
});
}
}
}
}
});
Você pode aplicar as atividades do Target usando o applyOffers
função: adobe.target.applyOffer(options)
Exemplo:
adobe.target.getOffers({...})
.then(response => adobe.target.applyOffers({ response: response }))
.then(() => console.log("Success"))
.catch(error => console.log("Error", error));
Saiba mais sobre o applyOffers
do documentação dedicada.
Você pode aplicar as atividades do Target usando o applyPropositions
comando.
Exemplo:
alloy("applyPropositions", {
propositions: [...]
});
Saiba mais sobre o applyPropositions
do documentação dedicada.
Você pode rastrear eventos usando o trackEvent
ou usando sendNotifications
.
Essa função envia uma solicitação para relatar ações do usuário, como cliques e conversões. Ele não fornece atividades na resposta.
Exemplo 1
adobe.target.trackEvent({
"type": "click",
"mbox": "some-mbox"
});
Exemplo 2
adobe.target.sendNotifications({
request: {
notifications: [{
...,
mbox: {
name: "some-mbox"
},
type: "click",
...
}]
}
});
Você pode rastrear eventos e ações do usuário chamando a função sendEvent
, preenchendo o _experience.decisioning.propositions
Grupo de campos XDM e configuração do eventType
para um dos dois valores:
decisioning.propositionDisplay
: Sinaliza a renderização da atividade do Target.decisioning.propositionInteract
: Sinaliza uma interação do usuário com a atividade, como um clique do mouse.O _experience.decisioning.propositions
O grupo de campos XDM é uma matriz de objetos. As propriedades de cada objeto são derivadas da variável result.propositions
que é retornado no sendEvent
comando: { id, scope, scopeDetails }
Exemplo 1 - Rastrear um decisioning.propositionDisplay
evento após renderizar uma atividade
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
}
]
}
}
}
});
}
});
Exemplo 2 - Rastrear um decisioning.propositionInteract
evento depois que ocorre uma métrica de clique
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 === "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
}
}
}
});
});
}
}
}
}
});
Use o adobe.target.triggerView
. Essa função pode ser chamada sempre que uma nova página é carregada ou quando um componente em uma página é renderizado novamente. adobe.target.triggerView() deve ser implementado para aplicativos de página única (SPA) para usar o Visual Experience Composer (VEC) para criar atividades de teste A/B e direcionamento de experiência (XT). Se adobe.target.triggerView() não estiver implementado no site, o VEC não poderá ser usado para SPA.
Exemplo
adobe.target.triggerView("homeView")
Para acionar ou sinalizar uma alteração de exibição de aplicativo de página única, defina a variável web.webPageDetails.viewName
propriedade sob o xdm
da sendEvent
comando. O SDK da Web verificará o cache de exibição, se houver ofertas para o viewName
especificado em sendEvent
ele os executará e enviará um evento de notificação de exibição.
Exemplo
alloy("sendEvent", {
renderDecisions: true,
xdm:{
web:{
webPageDetails:{
viewName: "homeView"
}
}
}
});
O conteúdo de personalização retornado do Adobe Target inclui tokens de resposta, que são detalhes sobre a atividade, oferta, experiência, perfil do usuário, informações geográficas e muito mais. Esses detalhes podem ser compartilhados com ferramentas de terceiros ou usados para depuração. Os tokens de resposta podem ser configurados na interface do usuário do Adobe Target.
Use eventos personalizados da at.js para ouvir a resposta do Target e ler os tokens de resposta.
Exemplo
document.addEventListener(adobe.target.event.REQUEST_SUCCEEDED, function(e) {
console.log("Request succeeded", e.detail);
});
Certifique-se de que você esteja usando o SDK da Web da plataforma versão 2.6.0 ou posterior.
Os tokens de resposta são retornados como parte do propositions
expostos no resultado da sendEvent
comando. Cada proposta contém uma matriz de items
e cada item terá uma meta
objeto preenchido com tokens de resposta se estiverem ativados na interface do usuário do administrador do Target. Saiba mais
Exemplo
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
}
]
*/
}
});
Usando a at.js, você pode gerenciar a cintilação definindo bodyHidingEnabled: true
para que a at.js seja a que cuidaria de pré-ocultar os contêineres personalizados antes de buscar e aplicar as alterações do DOM.
As seções de página que contêm conteúdo personalizado podem ser pré-ocultadas ao substituir a at.js bodyHiddenStyle
.
Por padrão bodyHiddenStyle
oculta todo o HTML body
.
Ambas as configurações podem ser substituídas usando window.targetGlobalSettings
. window.targetGlobalSettings
deve ser colocada antes de carregar a at.js.
Usando o SDK da Web, o cliente pode configurar seu estilo de pré-ocultação no comando configure, como no exemplo abaixo:
alloy("configure", {
edgeConfigId: "configurationId",
orgId: "orgId@AdobeOrg",
debugEnabled: true,
prehidingStyle: "body { opacity: 0 !important }"
});
Ao carregar a SDK da Web assíncrona, recomendamos que o seguinte snippet seja inserido na página antes da injeção do SDK da 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>
Há dois tipos de registro do A4T que são compatíveis com o uso da at.js:
Exemplo 1: Uso da configuração global do Target
O registro no lado do cliente do Analytics pode ser ativado ao configurar analyticsLogging: client_side
nas configurações da at.js ou substituindo o window.targetglobalSettings
objeto.
Quando essa opção é configurada, o formato da carga retornada é semelhante ao seguinte:
{
"analytics": {
"payload": {
"pe": "tnt",
"tnta": "167169:0:0|0|100,167169:0:0|2|100,167169:0:0|1|100"
}
}
}
A carga pode ser encaminhada para o Analytics por meio da API de inserção de dados.
Exemplo 2: Configurando em cada getOffers
função:
adobe.target.getOffers({
request: {
experienceCloud: {
analytics: {
logging: "client_side"
}
},
prefetch: {
mboxes: [{
index: 0,
name: "a1-serverside-xt"
}]
}
}
})
.then(console.log)
Esta é a aparência da carga da resposta:
{
"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"
}
}
}]
}
}
A carga do Analytics (tnta
(token) deve ser incluído na ocorrência do Analytics usando API de inserção de dados.
O registro no lado do servidor do Analytics pode ser ativado ao configurar analyticsLogging: server_side
nas configurações da at.js ou substituindo o window.targetglobalSettings
objeto.
Em seguida, os dados fluem da seguinte maneira:
O SDK da Web também suporta:
O registro no lado do cliente do Analytics é ativado quando o Adobe Analytics é desativado para essa configuração do DataStream.
O cliente tem acesso ao token do Analytics (tnta
) que precisa ser compartilhado com o Analytics usando API de inserção de dados
em encadeando o sendEvent
e percorra a matriz de propostas resultante.
Exemplo
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
});
Este é um diagrama para mostrar como os dados fluem quando o lado do cliente do Analytics está ativado:
O registro no lado do servidor do Analytics é ativado quando o Analytics é ativado para essa configuração do DataStream.
Quando o Registro de análises do lado do servidor é ativado, a carga A4T que precisa ser compartilhada com o Analytics para que os relatórios do Analytics mostrem impressões e conversões corretas é compartilhada no nível da borda da experiência, para que o cliente não precise fazer nenhum processamento adicional.
Veja como os dados fluem para nossos sistemas quando o Registro de análises do lado do servidor está ativado:
Você pode substituir as configurações na biblioteca at.js usando window.targetGlobalSettings
, em vez de definir as configurações na interface do usuário do Target Standard/Premium ou usar APIs REST.
A substituição deve ser definida antes que at.js seja carregada ou em Administration > Implementation > Edit at.js Settings > Code Settings > Library Header.
Exemplo:
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
};
Esse recurso não é compatível com o SDK da Web.
Exemplo 1
adobe.target.getOffer({
mbox: "target-global-mbox",
params: {
"profile.name": "test",
"profile.gender": "female"
},
success: console.log,
error: console.error
});
Exemplo 2
adobe.target.getOffers({
request: {
execute: {
pageLoad: {
profileParameters: {
name: "test",
gender: "female"
}
}
}
}
})
.then(console.log)
.catch(console.error);
Para atualizar um perfil do Target, use o sendEvent
e defina o data.__adobe.target
, como prefixar os nomes das chaves usando profile
.
Exemplo
alloy("sendEvent", {
renderDecisions: true,
data: {
__adobe: {
target: {
"profile.gender": "female",
"profile.age": 30
}
}
}
});
Exemplo 1
adobe.target.getOffer({
mbox: "target-global-mbox",
params: {
"entity.productName": "T-shirt",
"entity.productId": "1234"
},
success: console.log,
error: console.error
});
Exemplo 2
adobe.target.getOffers({
request: {
execute: {
pageLoad: {
parameters: {
"entity.productName": "T-shirt",
"entity.productId": "1234"
}
}
}
}
})
.then(console.log)
.catch(console.error);
Para enviar dados do Recommendation, use o sendEvent
e defina o data.__adobe.target
, como prefixar os nomes das chaves usando entity
.
Exemplo
alloy("sendEvent", {
renderDecisions: true,
data: {
__adobe: {
target: {
"entity.productName": "T-shirt",
"entity.productId": "1234"
}
}
}
});
Usando a at.js, há várias maneiras de enviar mbox3rdPartyId
, usando getOffer
ou getOffers
:
Exemplo 1
adobe.target.getOffer({
mbox:"test",
params:{
"mbox3rdPartyId": "1234"
},
success: console.log,
error: console.error
});
Exemplo 2
adobe.target.getOffers({
request: {
id:{
thirdPartyId: "1234"
},
execute: {
pageLoad: {}
}
}
})
.then(console.log)
.catch(console.error);
Ou há uma maneira de configurar o mbox3rdPartyId
ou em targetPageParams
ou targetPageParamsAll
.
Ao configurá-lo em targetPageParams
, ele será enviado nos pedidos de target-global-mbox
também conhecido como pag-lLoad
.
A recomendação deve ser definida usando targetPageParamsAll
como será enviado em cada solicitação do target.
A vantagem de usar targetPageParamsAll
é que você pode definir a variável mbox3rdPartyId
na página uma vez, e isso garantirá que todas as solicitações do target tenham o direito de mbox3rdPartyId
.
window.targetPageParamsAll = function() {
return {
"mbox3rdPartyId": "1234"
};
};
window.targetPageParams = function() {
return {
"mbox3rdPartyId": "1234"
};
};
O SDK da Web é compatível com a ID de terceiros do Target. No entanto, requer mais algumas etapas. Antes de mergulhar na solução, deveríamos falar um pouco sobre identityMap
.
O Mapa de identidade permite que os clientes enviem várias identidades. Todas as identidades são namespacadas. Cada namespace pode ter uma ou mais identidades. Uma identidade específica pode ser marcada como primária.
Com esse conhecimento em mente, podemos ver quais são as etapas necessárias para configurar o sdk da Web para usar a ID de terceiros do Target.
alloy("sendEvent", {
"renderDecisions": true,
"xdm": {
"identityMap": {
"TGT3PID": [
{
"id": "1234",
"primary": true
}
]
}
}
});
Ao usar a at.js, há duas maneiras de configurar os tokens de propriedade, usando targetPageParams
ou targetPageParamsAll
. Usando targetPageParams
adiciona o token de propriedade ao target-global-mbox
, mas usando targetPageParamsAll
adiciona o token a todas as chamadas do target:
Exemplo 1
window.targetPageParamsAll = function() {
return {
"at_property": "1234"
};
};
Exemplo 2
window.targetPageParams = function() {
return {
"at_property": "1234"
};
};
Usando o SDK da Web, os clientes podem configurar a propriedade em um nível superior, ao configurar a configuração do Fluxo de dados, no namespace Adobe Target:
Isso significa que cada chamada do Target para essa configuração específica do Fluxo de dados conterá esse token de propriedade.
Essa funcionalidade está disponível somente na at.js 2.x. A at.js 2.x tem uma nova função chamada getOffers
. getOffers
permite que os clientes busquem previamente conteúdo para uma ou mais mboxes. Exemplo:
adobe.target.getOffers({
request: {
prefetch: {
mboxes: [{
index: 0,
name: "test-mbox",
parameters: {
...
},
profileParameters: {
...
}
}]
}
}
})
.then(console.log)
.catch(console.error);
OBSERVAÇÃO: É altamente recomendável garantir que cada mbox
no mboxes
matriz tem seu próprio índice. Geralmente, a primeira mbox tem index=0
, o próximo index=1
, etc.
No momento, essa funcionalidade não é compatível com o SDK da Web.
A at.js expõe esses recursos de depuração:
window.___target_trace
objetoObservação: Todos esses recursos de depuração estão disponíveis com recursos aprimorados no Adobe Experience Platform Debugger
Você tem vários recursos de depuração ao usar o SDK da Web: