Comparação da biblioteca at.js com o SDK da Web

Visão geral

Este artigo fornece uma visão geral das diferenças entre as at.js e o SDK da Web da Experience Platform.

Instalação de bibliotecas

Instalação da at.js

Permitimos que nossos clientes baixem a biblioteca diretamente da Adobe Experience Cloud, guia Implementação. A biblioteca at.js é personalizada com configurações que o cliente tem como: clientCode, imsOrgId etc.

Instalação do SDK da Web

A versão pré-criada está disponível em um CDN. Você pode fazer referência à biblioteca na 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 reduzida é útil para fins de depuração.

Consulte Instale o SDK da Web usando a biblioteca JavaScript do para obter mais informações.

Configuração das bibliotecas

Configuração da at.js

No final de cada arquivo da 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
});

Saiba mais

Configuração do SDK da Web

A configuração do SDK é feita com o configure comando. A variável configure é sempre chamado primeiro.

Como solicitar e renderizar automaticamente ofertas do Target de carregamento de página

Uso da at.js

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 forem 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 de borda do Target será executada.

Utilização do SDK da Web

Conteúdo criado no Adobe Target Visual Experience Composer podem ser recuperadas e renderizadas automaticamente pelo SDK.

Para solicitar e renderizar automaticamente ofertas do Target, use o sendEvent e defina o renderDecisions opção para true. Isso força o SDK a renderizar automaticamente qualquer conteúdo personalizado que esteja qualificado 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 uma carga de solicitação de notificação é:

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

Saiba mais

Como solicitar e NÃO renderizar automaticamente as ofertas do Target de carregamento de página

Uso da at.js

Há duas maneiras de acionar 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);

Saiba mais

Utilização do SDK da Web

Executar um sendEvent com um 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 por todas as exibições. O SDK da Web também tentará avaliar todas as atividades baseadas em visualização do VEC. No momento, a desabilitação da pré-busca de exibições não é compatível com o 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. Sua chamada de retorno recebe um objeto de resultado, que pode conter propriedades de apresentações 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
                  }
                }
              }
            });
          }
        });
      });
    }
  });

Saiba mais

Como solicitar mboxes específicas do Target com base em formulário

Uso da at.js

Você pode buscar atividades do Composer 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);

Saiba mais

Utilização do SDK da Web

Você pode buscar atividades baseadas no Form Based Composer usando o sendEvent e transmitindo os nomes da mbox sob o comando decisionScopes opção. A variável sendEvent retornará uma promessa que é resolvida com um objeto contendo as atividades/propostas solicitadas: é assim que o comando 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
                }
              }
            }
          });
        }
      }
    }
  }
});

Saiba mais

Como aplicar as atividades do Target

Uso da at.js

É possível 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 comando do documentação dedicada.

Utilização do SDK da Web

É possível aplicar as atividades do Target usando o applyPropositions comando.

Exemplo:

alloy("applyPropositions", {
    propositions: [...]
});

Saiba mais sobre o applyPropositions comando do documentação dedicada.

Como rastrear eventos

Uso da at.js

É possível rastrear eventos usando o trackEvent função ou uso 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",
          ...
       }]
    }
});

Saiba mais

Utilização do SDK da Web

É possível rastrear eventos e ações do usuário chamando o sendEvent , preenchendo o _experience.decisioning.propositions grupo de campos XDM e definição da variável eventType para um de dois valores:

  • decisioning.propositionDisplay: sinaliza a renderização da atividade do Target.
  • decisioning.propositionInteract: sinaliza a interação de um usuário com a atividade, como um clique do mouse.

A variável _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 - Faixa a 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 - Trilha a decisioning.propositionInteract evento após a ocorrência de 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.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
                  }
                }
              }
            });
          });
        }
      }
    }
  }
});

Saiba mais

Exemplo 3 - Rastrear um evento acionado após executar uma ação

Este exemplo rastreia um evento que foi acionado após a execução de uma ação específica, como clicar em um botão.
É possível adicionar outros parâmetros personalizados por meio da __adobe.target objeto de dados.

//replicates an at.js trackEvent call
alloy("sendEvent", {
    "type": "decisioning.propositionDisplay",
    "xdm": {
        "_experience": {
            "decisioning": {
                "propositions": [{
                    "scope": "sumbitButtonClick" // Or any mbox/location name you want to use in Adobe Target
                }]
            }
        }
    }
});

