Configurar o Adobe Target com o SDK da Web da plataforma

Saiba como implementar o Adobe Target usando o SDK da Web da plataforma. Saiba como fornecer experiências e como transmitir parâmetros adicionais para o Target.

Adobe Target O é o aplicativo da Adobe Experience Cloud que oferece tudo o que você precisa para ajustar e personalizar a experiência do cliente e maximizar a receita em sites da Web e móveis, aplicativos e outros canais digitais.

Objetivos de aprendizagem

No final desta lição, você poderá:

• Entenda como adicionar o trecho pré-ocultação do SDK da Web da Platform para evitar cintilação ao usar o Target com códigos incorporados de tag assíncrona
• Configurar um fluxo de dados para habilitar a funcionalidade do Target
• Renderize decisões de personalização visual quando a página for carregada (anteriormente chamada de "mbox global")
• Envio de dados XDM para o Target e compreensão do mapeamento para parâmetros do Target
• Enviar dados personalizados para o Target, como parâmetros de perfil e entidade
• Validar uma implementação do Target com o SDK da Web da plataforma

Pré-requisitos

Para concluir as lições desta seção, primeiro você deve:

• Completar todas as lições para a configuração inicial do SDK da Web da Platform, incluindo a configuração de elementos de dados e regras.
• Certifique-se de que você tenha uma Função de Editor ou Aprovador.
• Instale o Extensão auxiliar do Visual Experience Composer se estiver usando o navegador Google Chrome.
• Saber como configurar atividades no Target. Se você precisar de uma atualização, os seguintes tutoriais e guias serão úteis para esta lição:
  • Usar a extensão auxiliar do Visual Experience Composer (VEC)
  • Usar o Visual Experience Composer
  • Usar o Experience Composer baseado em formulário
  • Criar atividades de direcionamento de experiência

Adicionar mitigação de cintilação

Antes de iniciar, determine se é necessária uma solução extra de tratamento de cintilação, dependendo de como a biblioteca de tags é carregada.

Implementação assíncrona

Quando uma biblioteca de tags é carregada de forma assíncrona, a página pode terminar a renderização antes do Target realizar uma troca de conteúdo. Esse comportamento pode levar ao que é conhecido como "oscilação", onde o conteúdo padrão é exibido brevemente antes de ser substituído pelo conteúdo personalizado especificado pelo Target. Caso deseje evitar essa oscilação, o Adobe recomenda adicionar um trecho especial de pré-ocultação imediatamente antes do código incorporado da tag assíncrona.

Este trecho já está presente no site Luma, mas vamos examinar mais de perto para entender o que esse código faz:

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

O trecho pré-ocultação cria uma tag de estilo no cabeçalho da página com a definição CSS de sua escolha. Essa tag de estilo é removida quando uma resposta do Target é recebida ou o tempo limite é atingido.

O comportamento de pré-ocultação é controlado por duas configurações no final do trecho.

• body { opacity: 0 !important } especifica a definição de CSS a ser usada para a pré-ocultação até o Target ser carregado. Por padrão, a página inteira fica oculta. É possível atualizar essa definição para os seletores que deseja pré-ocultar junto com a forma como deseja ocultá-los. Você pode incluir várias definições, pois esse valor é simplesmente o que está inserido na tag de estilo de pré-ocultação. Se você tiver um elemento de contêiner de fácil identificação que abranja o conteúdo abaixo de sua navegação, poderá usar essa configuração para limitar a pré-ocultação a esse elemento do contêiner.
• 3000 especifica o tempo limite em milissegundos para a pré-ocultação. Se uma resposta do Target não for recebida antes do tempo limite, a tag de estilo de pré-ocultação será removida. Atingir esse tempo limite deve ser raro.

O trecho de pré-ocultação também está disponível nas tags:

1. Vá para a Extensões seção de tags

2. Selecionar Configurar para a extensão SDK da Web da Adobe Experience Platform

