DocumentaçãoExperience PlatformMigração do Target da at.js 2.x para o Web SDK

Renderizar atividades do Adobe Target Visual Experience Composer (VEC)

Última atualização: 17 de outubro de 2026

Criado para:

  • Intermediate
  • Experienced
  • Developer

As atividades do Target são configuradas usando o Visual Experience Composer (VEC) ou o compositor baseado em formulário. O Platform Web SDK pode recuperar e aplicar atividades baseadas em VEC na página, da mesma forma que a at.js. Nessa parte da migração, você deverá:

  • Instalar a extensão de navegador Auxiliar de edição visual
  • Execute uma chamada sendEvent com o Platform Web SDK para solicitar atividades.
  • Atualize todas as referências da implementação at.js que usam getOffers() para executar uma solicitação pageLoad do Target.

Extensão de navegador Auxiliar de edição visual

A extensão de navegador da Adobe Experience Cloud para Google Chrome permite carregar sites de maneira confiável no Visual Experience Composer (VEC) do Adobe Target para criar e controlar a qualidade das experiências da web com mais rapidez.

A extensão de navegador Auxiliar de edição visual funciona com sites que usam at.js ou Platform Web SDK.

Obter e instalar o Auxiliar de edição visual

  1. Navegue até a extensão de navegador da Adobe Experience Cloud Visual Editing Helper na Chrome Web Store.
  2. Clique em Adicionar ao Chrome > Adicionar Extensão.
  3. Abra o VEC no Target.
  4. Para usar a extensão, clique no ícone da extensão de navegador Auxiliar de edição visual ícone da extensão de edição visual {modal="regular"} na barra de ferramentas do navegador Chrome no VEC ou no Modo de controle de qualidade.

O Auxiliar de edição visual é ativado automaticamente quando um site é aberto no VEC do Target para permitir a criação. A extensão não tem configurações condicionais. A extensão lida com todas as configurações automaticamente, incluindo as configurações de cookies SameSite.

Consulte a documentação dedicada para obter mais informações sobre a extensão do Auxiliar de edição visual e a solução de problemas do Visual Experience Composer.

IMPORTANT
A nova extensão Auxiliar de Edição Visual substitui a extensão de navegador Auxiliar do VEC do Target anterior. Se a extensão auxiliar do VEC mais antiga estiver instalada, ela deverá ser removida ou desativada antes de usar a extensão auxiliar de edição visual.

Solicitar e aplicar conteúdo automaticamente

Depois que o Platform Web SDK for configurado na página, você poderá solicitar conteúdo do Target. Ao contrário da at.js, que pode ser configurada para solicitar conteúdo automaticamente quando a biblioteca é carregada, o Platform Web SDK exige que você execute explicitamente um comando.

Se sua implementação do at.js tiver a configuração pageLoadEnabled definida como true, que habilita a renderização automática de atividades baseadas em VEC, você executará o seguinte comando sendEvent com o Platform Web SDK:

JavaScript
code language-javascript 
alloy("sendEvent", {
  "renderDecisions": true
});
Tags

Nas marcas, use o tipo de ação Enviar evento com a opção Renderizar decisões de personalização visual selecionada:

Enviar um evento com decisões de personalização visual de renderização selecionadas nas marcas {modal="regular"}

Solicitar e aplicar conteúdo sob demanda

Algumas implementações do Target exigem algum processamento personalizado de ofertas de VEC antes de aplicá-las à página. Ou solicitam vários locais em uma única chamada. Em uma implementação at.js, isso pode ser feito configurando pageLoadEnabled como false e usando a função getOffers() para executar uma solicitação pageLoad.

Exemplo de at.js usando getOffers() e applyOffers() para renderizar manualmente atividades baseadas em VEC
code language-javascript 
adobe.target.getOffers({
  request: {
    execute: {
      pageLoad: {}
    }
  }
}).
then(response => adobe.target.applyOffers({ response: response }));

O Platform Web SDK não tem um evento pageLoad específico. Todas as solicitações de conteúdo do Target são controladas com a opção decisionScopes com o comando sendEvent. O escopo __view__ atende à finalidade da solicitação pageLoad.

Uma abordagem sendEvent equivalente do Platform Web SDK:
  1. Executar um comando sendEvent que inclua o escopo de decisão __view__
  2. Aplicar o conteúdo retornado à página com o comando applyPropositions
  3. Execute um comando sendEvent com o tipo de evento decisioning.propositionDisplay e detalhes de apresentação para incrementar uma impressão
code language-javascript 
alloy("sendEvent", {
  // Request the special "__view__" scope for target-global-mbox / pageLoad
  decisionScopes: ["__view__"]
}).then(function(result) {
  // Check if content (propositions) were returned
  if (result.propositions) {
    var retrievedPropositions = result.propositions;
    // Apply propositions to the page
    return alloy("applyPropositions", {
      propositions: retrievedPropositions
    }).then(function(applyPropositionsResult) {
      var renderedPropositions = applyPropositionsResult.propositions;
      // Send a display notification with the sendEvent command
      alloy("sendEvent", {
        "xdm": {
          "eventType": "decisioning.propositionDisplay",
          "_experience": {
            "decisioning": {
              "propositions": renderedPropositions
            }
          }
        }
      });
    });
  }
});
NOTE
É possível renderizar manualmente as modificações feitas no Visual Experience Composer. A renderização manual de modificações baseadas em VEC não é comum. Verifique se a implementação da at.js usa a função getOffers() para executar manualmente uma solicitação do Target pageLoad sem usar applyOffers() para aplicar o conteúdo à página.

