Desenvolvimento de conteúdo direcionado

ATENÇÃO

AEM 6.4 chegou ao fim do suporte estendido e esta documentação não é mais atualizada. Para obter mais detalhes, consulte nossa períodos de assistência técnica. Encontre as versões compatíveis here.

Esta seção descreve os tópicos sobre o desenvolvimento de componentes para uso com o direcionamento de conteúdo.

Para obter informações sobre como se conectar ao Adobe Target, consulte Integração Com O Adobe Target.
Para obter informações sobre a criação de conteúdo direcionado, consulte Criação de conteúdo direcionado usando o modo de direcionamento.

OBSERVAÇÃO

Ao direcionar um componente no autor do AEM, o componente faz uma série de chamadas do lado do servidor para o Adobe Target registrar a campanha, configurar ofertas e recuperar segmentos do Adobe Target (se configurado). Nenhuma chamada do lado do servidor é feita do ambiente de publicação do AEM para o Adobe Target.

Ativar a definição de metas com o Adobe Target em suas páginas

Para usar componentes direcionados nas páginas que interagem com o Adobe Target, inclua um código específico do lado do cliente na <head> elemento.

Seção do cabeçalho

Adicione ambos os blocos de código a seguir ao <head> da sua página:

<!--/* Include Context Hub */-->
<sly data-sly-resource="${'contexthub' @ resourceType='granite/contexthub/components/contexthub'}"/>

<cq:include script="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp"/>

Esse código adiciona os objetos javascript do analytics necessários e carrega as bibliotecas do cloud service associadas ao site. Para o serviço do Target, as bibliotecas são carregadas por meio de /libs/cq/analytics/components/testandtarget/headlibs.jsp

O conjunto de bibliotecas carregadas depende do tipo de biblioteca do cliente de destino (mbox.js ou at.js) usada na configuração do Target:

Para mbox.js padrão

<script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/parameters.js"></script>
 <script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/mbox.js"></script>
 <script type="text/javascript" src="/etc/clientlibs/foundation/personalization/integrations/commons.js"></script>
 <script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/util.js"></script>
 <script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/init.js"></script>

Para mbox.js personalizada

<script type="text/javascript" src="/etc/cloudservices/testandtarget/<CLIENT-CODE>/_jcr_content/public/mbox.js"></script>
        <script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/parameters.js"></script>
 <script type="text/javascript" src="/etc/clientlibs/foundation/personalization/integrations/commons.js"></script>
 <script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/util.js"></script>
 <script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/init.js"></script>

Para at.js

<script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/parameters.js"></script>
 <script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/atjs-integration.js"></script>
 <script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/atjs.js"></script>

OBSERVAÇÃO

Somente a versão de at.js fornecido com o produto é suportado. A versão de at.js enviado com o produto pode ser obtido observando o at.js arquivo no local /etc/clientlibs/foundation/testandtarget/atjs/source/at.js.

Para at.js personalizada

<script type="text/javascript" src="/etc/cloudservices/testandtarget/<CLIENT-CODE>/_jcr_content/public/at.js"></script>
    <script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/parameters.js"></script>
 <script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/atjs-integration.js"></script>

A funcionalidade do Target no lado do cliente é gerenciada pela variável CQ_Analytics.TestTarget objeto. Portanto, a página conterá alguns códigos de inicialização, como no exemplo a seguir:

<script type="text/javascript">
            if ( !window.CQ_Analytics ) {
                window.CQ_Analytics = {};
            }
            if ( !CQ_Analytics.TestTarget ) {
                CQ_Analytics.TestTarget = {};
            }
            CQ_Analytics.TestTarget.clientCode = 'my_client_code';
        </script>
      ...

    <div class="cloudservice testandtarget">
  <script type="text/javascript">
  CQ_Analytics.TestTarget.maxProfileParams = 11;

  if (CQ_Analytics.CCM) {
   if (CQ_Analytics.CCM.areStoresInitialized) {
    CQ_Analytics.TestTarget.registerMboxUpdateCalls();
   } else {
    CQ_Analytics.CCM.addListener("storesinitialize", function (e) {
     CQ_Analytics.TestTarget.registerMboxUpdateCalls();
    });
   }
  } else {
   // client context not there, still register calls
   CQ_Analytics.TestTarget.registerMboxUpdateCalls();
  }
  </script>
 </div>

