Adicionar o Adobe Target

Nesta lição, implementaremos a extensão Adobe Target com uma solicitação de carregamento de página e parâmetros personalizados.

O Adobe Target é a solução 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 para dispositivos móveis, aplicativos, redes sociais e outros canais digitais.

Objetivos de aprendizagem

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

Pré-requisitos

Para concluir as lições nesta seção, primeiro conclua as lições em Configurar tags e Adicionar o Serviço de Identidade.

Adicionar o trecho de pré-ocultação do Target

Antes de começarmos, precisamos fazer uma pequena atualização nos códigos incorporados das tags. Quando os códigos incorporados de tag são carregados de forma assíncrona, a página pode terminar a renderização antes da biblioteca do Target ser totalmente carregada e ter realizado a troca de conteúdo. Isso 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, recomendamos codificar um trecho especial de pré-ocultação imediatamente antes dos códigos incorporados assíncronos das tags.

Isso já foi feito no site Luma, mas vamos fazer isso na página de amostra para que você entenda a implementação. Copie as linhas de código a seguir:

<script>
   //prehiding snippet for Adobe Target with asynchronous tags deployment
   ;(function(win, doc, style, timeout) {
   var STYLE_ID = 'at-body-style';
   function getParent() {
      return doc.getElementsByTagName('head')[0];
   }
   function addStyle(parent, id, def) {
      if (!parent) {
      return;
      }
      var style = doc.createElement('style');
      style.id = id;
      style.innerHTML = def;
      parent.appendChild(style);
   }
   function removeStyle(parent, id) {
      if (!parent) {
      return;
      }
      var style = doc.getElementById(id);
      if (!style) {
      return;
      }
      parent.removeChild(style);
   }
   addStyle(getParent(), STYLE_ID, style);
   setTimeout(function() {
      removeStyle(getParent(), STYLE_ID);
   }, timeout);
   }(window, document, "body {opacity: 0 !important}", 3000));
</script>

Abra a página de exemplo e a cole antes de seu código incorporado de tag, como é mostrado abaixo (não se preocupe se os números de linha forem diferentes). Nesta captura de tela, o trecho pré-ocultação foi minimizado:

Recarregue sua página de exemplo. Você observará que a página ficará oculta por três segundos antes de ser exibida. Esse comportamento é temporário e desaparecerá depois de implantar o Target. Esse comportamento de pré-ocultação é controlado por duas configurações no final do trecho, que pode ser personalizado, mas que, geralmente, é melhor se deixado nas configurações padrão:

Para obter mais detalhes e obter o trecho de pré-ocultação unificado, consulte a extensão do Adobe Target com uma implantação assíncrona.

Adicionar a extensão do Target

A extensão do Adobe Target suporta implementações do lado do cliente usando o SDK JavaScript do Target para a Web moderna, o at.js. Os clientes que ainda usam a biblioteca antiga do Target, o mbox.js, devem atualizar para o at.js 2.x para usar as tags.

A extensão do Target v2 consiste em duas partes principais:

Neste primeiro exercício, adicionaremos a extensão e observaremos as configurações. Em exercícios posteriores, utilizaremos as ações.

Para adicionar a extensão

Neste momento, o Target ainda não está fazendo nada, portanto não há nada para ser validado.

Carregar o Target e acionar a solicitação de carregamento de página

Os profissionais de marketing usam o Target para controlar a experiência do visitante na página na fase de testes e ao direcionar conteúdo. Devido a essa importante função na exibição da página, você deve carregar o Target o mais rápido possível para minimizar o impacto na visibilidade da página. Nesta seção, carregaremos a biblioteca JavaScript do Target, o at.js, e acionaremos a solicitação de carregamento de página (chamada de "mbox global" em versões anteriores do at.js).

Use a regra All Pages - Library Loaded criada na lição "Adicionar elementos de dados, regras e bibliotecas" para implementar o Target, pois ele já é acionado o mais cedo possível em carregamentos de página.

Para carregar o Target

Com a ação Load Target adicionada, o at.js será carregado na página. No entanto, nenhuma solicitação do Target será acionada até que a ação Fire Page Load Request seja adicionada.

Para acionar solicitação de carregamento de página

Validar a solicitação de carregamento de página

Agora que você adicionou a extensão Target v2 e acionou as ações Load Target e Fire Page Load Request, deve haver uma solicitação de carregamento de página feita em todas as páginas em que a propriedade da tag é usada.

Para validar as ações Carregar Target e Acionar solicitação de carregamento de página

Parabéns! Você implementou o Target!

Adicionar parâmetros

Transmitir parâmetros na solicitação do Target adiciona recursos avançados as suas atividades de direcionamento, de testes e de personalização. A extensão de tag fornece duas ações para transmitir parâmetros:

Essas ações podem ser usadas antes da ação Load Target e podem definir diferentes parâmetros em páginas diferentes com base nas configurações de regras. Use o recurso de ordenação de regras usado ao definir IDs do cliente com o Serviço de identidade para definir parâmetros adicionais no evento Library Loaded antes da regra disparar a solicitação de carregamento de página.

Parâmetros de solicitação (mbox)