O Platform Web SDK oferece aos desenvolvedores muita flexibilidade na solicitação e renderização de conteúdo. Consulte a documentação dedicada sobre renderização de conteúdo personalizado para obter opções e detalhes adicionais.

Exemplo de implementação

A implementação básica do Platform Web SDK está concluída.

JavaScript

Exemplo de JavaScript com renderização automática de conteúdo do Target:

code language-html 
<!doctype html>
<html>
<head>
  <title>Example page</title>
  <!--Data Layer to enable rich data collection and targeting-->
  <script>
    var digitalData = {
      // Data layer information goes here
    };
  </script>

  <!--Third party libraries that may be used by Target offers and modifications-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

  <!--Prehiding snippet for Target with asynchronous Web SDK deployment-->
  <script>
    !function(e,a,n,t){var i=e.head;if(i){
    if (a) return;
    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("mboxEdit") !== -1, ".body { opacity: 0 !important }", 3000);
  </script>

  <!--Platform Web SDK base code-->
  <script>
    !function(n,o){o.forEach(function(o){n[o]||((n.__alloyNS=n.__alloyNS||
    []).push(o),n[o]=function(){var u=arguments;return new Promise(
    function(i,l){n[o].q.push([i,l,u])})},n[o].q=[])})}
    (window,["alloy"]);
  </script>

  <!--Platform Web SDK loaded asynchonously. Change the src to use the latest supported version.-->
  <script src="https://cdn1.adoberesources.net/alloy/2.6.4/alloy.min.js" async></script>

  <!--Configure Platform Web SDK then send event-->
  <script>
    alloy("configure", {
      "edgeConfigId": "ebebf826-a01f-4458-8cec-ef61de241c93",
      "orgId":"ADB3LETTERSANDNUMBERS@AdobeOrg"
    });

    // Send an event to the Adobe edge network and render Target content automatically
    alloy("sendEvent", {
      "renderDecisions": true
    });
  </script>
</head>
<body>
  <h1 id="title">Home Page</h1><br><br>
  <p id="bodyText">Navigation</p><br><br>
  <a id="home" class="navigationLink" href="#">Home</a><br>
  <a id="pageA" class="navigationLink" href="#">Page A</a><br>
  <a id="pageB" class="navigationLink" href="#">Page B</a><br>
  <a id="pageC" class="navigationLink" href="#">Page C</a><br>
  <div id="homepage-hero">Homepage Hero Banner Content</div>
</body>
</html>
Tags

Exemplo de página de tags com renderização automática de conteúdo do Target:

code language-html 
<!doctype html>
<html>
<head>
  <title>Example page</title>
  <!--Data Layer to enable rich data collection and targeting-->
  <script>
    var digitalData = {
      // Data layer information goes here
    };
  </script>

  <!--Third party libraries that may be used by Target offers and modifications-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

  <!--Prehiding snippet for Target with asynchronous Web SDK deployment-->
  <script>
    !function(e,a,n,t){var i=e.head;if(i){
    if (a) return;
    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("mboxEdit") !== -1, ".body { opacity: 0 !important }", 3000);
  </script>

    <!--Tags Header Embed Code: REPLACE WITH THE INSTALL CODE FROM YOUR OWN ENVIRONMENT-->
    <script src="//assets.adobedtm.com/launch-EN93497c30fdf0424eb678d5f4ffac66dc.min.js" async></script>
</head>
<body>
  <h1 id="title">Home Page</h1><br><br>
  <p id="bodyText">Navigation</p><br><br>
  <a id="home" class="navigationLink" href="#">Home</a><br>
  <a id="pageA" class="navigationLink" href="#">Page A</a><br>
  <a id="pageB" class="navigationLink" href="#">Page B</a><br>
  <a id="pageC" class="navigationLink" href="#">Page C</a><br>
  <div id="homepage-hero">Homepage Hero Banner Content</div>
</body>
</html>

Nas tags, adicione a extensão Adobe Experience Platform Web SDK:

Adicionar a extensão do Adobe Experience Platform Web SDK {modal="regular"}

Adicione as configurações desejadas:
configurando as opções de migração da extensão de tag do Web SDK {modal="regular"}

Crie uma regra com uma ação Enviar evento e Renderizar decisões de personalização visual selecionadas:
Enviar um evento com Personalizações de Renderização selecionadas nas marcas {modal="regular"}

Em seguida, saiba como solicitar e renderizar atividades do Target com base em formulário.

NOTE
Estamos empenhados em ajudá-lo a ter sucesso com a migração do Target da at.js para o Web SDK. Se você encontrar obstáculos com sua migração ou achar que há informações críticas ausentes neste guia, envie-nos uma mensagem em esta discussão da comunidade.
recommendation-more-help
platform-learn-help-tutorial-migrate-target-websdk