3. Selecione o Copiar trecho oculto previamente na área de transferência botão

   

   OBSERVAÇÃO

   O trecho pré-ocultação padrão copiado da extensão SDK da Web da Platform pode incluir uma definição CSS que não existe no site, como .personalization-container { opacity: 0 !important }. Verifique e modifique o trecho pré-ocultação apropriadamente para o seu site.

Implementação síncrona

O Adobe recomenda implementar tags de forma assíncrona, conforme demonstrado no site Luma. No entanto, se a biblioteca de tags for carregada de forma síncrona, o trecho pré-ocultação não será necessário. Em vez disso, o estilo de pré-ocultação é especificado nas configurações de extensão do SDK da Web da Platform.

O estilo de pré-ocultação para implementações síncronas pode ser configurado da seguinte maneira:

1. Vá para a Extensões seção de tags

2. Selecione o Configurar botão para a extensão SDK da Web da plataforma

3. Selecione o Editar estilo de pré-ocultação botão

   

4. Modifique o CSS para incluir os seletores e ocultar os métodos que gostaria de usar, por exemplo: body { opacity: 0 !important } se quiser pré-ocultar todo o corpo da página.

5. Salvar as alterações e criar em uma biblioteca

Para saber mais sobre como o SDK da Web da Platform pode gerenciar a cintilação, consulte a seção do guia: gerenciamento de cintilação para experiências personalizadas.

Configurar o fluxo de dados

O Target deve ser ativado na configuração da sequência de dados para que qualquer atividade do Target possa ser entregue pelo SDK da Web da plataforma.

Para configurar o Target na sequência de dados:

1. Ir para Coleta de dados interface

2. Na navegação à esquerda, selecione Datastreams

3. Selecione o criado anteriormente Luma Web SDK sequência de dados

   

4. Selecione Adicionar serviço
   

5. Selecionar Adobe Target como o Serviço

6. Insira os detalhes opcionais sobre a implementação do Target, se desejado, seguindo as orientações abaixo.

7. Selecione Salvar

   

Token de propriedade

Os clientes do Target Premium têm a opção de gerenciar permissões de usuário com propriedades. As propriedades do Target permitem que você estabeleça limites em torno de onde os usuários podem executar atividades do Target. Consulte a Permissões empresariais seção da documentação do Target para obter mais detalhes.

Para configurar ou localizar tokens de propriedade, navegue até Adobe Target > Administração > Propriedades. A variável </> O ícone exibe o código de implementação. A variável at_property value é o token de propriedade que você usaria na sequência de dados.

ID do ambiente de destino

Os 🔗ambientes do Target ajudam você a gerenciar a implementação em todos os estágios de desenvolvimento. Essa configuração opcional especifica qual ambiente do Target você usará com cada fluxo de dados.

A Adobe recomenda definir a ID de ambiente do Target de forma diferente para cada um dos fluxos de dados de desenvolvimento, preparo e produção para simplificar as coisas.

Para configurar ou localizar IDs de ambiente, navegue até Adobe Target > Administração > Ambientes.

Namespace de ID de terceiros do Target

Essa configuração opcional permite especificar qual símbolo de identidade usar para a ID de terceiros do Target. O Target só oferece suporte à sincronização de perfis em um único símbolo de identidade ou namespace. Para obter mais informações, consulte a sincronização de perfil em tempo real para mbox3rdPartyId seção do guia do Target.

Os Símbolos de identidade são encontrados na lista de identidades em Coleta de dados > Cliente > Identidades.

Para os propósitos deste tutorial usando o site Luma, use o Símbolo de identidade lumaCrmId configurar durante a lição sobre Identidades.

Renderizar decisões de personalização visual

Primeiro, você deve entender a terminologia usada nas interfaces do Target e das tags.