Os parâmetros são usados para transmitir dados personalizados para o Target, enriquecendo seus recursos de personalização. Eles são ideais para atributos que mudam frequentemente durante uma sessão de navegação, como nome da página, modelo etc. e não persistem.

Vamos adicionar o elemento de dados Page Name criado anteriormente na lição Adicionar elementos de dados, regras e bibliotecas como parâmetro de solicitação.

Para adicionar o parâmetro de solicitação

Validar parâmetros de solicitação

Por enquanto, os parâmetros personalizados transmitidos com solicitações at.js 2.x não são facilmente visíveis no Debugger, portanto, utilizaremos as ferramentas do desenvolvedor do navegador.

Para validar o parâmetro de solicitação pageName

Parâmetros do perfil

Semelhante aos parâmetros de solicitação, os parâmetros do perfil também são transmitidos por meio da solicitação do Target. No entanto, os parâmetros de perfil são armazenados no banco de dados de perfis de visitantes do Target e persistem pela duração do perfil do visitante. É possível defini-los em uma página do seu site e usá-los em atividades do Target em outra página. Este é um exemplo de um site de automóveis. Quando um visitante acessa uma página de veículos, é possível transmitir um parâmetro de perfil "profile.lastViewed=sportscar" para registrar o interesse do cliente nesse veículo específico. Quando o visitante navega para outras páginas que não sejam de veículos, você pode direcionar o conteúdo com base no último veículo visualizado. Parâmetros de perfil são ideais para atributos que raramente mudam ou que estão disponíveis apenas em determinadas páginas

Você não vai transmitir parâmetros de perfil neste tutorial, mas o fluxo de trabalho é quase idêntico ao que você fez ao transmitir o parâmetro pageName. A diferença é que você precisa dar nomes de perfil aos parâmetros de perfil com um prefixo profile.. É assim que um parâmetro de perfil chamado "userType" seria na ação Add Params to Page Load Request:

Parâmetros de entidade

Parâmetros de entidade são parâmetros especiais usados em implementações do Recommendations por três motivos principais:

Você não precisa transmitir nenhum parâmetro de entidade neste tutorial, mas o fluxo de trabalho é idêntico ao que você fez anteriormente ao transmitir o parâmetro de solicitação pageName, basta dar ao parâmetro um nome com prefixo "entity". e mapeá-lo para o elemento de dados relevante. Observe que algumas entidades comuns têm nomes reservados que devem ser usados (por exemplo, entity.id para o SKU do produto). Esta é a aparência ao definir parâmetros de entidade na ação Add Params to Page Load Request:

Adicionar parâmetros de ID do cliente

A coleta de IDs do cliente com o Serviço de identidade da Adobe Experience Platform facilita a importação de dados do CRM para o Target usando o recurso Atributos do cliente da Adobe Experience Cloud. Ela também permite a identificação de visitantes em vários dispositivos, permitindo manter uma experiência de usuário consistente à medida que seus clientes alternam entre um laptop e um dispositivo móvel.

É imperativo definir a ID do cliente na ação Set Customer IDs do Serviço de identidade antes de acionar a solicitação de carregamento de página. Para esse fim, verifique se você tem os recursos a seguir no site:

Na lição anterior, Adicionar o Serviço de identidade da Adobe Experience Platform, você criou a regra All Pages - Library Loaded - Authenticated - 10 para acionar a ação "Definir ID do cliente". Como essa regra tem uma configuração Order de 10, as IDs do cliente são definidas antes que nossa solicitação de carregamento de página seja acionada a partir da regra All Pages - Library Loaded com sua configuração Order de 50. Assim, você já implementou a coleção de IDs de cliente do Target!

Validar as IDs do cliente

Por enquanto, os parâmetros personalizados transmitidos com solicitações at.js 2.x não são facilmente visíveis no Debugger, portanto, utilizaremos as ferramentas do desenvolvedor do navegador.

Para validar as IDs do cliente

Adicionar o parâmetro de Token de propriedade

O token de propriedade é um parâmetro reservado usado com o recurso Permissões de usuário empresarial do Target Premium. É usado para definir diferentes propriedades digitais que membros distintos de uma organização da Experience Cloud possam receber diferentes permissões para cada propriedade. Por exemplo, você pode querer que um grupo de usuários possa configurar atividades do Target em seu site, mas não em seu aplicativo móvel.

As propriedades do Target são análogas às propriedades de tags e aos conjuntos de relatórios do Analytics. Uma empresa com várias marcas, sites e equipes de marketing pode usar uma propriedade do Target, de tag e um conjunto de relatórios do Analytics diferentes para cada site ou aplicativo móvel. As propriedades das tags são diferenciadas por seus códigos incorporados, os conjuntos de relatórios do Analytics são diferenciados por sua ID do conjunto de relatórios e as propriedades do Target são diferenciadas pelo parâmetro de token de propriedade.

O token de propriedade deve ser implementado usando uma ação de código personalizado nas marcas com a função targetPageParams(). Se estiver implementando vários sites com diferentes valores de at_property usando diferentes valores de at_property com uma única propriedade de tag, você poderá gerenciar o valor de at_property por meio de um elemento de dados.

Este é um exercício opcional, caso seja um cliente do Target Premium e deseje implementar um token de propriedade na sua propriedade Tutorial:

Validar o token de propriedade

Por enquanto, os parâmetros personalizados transmitidos com solicitações at.js 2.x não são facilmente visíveis no Debugger, portanto, utilizaremos as ferramentas do desenvolvedor do navegador.

Para validar o parâmetro do token de propriedade

Adicionar solicitações personalizadas

Adicionar uma solicitação de confirmação de pedido

A solicitação de confirmação do pedido é um tipo especial de solicitação usada para enviar detalhes do pedido ao Target. A inclusão de três parâmetros de solicitação específicos (orderId, orderTotal e productPurchasedId) é o que transforma uma solicitação regular do Target em uma solicitação de pedido. Além de gerar relatórios de receita, a solicitação de pedido também faz o seguinte:

A prática recomendada é usar uma solicitação de confirmação de pedido em todos os funis de pedido, mesmo em sites que não sejam de varejo. Por exemplo, os sites de geração de leads geralmente possuem funis de leads com uma “id de lead” exclusiva gerada no fim. Esses sites devem implementar uma solicitação de pedido, usando um valor estático (como "1") para o orderTotal.

Os clientes que usam a integração Analytics for Target (A4T) para a maioria de seus relatórios também podem querer implementar a solicitação de pedido se estiverem usando atividades do Automated Personalization, que não são compatíveis com o A4T. Além disso, a solicitação de pedido é um elemento essencial em implementações do Recommendations, alimentando algoritmos com base no comportamento de compra. Para obter as informações mais recentes sobre o suporte ao A4T, consulte a documentação.

A solicitação de confirmação de pedido deve ser acionada a partir de uma regra que é acionada somente na página ou evento de confirmação do pedido. Geralmente, pode ser combinado com uma regra que define o evento de compra do Adobe Analytics. Ela deve ser configurada usando a ação Código personalizado da extensão principal, usando os elementos de dados apropriados para definir os parâmetros orderId, orderTotal e productPurchasedId.

Vamos adicionar os elementos de dados e a regra que precisamos para acionar uma solicitação de confirmação de pedido no site Luma. Como você já criou vários elementos de dados, essas instruções estarão abreviadas.

Para criar o elemento de dados para a ID do pedido

Para criar o elemento de dados para a Quantidade do carrinho

Para criar o elemento de dados dos SKUs do carrinho (Target)

Agora precisamos criar uma regra para acionar a solicitação de confirmação de pedido com esses elementos de dados como parâmetros na página de confirmação de pedido.

Para criar a regra da página Confirmação de pedido

Validar a solicitação de confirmação do pedido

Por enquanto, os parâmetros personalizados transmitidos com solicitações at.js 2.x não são facilmente visíveis no Debugger, portanto, utilizaremos as ferramentas do desenvolvedor do navegador.

Solicitações personalizadas

Há raras ocasiões em que você precisa fazer solicitações do Target diferentes das solicitações de carregamento de página e de confirmação de pedido. Por exemplo, às vezes, os dados importantes que você gostaria de usar na personalização não são definidos na página antes dos códigos incorporados da tag. Eles podem ser codificados na parte inferior da página ou retornados de uma solicitação assíncrona de API. Esses dados podem ser enviados para o Target usando uma solicitação adicional, embora não seja ideal usar essa solicitação para entrega de conteúdo, já que a página já está visível. Esses dados podem ser usados para aprimorar o perfil do visitante para uso posterior (usando parâmetros de perfil) ou para preencher o catálogo do Recommendations.

Nessas circunstâncias, use a ação Código personalizado na extensão principal para acionar uma solicitação usando os métodos getOffer()/applyOffer() e trackEvent(). Isso é muito semelhante ao que você fez na Solicitação de confirmação de pedido exercício, mas você usará um nome de solicitação diferente e não usará os parâmetros de pedido especiais. Certifique-se de usar a ação Carregar Target antes de fazer solicitações do Target a partir do código personalizado.

Cabeçalho da biblioteca e Rodapé da biblioteca

A tela Editar at.js na interface do usuário do Target possui locais em que você pode colar o JavaScript personalizado que será executado imediatamente antes ou depois do arquivo at.js. O cabeçalho da biblioteca às vezes é usado para substituir configurações do at.js por meio da função
targetGlobalSettings() ou para transmitir dados de terceiros usando o recurso Provedores de dados. Às vezes, o rodapé da biblioteca é usado para adicionar ouvintes de eventos personalizados at.js.

Para replicar esse recurso em tags, use a ação Código personalizado na extensão principal e sequencie a ação antes (Cabeçalho da biblioteca) ou depois (Rodapé da biblioteca) da ação Carregar meta. Isso pode ser feito na mesma regra da ação Load Target (como mostrado abaixo) ou em regras separadas, com eventos ou configurações de pedido que são acionados de maneira confiável antes ou depois da regra que contém Load Target:

Para saber mais sobre os casos de uso para cabeçalhos e rodapés personalizados, consulte os seguintes recursos:

Próximo: "Adicionar o Adobe Analytics" >