O JSP adiciona os objetos javascript do analytics e as referências necessárias às bibliotecas javascript do lado do cliente. O testandtarget.js O arquivo contém o mbox.js funções. O HTML gerado pelo script é semelhante ao seguinte exemplo:

<script type="text/javascript">
        if ( !window.CQ_Analytics ) {
            window.CQ_Analytics = {};
        }
        if ( !CQ_Analytics.TestTarget ) {
            CQ_Analytics.TestTarget = {};
        }
        CQ_Analytics.TestTarget.clientCode = 'MyClientCode';
</script>
<link rel="stylesheet" href="/etc/clientlibs/foundation/testandtarget/testandtarget.css" type="text/css">
<script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/testandtarget.js"></script>
<script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/init.js"></script>

Seção do corpo (início)

Adicione o seguinte código imediatamente após a variável <body> para adicionar os recursos de contexto do cliente à página:

<cq:include path="clientcontext" resourceType="cq/personalization/components/clientcontext"/>

Seção do corpo (fim)

Adicione o código a seguir imediatamente antes do </body> tag final:

<cq:include path="cloudservices" resourceType="cq/cloudserviceconfigs/components/servicecomponents"/>

O script JSP desse componente gera chamadas para a API javascript do Target e implementa outras configurações necessárias. O HTML gerado pelo script é semelhante ao seguinte exemplo:

<div class="servicecomponents cloudservices">
  <div class="cloudservice testandtarget">
    <script type="text/javascript">
      CQ_Analytics.TestTarget.maxProfileParams = 11;
      CQ_Analytics.CCM.addListener("storesinitialize", function(e) {
        CQ_Analytics.TestTarget.registerMboxUpdateCalls();
      });
    </script>
    <div id="cq-analytics-texthint" style="background:white; padding:0 10px; display:none;">
      <h3 class="cq-texthint-placeholder">Component clientcontext is missing or misplaced.</h3>
    </div>
    <script type="text/javascript">
      $CQ(function(){
      if( CQ_Analytics &&
          CQ_Analytics.ClientContextMgr &&
          !CQ_Analytics.ClientContextMgr.isConfigLoaded )
        {
          $CQ("#cq-analytics-texthint").show();
        }
      });
    </script>
  </div>
</div>

Usar um arquivo de biblioteca do Target personalizado

OBSERVAÇÃO

Se você não estiver usando o DTM ou outro sistema de marketing de destino, poderá usar arquivos personalizados da biblioteca de direcionamento.

OBSERVAÇÃO

Por padrão, as mboxes são ocultas - a classe mboxDefault determina esse comportamento. Ocultar mboxes garante que os visitantes não vejam o conteúdo padrão antes que ele seja trocado; no entanto, ocultar mboxes afeta o desempenho percebido.

O arquivo mbox.js padrão usado para criar mboxes está localizado em /etc/clientlibs/foundation/testandtarget/mbox/source/mbox.js. Para usar um arquivo mbox.js do cliente, adicione o arquivo à configuração de nuvem do Target. Para adicionar o arquivo, a variável mbox.js deve estar disponível no sistema de arquivos.

Por exemplo, se você quiser usar a variável Serviço de ID de Marketing Cloud você precisa baixar a mbox.js para que ela contenha o valor correto da variável imsOrgID , que é baseada no seu locatário. Essa variável é necessária para integrar com o serviço de ID do Marketing Cloud. Para obter mais informações, consulte Adobe Analytics como fonte de relatórios do Adobe Target e Antes de implementar.