• Atividade: um conjunto de experiências direcionadas para um ou mais públicos. Por exemplo, um teste A/B simples pode ser uma atividade com duas experiências.
• Experiência: um conjunto de ações direcionadas a um ou mais locais ou escopos de decisão.
• Escopo da decisão: um local onde uma experiência do Target é entregue. Os escopos de decisão são equivalentes às "mboxes" se você estiver familiarizado com o uso de versões mais antigas do Target.
• Decisão de personalização: uma ação que o servidor determina que deve ser aplicada. Essas decisões podem ser baseadas nos critérios de público-alvo e na priorização de atividades do Target.
• Apresentação: o resultado das decisões tomadas pelo servidor que são entregues na resposta do SDK da Web da plataforma. Por exemplo, trocar uma imagem de banner seria uma proposta.

Atualizar a regra de carregamento da página

As decisões de personalização visual do Target são entregues pelo SDK da Web da plataforma, se o Target estiver ativado na sequência de dados. No entanto, eles não são renderizados automaticamente. Você deve modificar a regra de carregamento da página global para habilitar a renderização automática.

1. No Coleta de dados abra a propriedade de tag que você está usando para este tutorial

2. Abra o all pages - library load - AA & AT regra

3. Selecione o Adobe Experience Platform Web SDK - Send event ação

4. Ativar Renderizar decisões de personalização visual com a caixa de seleção

   

5. Salve as alterações e crie na biblioteca

A configuração de renderizar decisões de personalização visual faz com que o SDK da Web da Platform aplique automaticamente quaisquer modificações que tenham sido especificadas usando o Visual Experience Composer do Target ou "mbox global".

Se preferir renderizar ou executar ações nessas decisões usando o código personalizado, você pode deixar a opção Renderizar decisões de personalização visual configuração desativada. O SDK da Web da Platform é flexível e fornece esse recurso para fornecer controle total. Consulte o guia para obter mais informações sobre renderização manual do conteúdo personalizado.

Configurar uma atividade do Target com o Visual Experience Composer

Agora que a parte de implementação básica foi concluída, crie uma atividade de Direcionamento de experiência (XT) no Target para validar se tudo está funcionando corretamente. Você pode consultar o tutorial do Target para criação de atividades de Direcionamento de experiência se precisar de assistência.

1. Navegar até o Target

2. Crie uma atividade de Direcionamento de experiência (XT) usando a página inicial do Luma para o URL da atividade

   

3. Modificar a página, por exemplo, alterar o texto no banner da página inicial

   

4. Escolha Adobe Analytics como fonte de relatórios com o conjunto de relatórios apropriado e a métrica Pedidos como meta

   OBSERVAÇÃO

   Se você não usar o Adobe Analytics, selecione Target como origem de relatório e escolha uma métrica diferente como Engajamento > Exibições de página em vez disso. Uma métrica de meta é necessária para salvar e visualizar a atividade.

5. Salvar a atividade

6. Se você estiver confortável com as alterações, será possível ativar a atividade. Caso contrário, se quiser visualizar a experiência sem ativá-la, copie a variável URL de visualização de garantia da qualidade.

7. Carregue a página inicial do Luma e você deverá ver suas alterações aplicadas

8. Após algumas horas, você poderá ver os dados e as conversões da atividade do Target no Adobe Analytics. Consulte o Guia do Target para obter informações detalhadas sobre Relatórios do Analytics for Target (A4T).

Validar com o Debugger

Se você configurar uma atividade, deverá ver o renderizador de conteúdo na página. No entanto, mesmo se nenhuma atividade estiver ativa, você também pode examinar a chamada de rede Enviar evento para confirmar se o Target está configurado corretamente.

1. Abra a extensão do navegador do Adobe Experience Platform Debugger

2. Vá para a Site de demonstração Luma e use o depurador para alterne a propriedade da tag no site para sua própria propriedade de desenvolvimento

3. Recarregar a página

4. Selecione o Rede ferramenta no depurador

5. Filtrar por Adobe Experience Platform Web SDK

6. Selecionar o valor na linha de eventos para a primeira chamada

   

7. Observe que há chaves em query > personalization e decisionScopes tem um valor de __view__. Este escopo é equivalente à "mbox global" do Target. Esta chamada do SDK da Web da Platform solicitou decisões do Target.

   