Como acionar uma alteração de exibição em um Aplicativo de página única

Uso da at.js

Use o adobe.target.triggerView função. 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")

Saiba mais

Utilização do SDK da Web

Para acionar ou sinalizar uma alteração de exibição de aplicativo de página única, defina a web.webPageDetails.viewName propriedade sob o xdm opção do sendEvent comando. O SDK da Web verificará o cache de exibição, se houver ofertas para o viewName especificado em sendEvent ele as executará e enviará um evento de notificação de exibição.

Exemplo

alloy("sendEvent", {
  renderDecisions: true,
  xdm:{
    web:{
      webPageDetails:{
        viewName: "homeView"
      }
    }
  }
});

Saiba mais

Como utilizar tokens de resposta

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.

Uso da at.js

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

Saiba mais

Utilização do SDK da Web

IMPORTANT
Verifique se você está usando o SDK da Web da plataforma versão 2.6.0 ou posterior.

Os tokens de resposta são retornados como parte da variável propositions que são expostos no resultado da sendEvent comando. Cada proposta contém uma matriz de items, e cada item terá um meta objeto preenchido com Tokens de resposta se estiverem ativados na interface 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
            }
        ]
      */
    }
  });

Saiba mais

Como gerenciar a cintilação

Uso da at.js

Ao usar a at.js, é possível 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 de DOM.
As seções de página que contêm conteúdo personalizado podem ser pré-ocultas substituindo 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 colocado antes de carregar a at.js.

Utilização do SDK da Web

Usando o SDK da Web, o cliente pode definir seu estilo de pré-ocultação no comando de configuração, como no exemplo abaixo:

alloy("configure", {
  edgeConfigId: "configurationId",
  orgId: "orgId@AdobeOrg",
  debugEnabled: true,
  prehidingStyle: "body { opacity: 0 !important }"
});

Ao carregar o SDK da Web assíncrono, recomendamos que o seguinte trecho seja inserido na página antes que o SDK da Web seja inserido:

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

Como o A4T está sendo tratado

Uso da at.js

Há dois tipos de registro A4T compatíveis com o uso da at.js:

  • Registro do Analytics no lado do cliente
  • Registro do lado do servidor do Analytics

Registro do Analytics no lado do cliente

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: configuração 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 de 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.

Registro do lado do servidor do Analytics

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:

Diagrama que mostra o fluxo de trabalho de registro do lado do servidor do Analytics

Saiba mais

Utilização do SDK da Web

O SDK da Web também é compatível com:

  • Registro do Analytics no lado do cliente
  • Registro do Analytics Server Side

Registro do Analytics no lado do cliente

O Log do cliente do Analytics é ativado quando o Adobe Analytics é desativado para essa configuração de DataStream.

Diagrama que mostra o fluxo de trabalho de registro do lado do cliente do Analytics

O cliente tem acesso ao token do Analytics (tnta) que precisa ser compartilhado com o Analytics usando API de inserção de dados
encadeamento de sendEvent e repita através da 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 Analytics Client Side está ativado:

Diagrama de fluxo de dados no registro do cliente do Analytics

Registro do lado do servidor do Analytics

O registro no lado do servidor do Analytics é ativado quando o Analytics é ativado para essa configuração de DataStream.

Interface dos fluxos de dados mostrando as configurações do Analytics.

Quando o Registro de análise do lado do servidor estiver ativado, a carga do A4T que precisa ser compartilhada com o Analytics para que os relatórios do Analytics mostrem impressões e conversões corretas são compartilhadas no nível do Edge Network, para que o cliente não precise fazer nenhum processamento adicional.

Veja como os dados fluem para nossos sistemas quando o registro do Server Side Analytics está ativado:

Diagrama que mostra o fluxo de dados no log do Server Side Analytics

Como definir as configurações globais do Target

Uso da at.js

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 a at.js seja carregada ou em Administração > Implementação > Editar configurações da at.js > Configurações de código > Cabeçalho da biblioteca.

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

Saiba mais

Utilização do SDK da Web

Este recurso não é compatível com o SDK da Web.