OBSERVAÇÃO

Se uma mbox personalizada for definida em uma configuração do Target, todos deverão ter acesso de leitura ao /etc/cloudservices em servidores de publicação. Sem esse acesso, o carregamento de arquivos mbox.js no site de publicação resulta em um erro 404.

Vá para o CQ Ferramentas e selecione Cloud Services. (http://localhost:4502/libs/cq/core/content/tools/cloudservices.html)
Na árvore, selecione Adobe Target e, na lista de configurações, clique duas vezes na configuração do Target.
Na página de configuração, clique em Editar.
Para a propriedade mbox.js personalizada, clique em Procurar e selecione o arquivo.
Para aplicar as alterações, digite a senha da sua conta do Adobe Target, clique em Reconectar ao Target e em OK quando a conexão for bem-sucedida. Em seguida, clique em OK na caixa de diálogo Editar componente .

A configuração do Target inclui um arquivo mbox.js personalizado, o código exigido na seção do cabeçalho da sua página adiciona o arquivo à estrutura da biblioteca do cliente em vez de uma referência à biblioteca testandtarget.js .

Desabilitação do comando Target para componentes

A maioria dos componentes pode ser convertida em componentes direcionados usando o comando Target no menu de contexto.

chlimage_1-173

Para remover o comando Target do menu de contexto, adicione a seguinte propriedade ao nó cq:editConfig do componente:

Nome: cq:disableTargeting
Tipo: Boolean
Valor: True

Por exemplo, para desativar o direcionamento para os componentes de título das páginas de Site de demonstração do Geometrixx, adicione a propriedade ao /apps/geometrixx/components/title/cq:editConfig nó .

chlimage_1-174

Enviando informações de confirmação de pedido para o Adobe Target

OBSERVAÇÃO

Se você não estiver usando o DTM, envie a confirmação do pedido para a Adobe Target.

Para rastrear o desempenho do seu site, envie informações de compra da página de confirmação de pedido para a Adobe Target. (Consulte Criar uma mbox orderConfirmPage na documentação do Adobe Target.) A Adobe Target reconhece os dados da mbox como dados de confirmação de pedido quando o nome da MBox é orderConfirmPage e usa os seguintes nomes de parâmetro específicos:

productPurchasedId: Uma lista de IDs que identificam os produtos comprados.
orderId: A ID do pedido.
orderTotal: O valor total da compra.

O código na página HTML renderizada que cria a mbox é semelhante ao seguinte exemplo:

<script type="text/javascript">
     mboxCreate('orderConfirmPage',
     'productPurchasedId=product1 product2 product3',
     'orderId=order1234',
     'orderTotal=24.54');
</script>

Os valores de cada parâmetro são diferentes para cada pedido. Portanto, é necessário um componente que gere o código com base nas propriedades da compra. O CQ Estrutura de integração de comércio eletrônico permite integrar com seu catálogo de produtos e implementar um carrinho de compras e uma página de check-out.

A amostra do Geometrixx Outdoors exibe a seguinte página de confirmação quando um visitante compra produtos:

chlimage_1-175

O código a seguir para o script JSP de um componente acessa as propriedades do carrinho de compras e imprime o código para criar a mbox.

<%--

  confirmationmbox component.

--%><%
%><%@include file="/libs/foundation/global.jsp"%><%
%><%@page session="false"
          import="com.adobe.cq.commerce.api.CommerceService,
                  com.adobe.cq.commerce.api.CommerceSession,
                  com.adobe.cq.commerce.common.PriceFilter,
                  com.adobe.cq.commerce.api.Product,
                  java.util.List, java.util.Iterator"%><%

/* obtain the CommerceSession object */
CommerceService commerceservice = resource.adaptTo(CommerceService.class);
CommerceSession session = commerceservice.login(slingRequest, slingResponse);

/* obtain the cart items */
List<CommerceSession.CartEntry> entries = session.getCartEntries();
Iterator<CommerceSession.CartEntry> cartiterator = entries.iterator();

/* iterate the items and get the product IDs */
String productIDs = new String();
while(cartiterator.hasNext()){
 CommerceSession.CartEntry entry = cartiterator.next();
 productIDs = productIDs + entry.getProduct().getSKU();
    if (cartiterator.hasNext()) productIDs = productIDs + ", ";
}

/* get the cart price and orderID */
String total = session.getCartPrice(new PriceFilter("CART", "PRE_TAX"));
String orderID = session.getOrderId();

%><div class="mboxDefault"></div>
<script type="text/javascript">
     mboxCreate('orderConfirmPage',
     'productPurchasedId=<%= productIDs %>',
     'orderId=<%= orderID %>',
     'orderTotal=<%= total %>');
</script>

Quando o componente é incluído na página de checkout do exemplo anterior, a origem da página inclui o seguinte script que cria a mbox:

<div class="mboxDefault"></div>
<script type="text/javascript">

     mboxCreate('orderConfirmPage',
     'productPurchasedId=47638-S, 46587',
     'orderId=d03cb015-c30f-4bae-ab12-1d62b4d105ca',
     'orderTotal=US$677.00');

</script>

Noções básicas sobre o componente do Target

O componente de Direcionamento permite que os autores criem mboxes dinâmicas a partir de componentes de conteúdo CQ. (Consulte Direcionamento de conteúdo.) O componente de Direcionamento está localizado em /libs/cq/personalization/components/target.

O script target.jsp acessa as propriedades da página para determinar o mecanismo de direcionamento a ser usado para o componente e, em seguida, executa o script apropriado:

Adobe Target: /libs/cq/personalization/components/target/engine_tnt.jsp
Adobe Target com AT.JS: /libs/cq/personalization/components/target/engine_atjs.jsp
Adobe Campaign: /libs/cq/personalization/components/target/engine_cq_campaign.jsp
Regras do lado do cliente/ContextHub: /libs/cq/personalization/components/target/engine_cq.jsp

A criação de mboxes

OBSERVAÇÃO

Quando o Adobe Target direciona o conteúdo, o script engine_tnt.jsp cria mboxes que contêm o conteúdo da experiência direcionada:

Adiciona um div com a classe de mboxDefault, conforme exigido pela API do Adobe Target.
Adiciona o conteúdo da mbox (o conteúdo da experiência direcionada) dentro do div elemento.

Seguindo mboxDefault div, o javascript que cria a mbox é inserido:

O nome, a ID e o local da mbox são baseados no caminho do repositório do componente.
O script obtém valores e nomes de parâmetros de Contexto do Cliente.
São feitas chamadas às funções que a mbox.js e outras bibliotecas de clientes definem para criar mboxes.

Bibliotecas de clientes para direcionamento de conteúdo

Estas são as categorias de clientlib disponíveis:

testandtarget.mbox
testandtarget.init
testandtarget.util
testandtarget.atjs
testandtarget.atjs-integration

Recursos do Business.Adobe.com

Cms Cloud Targeted Content Managed Cloud Dynamic Media Digital Asset Management Digital Signage

Desenvolvimento de conteúdo direcionado

Ativar a definição de metas com o Adobe Target em suas páginas

Seção do cabeçalho

Seção do corpo (início)

Seção do corpo (fim)

Usar um arquivo de biblioteca do Target personalizado

Desabilitação do comando Target para componentes

Enviando informações de confirmação de pedido para o Adobe Target

Noções básicas sobre o componente do Target

A criação de mboxes

Bibliotecas de clientes para direcionamento de conteúdo

Recursos do Business.Adobe.com

Nesta página

Exibir próximos:

Aprender

Documentação

Comunidade

Suporte

Recursos

Conta da Adobe

Adobe