8. Feche a sobreposição e selecione os detalhes do evento para a segunda chamada de rede. Esta chamada só estará presente se o Target retornar uma atividade.

9. Observe que há detalhes sobre a atividade e a experiência retornadas do Target. Essa chamada de SDK da Web da Platform envia uma notificação de que uma atividade do Target foi renderizada para o usuário e aumenta uma impressão.

   

Configurar e renderizar um escopo de decisão personalizado

Escopos de decisão personalizados (conhecidos formalmente como "mboxes") podem ser usados para fornecer conteúdo em HTML ou JSON de maneira estruturada usando o Experience Composer baseado em formulário do Target. O conteúdo entregue a um desses escopos personalizados não é renderizado automaticamente pelo SDK da Web da Platform.

Adicionar um escopo à regra de carregamento da página

Modifique sua regra de carregamento de página para adicionar um escopo de decisão personalizado:

1. Abra o all pages - library load - AA & AT regra

2. Selecione o Adobe Experience Platform Web SDK - Send Event ação

3. Adicione um ou mais escopos que deseja usar. Neste exemplo, use homepage-hero.

   

4. Salve as alterações e crie na biblioteca

Processar a resposta do Target

Agora que você configurou o SDK da Web da Platform para solicitar conteúdo para o homepage-hero escopo, você deve fazer algo com a resposta. A extensão de tag do SDK da Web da Platform fornece uma Enviar evento concluído evento que pode ser usado para acionar imediatamente uma nova regra quando uma resposta de Enviar evento ação for recebida.

1. Crie uma regra chamada homepage - send event complete - render homepage-hero.

2. Adicione um evento à regra. Use o Adobe Experience Platform Web SDK e a extensão Enviar evento concluído tipo de evento.

3. Adicione uma condição para restringir a regra à página inicial do Luma (caminho sem string de consulta igual a /content/luma/us/en.html).

4. Adicione uma ação à regra. Use o Núcleo extensão e Custom Code tipo de ação.

   

   DICA

   Dê nomes descritivos aos eventos, condições e ações da regra em vez de usar os nomes padrão. Nomes robustos de componentes de regras tornam os resultados da pesquisa muito mais úteis.

5. Insira o código personalizado para ler e executar ações nas apresentações retornadas da resposta do SDK da Web da plataforma. O código personalizado neste exemplo usa a abordagem descrita no guia para renderização manual do conteúdo personalizado. O código foi adaptado para o homepage-hero exemplo de escopo usando uma ação de regra de tag.

   var propositions = event.propositions;
   
   var heroProposition;
   if (propositions) {
      // Find the hero proposition, if it exists.
      for (var i = 0; i < propositions.length; i++) {
         var proposition = propositions[i];
         if (proposition.scope === "homepage-hero") {
            heroProposition = proposition;
            break;
         }
      }
   }
   
   var heroHtml;
   if (heroProposition) {
      // 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 < heroProposition.items.length; j++) {
         var heroPropositionItem = heroProposition.items[j];
         if (heroPropositionItem.schema === "https://ns.adobe.com/personalization/html-content-item") {
            heroHtml = heroPropositionItem.data.content;
            break;
         }
      }
   }
   
   if (heroHtml) {
      // Hero HTML exists. Time to render it.
      var heroElement = document.querySelector(".heroimage");
      heroElement.innerHTML = heroHtml;
      // For this example, we assume there is only a signle place to update in the HTML.
   }
   
   // Send a "display" event
   alloy("sendEvent", {
      xdm: {
         eventType: "propositionDisplay",
         _experience: {
            decisioning: {
               propositions: [
                  {
                     id: heroProposition.id,
                     scope: heroProposition.scope,
                     scopeDetails: heroProposition.scopeDetails
                  }
               ]
            }
         }
      }
   });
   

6. Salve as alterações e crie na biblioteca

7. Carregue a página inicial do Luma algumas vezes, o que deve ser suficiente para criar a nova homepage-hero registro de escopo de decisão na interface do Target.