Como atualizar atributos do perfil do Target

Uso da at.js

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

Utilização do SDK da Web

Para atualizar um perfil do Target, use o sendEvent e defina o data.__adobe.target propriedade, prefixando os nomes de chave usando profile.

Exemplo

alloy("sendEvent", {
  renderDecisions: true,
  data: {
    __adobe: {
      target: {
        "profile.gender": "female",
        "profile.age": 30
      }
    }
  }
});

Como usar o Target Recommendations

Uso da at.js

Exemplo 1

adobe.target.getOffer({
   mbox: "target-global-mbox",
   params: {
     "entity.name": "T-shirt",
     "entity.id": "1234"
   },
   success: console.log,
   error: console.error
});

Exemplo 2

adobe.target.getOffers({
    request: {
      execute: {
        pageLoad: {
          parameters: {
            "entity.name": "T-shirt",
            "entity.id": "1234"
          }
        }
    }
  }
})
.then(console.log)
.catch(console.error);

Saiba mais

Utilização do SDK da Web

Para enviar dados de Recomendação, use o sendEvent e defina o data.__adobe.target propriedade, prefixando os nomes de chave usando entity.

Exemplo

alloy("sendEvent", {
  renderDecisions: true,
  data: {
    __adobe: {
      target: {
        "entity.name": "T-shirt",
        "entity.id": "1234"
      }
    }
  }
});

Como usar IDs de terceiros

Uso da at.js

Ao usar a at.js, há várias maneiras de enviar mbox3rdPartyId, utilizando 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 em targetPageParams ou targetPageParamsAll.
Ao configurá-lo no 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"
  };
};

Saiba mais

Utilização do SDK da Web

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, devemos falar um pouco sobre identityMap.
O Mapa de identidade permite que os clientes enviem várias identidades. Todas as identidades têm namespace. 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.

  1. Configure o namespace que conterá a ID de terceiros do Target na página de configuração do fluxo de dados:

Interface de fluxos de dados mostrando o campo de namespace da ID de terceiros do Target

  1. Envie esse namespace de identidade em cada comando sendEvent, desta forma:
alloy("sendEvent", {
  "renderDecisions": true,
  "xdm": {
    "identityMap": {
      "TGT3PID": [
        {
          "id": "1234",
          "primary": true
        }
      ]
    }
  }
});

Como definir tokens de propriedade

Uso da at.js

Ao usar a at.js, há duas maneiras de configurar os tokens de propriedade, usando targetPageParams ou targetPageParamsAll. Usar targetPageParams adiciona o token de propriedade à variável target-global-mbox chamar, 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"
      };
    };

Utilização do SDK da Web

Usando o SDK da Web, os clientes podem definir a propriedade em um nível superior, ao definir a configuração da sequência de dados, no namespace do Adobe Target:
Interface de fluxos de dados mostrando as configurações do Adobe Target.
Isso significa que cada chamada do Target para essa configuração específica do Fluxo de dados conterá o token de propriedade.

Como realizar uma busca prévia de mboxes

Uso da at.js

Essa funcionalidade está disponível somente na at.js 2.x. A at.js 2.x tem uma nova função chamada getOffers. getOffers permitir 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);

NOTA: é altamente recomendável garantir que todas as mbox no mboxes A matriz tem seu próprio índice. Normalmente, a primeira mbox tem index=0, o próximo index=1, etc.

Utilização do SDK da Web

No momento, não há suporte para essa funcionalidade no SDK da Web.

Como depurar minha implementação do Target

Uso da at.js

A at.js expõe estes recursos de depuração:

  • Desativação da mbox - desative o Target na busca e renderização para verificar se a página foi quebrada sem as interações do Target
  • Depuração da mbox - a at.js registra cada ação
  • Rastreamento de destino - com um token de rastreamento de mbox gerado no Bullseye, um objeto de rastreamento com detalhes que participaram do processo de decisão está disponível em window.___target_trace objeto

Observação: todos esses recursos de depuração estão disponíveis com recursos aprimorados no Adobe Experience Platform Debugger

Utilização do SDK da Web

Você tem vários recursos de depuração ao usar o SDK da Web:

recommendation-more-help
ad108910-6329-42f1-aa1d-5920a2b13636