Configurar uma atividade do Target com o Experience Composer baseado em formulário

Agora que você tem uma regra para renderizar manualmente um escopo de decisão personalizado, pode criar outra atividade de Direcionamento de experiência (XT) no Target. Desta vez, use o Experience Composer baseado em formulário.

1. Abertura Adobe Target

2. Desativar a atividade usada para a lição anterior

3. Crie uma atividade de Direcionamento de experiência (XT) usando a opção Experience Composer baseado em formulário

   

4. Selecione o homepage-hero localização no menu suspenso de localização e Criar oferta de HTML na lista suspensa de conteúdo. Se a localização não estiver disponível, você poderá digitá-la. O Target preenche periodicamente novos nomes de locais depois de receber solicitações para esse local ou escopo.

   

5. Cole o código a seguir na caixa de conteúdo. Este código é um banner principal básico com uma imagem de fundo diferente:

   <div class="we-HeroImage jumbotron" style="background-image: url('/content/luma/us/en/women/_jcr_content/root/hero_image.coreimg.jpeg');">
      <div class="container cq-dd-image">
         <div class="we-HeroImage-wrapper">
            <p class="h3">New Luma Yoga Collection</p>
            <strong class="we-HeroImage-title h1">Be active with style&nbsp;</strong>
            <p>
               <a class="btn btn-primary btn-action" href="/content/luma/us/en/products.html" role="button">Shop Now</a>
            </p>
         </div>
      </div>
   </div>
   

6. No Metas e configurações escolha Adobe Target como fonte de geração de relatórios e Envolvimento > Exibições de página como meta

7. Salvar a atividade

8. Se você estiver confortável com as alterações, será possível ativar a atividade. Caso contrário, se quiser visualizar a experiência sem ativá-la, copie a variável URL de visualização de garantia da qualidade.

9. Carregue a página inicial do Luma e você deverá ver suas alterações aplicadas

Validar com o Debugger

Se você ativou sua atividade, deve ver a renderização do conteúdo na página. No entanto, mesmo se nenhuma atividade estiver ativa, você também poderá observar o Enviar evento chamada de rede para confirmar se o Target está solicitando conteúdo para seus escopos personalizados.

1. Abra a extensão do navegador do Adobe Experience Platform Debugger

2. Vá para a Site de demonstração Luma e use o depurador para alterne a propriedade da tag no site para sua própria propriedade de desenvolvimento

3. Recarregar a página

4. Selecione o Rede ferramenta no depurador

5. Filtrar por Adobe Experience Platform Web SDK

6. Selecionar o valor na linha de eventos para a primeira chamada

   

7. Observe que há chaves em query > personalization e decisionScopes tem um valor de __view__ como antes, mas agora também há um homepage-hero escopo incluído. Esta chamada de SDK da Web da Platform solicitou decisões do Target para alterações feitas usando o VEC e a interface homepage-hero localização.

   

8. Feche a sobreposição e selecione os detalhes do evento para a segunda chamada de rede. Esta chamada só estará presente se o Target retornar uma atividade.

9. Observe que há detalhes sobre a atividade e a experiência retornadas do Target. Essa chamada de SDK da Web da Platform envia uma notificação de que uma atividade do Target foi renderizada para o usuário e aumenta uma impressão.

   

Enviar dados adicionais para o Target

Nesta seção, você passará dados específicos do Target e examinará em mais detalhes como os dados XDM são mapeados para parâmetros do Target.

Há alguns pontos de dados que podem ser úteis para o Target que não são mapeados a partir do objeto XDM. Estes parâmetros especiais do Target incluem:

• Atributos do perfil
• Atributos de entidade do Recommendations
• Parâmetros reservados do Recommendations
• Valores de categoria para afinidade de categorias

Criar elementos de dados para parâmetros do Target

Primeiro, você configurará alguns elementos de dados adicionais para um atributo de perfil, atributo de entidade, valor de categoria e, em seguida, construirá o data objeto usado para transmitir dados não XDM:

• target.entity.id mapeado para digitalData.product.0.productInfo.sku

• target.entity.name mapeado para digitalData.product.0.productInfo.title

• target.user.categoryId usar o seguinte código personalizado para analisar o URL do site para a categoria de nível superior:

  var cat = location.pathname.split(/[/.]+/);
  if (cat[5] == 'products') {
     return (cat[6]);
  } else if (cat[5] != 'html') {
     return (cat[5]);
  }
  

• data.content usando o seguinte código personalizado:

  var data = {
     __adobe: {
        target: {
           "entity.id": _satellite.getVar("target.entity.id"),
           "entity.name": _satellite.getVar("target.entity.name"),
           "profile.loggedIn": _satellite.getVar("user.profile.attributes.loggedIn"),
           "user.categoryId": _satellite.getVar("target.user.categoryId")
        }
     }
  }
  return data;
  

Atualizar a regra de carregamento da página

Transmitir dados adicionais para o Target fora do objeto XDM requer a atualização de todas as regras aplicáveis. Para este exemplo, a única modificação que você deve fazer é incluir o novo data.content elemento de dados para a regra de carregamento de página genérica e a regra de exibição de página do produto.

1. Abra o all pages - library load - AA & AT regra

2. Selecione o Adobe Experience Platform Web SDK - Send event ação

3. Adicione o data.content elemento de dados para o campo Dados

   

4. Salve as alterações e crie na biblioteca

5. Repita as etapas de 1 a 4 para o exibição do produto - carregamento da biblioteca - AA regra

Validar com o depurador

Agora que as regras foram atualizadas, é possível validar se os dados estão sendo transmitidos corretamente usando o Adobe Debugger.

1. Navegue até a Site de demonstração Luma e faça logon com o email test@adobe.com e senha test

2. Navegar até a página de detalhes do produto

3. Abra a extensão do navegador do Adobe Experience Platform Debugger e alterne a propriedade da tag para sua própria propriedade de desenvolvimento

4. Recarregar a página

5. Selecione o Rede no Debugger e filtrar por Adobe Experience Platform Web SDK

6. Selecionar o valor na linha de eventos para a primeira chamada

7. Observe que há chaves em data > __adobe > target e são preenchidos com informações sobre o produto, a categoria e o estado de logon.

   

Validar na interface do Target

Em seguida, examine a interface do Target para confirmar se os dados foram recebidos e estão disponíveis para uso em públicos-alvo e atividades. Os dados do XDM são mapeados automaticamente para parâmetros do Target personalizados. Você pode validar se os dados XDM foram recebidos pelo Target e estão disponíveis ao criar um público-alvo.

1. Abertura Adobe Target
2. Navegue até a Públicos-alvo seção
3. Crie um público-alvo e escolha o Personalizado tipo de atributo
4. Pesquise o Parâmetro campo para web. O menu suspenso deve ser preenchido com todos os campos XDM relacionados aos detalhes da página da Web.

Em seguida, valide se o atributo de perfil de estado de logon foi passado com êxito.

1. Escolha o Perfil do visitante tipo de atributo
2. Pesquisar por loggedIn. Se o atributo estiver disponível no menu suspenso, o atributo foi passado corretamente para o Target. Novos atributos podem levar vários minutos para serem disponibilizados na interface do usuário do Target.

Se você tiver o Target Premium, também poderá validar se os dados da entidade foram passados corretamente e se os dados do produto foram gravados no catálogo de produtos da Recommendations.

1. Navegue até a Recommendations seção
2. Selecionar Pesquisa no catálogo no lado esquerdo da navegação
3. Procure o SKU do produto ou o nome do produto que você visitou anteriormente no site Luma. O produto deve ser exibido no catálogo de produtos. Os novos produtos podem levar vários minutos para serem pesquisados no catálogo de produtos da Recommendations.

Agora que concluiu esta lição, você deve ter uma implementação funcional do Adobe Target usando o SDK da Web da plataforma.

Próximo: