Desenvolvimento de conteúdo direcionado

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

OBSERVAÇÃO

Quando você público alvo um componente AEM autor, o componente faz uma série de chamadas do lado do servidor para a Adobe Target para registrar a campanha, configurar o oferta e recuperar segmentos Adobe Target (se configurado). Nenhuma chamada do lado do servidor é feita AEM publicação para a Adobe Target.

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

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

A seção principal

Adicione ambos os blocos de código a seguir à seção <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?lang=pt-BR"/>

Esse código adiciona os objetos javascript do Analytics necessários e carrega as bibliotecas de serviços em nuvem associadas ao site. Para o serviço de Públicos alvos, as bibliotecas são carregadas via /libs/cq/analytics/components/testandtarget/headlibs.jsp

O conjunto de bibliotecas carregadas depende do tipo de biblioteca do cliente de público alvo (mbox.js ou at.js) usada na configuração do Público alvo:

Para mbox.js padrão

<script type="text/javascript" src="/libs/cq/foundation/testandtarget/parameters.js?lang=pt-BR"></script>
 <script type="text/javascript" src="/libs/cq/foundation/testandtarget/mbox.js?lang=pt-BR"></script>
 <script type="text/javascript" src="/libs/cq/foundation/personalization/integrations/commons.js?lang=pt-BR"></script>
 <script type="text/javascript" src="/libs/cq/foundation/testandtarget/util.js?lang=pt-BR"></script>
 <script type="text/javascript" src="/libs/cq/foundation/testandtarget/init.js?lang=pt-BR"></script>

Para mbox.js personalizado

<script type="text/javascript" src="/etc/cloudservices/testandtarget/%3CCLIENT-CODE%3E/_jcr_content/public/mbox.js?lang=pt-BR"></script>
        <script type="text/javascript" src="/libs/cq/foundation/testandtarget/parameters.js?lang=pt-BR"></script>
 <script type="text/javascript" src="/libs/cq/foundation/personalization/integrations/commons.js?lang=pt-BR"></script>
 <script type="text/javascript" src="/libs/cq/foundation/testandtarget/util.js?lang=pt-BR"></script>
 <script type="text/javascript" src="/libs/cq/foundation/testandtarget/init.js?lang=pt-BR"></script>

Para at.js

<script type="text/javascript" src="/libs/cq/foundation/testandtarget/parameters.js?lang=pt-BR"></script>
 <script type="text/javascript" src="/libs/cq/foundation/testandtarget/atjs-integration.js?lang=pt-BR"></script>
 <script type="text/javascript" src="/libs/cq/foundation/testandtarget/atjs.js?lang=pt-BR"></script>
OBSERVAÇÃO

Somente a versão at.js fornecida com o produto é suportada. A versão de at.js fornecida com o produto pode ser obtida consultando o arquivo at.js no local:

/libs/cq/testandtarget/clientlibs/testandtarget/atjs/source/at.js.

Para o at.js personalizado

<script type="text/javascript" src="/etc/cloudservices/testandtarget/%3CCLIENT-CODE%3E/_jcr_content/public/at.js?lang=pt-BR"></script>
    <script type="text/javascript" src="/libs/cq/foundation/testandtarget/parameters.js?lang=pt-BR"></script>
 <script type="text/javascript" src="/libs/cq/foundation/testandtarget/atjs-integration.js?lang=pt-BR"></script>

A funcionalidade do Público alvo no lado do cliente é gerenciada pelo objeto CQ_Analytics.TestTarget. Portanto, a página conterá algum código init, 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 de análise e as referências às bibliotecas javascript do lado do cliente. O arquivo testandtarget.js contém as funções mbox.js. 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?lang=pt-BR" type="text/css">
<script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/testandtarget.js?lang=pt-BR"></script>
<script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/init.js?lang=pt-BR"></script>

A Seção do corpo (start)

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

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

A seção do corpo (fim)

Adicione o seguinte código imediatamente antes da tag </body> final:

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

O script JSP desse componente gera chamadas para a API javascript do Público alvo 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>

Usando um arquivo de biblioteca de Públicos alvos personalizado

OBSERVAÇÃO

Se você não estiver usando o DTM ou outro sistema de marketing de públicos alvos, poderá usar arquivos personalizados da biblioteca de públicos alvos.

OBSERVAÇÃO

Por padrão, as mboxes ficam ocultas - a classe mboxDefault determina esse comportamento. Ocultar mboxes garante que os visitantes não vejam o conteúdo padrão antes de ser trocado; entretanto, 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 da nuvem do Público alvo. Para adicionar o arquivo, o arquivo mbox.js deve estar disponível no sistema de arquivos.

Por exemplo, se você quiser usar o serviço ID do Marketing Cloud, é necessário baixar o arquivo mbox.js para que ele contenha o valor correto para a variável imsOrgID, que é baseada no seu locatário. Essa variável é necessária para integração com o serviço de ID do Marketing Cloud. Para obter informações, consulte Adobe Analytics como a Fonte do Relatórios para Adobe Target e Antes de implementar.

OBSERVAÇÃO

Se uma mbox personalizada estiver definida em uma configuração de Público alvo, todos devem ter acesso de leitura a /etc/cloudservices nos servidores de publicação. Sem esse acesso, carregar arquivos mbox.js no site de publicação resulta em um erro 404.

  1. Vá para a página CQ Ferramentas e selecione Cloud Services. (https://localhost:4502/libs/cq/core/content/tools/cloudservices.html)
  2. Na árvore, selecione Adobe Target e, na lista das configurações, clique com o duplo do mouse em sua configuração de Público alvo.
  3. Na página de configuração, clique em Editar.
  4. Para a propriedade Custom mbox.js, clique em Procurar e selecione o arquivo.
  5. Para aplicar as alterações, insira a senha da sua conta Adobe Target, clique em Reconectar ao Público alvo e clique 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 seu Público alvo inclui um arquivo mbox.js personalizado, o código necessário na seção de cabeçalho da sua página adiciona o arquivo à estrutura da biblioteca do cliente em vez de uma referência à biblioteca testandtarget.js.

Desabilitando o comando Público alvo para componentes

A maioria dos componentes pode ser convertida em componentes direcionados usando o comando Público alvo no menu de contexto.

chlimage_1-29

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

  • Nome: cq:disableTargeting
  • Tipo: booliano
  • Valor: True

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

chlimage_1-22

Enviando informações de confirmação de pedido para a 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 de seu site, envie informações de compra da página de confirmação do 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 seu nome 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 gera o código com base nas propriedades da compra. O CQ eCommerce Integration Framework permite que você se integre ao catálogo de produtos e implemente um carrinho de compras e uma página de checkout.

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

chlimage_1-23

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?lang=pt-BR"%><%
%><%@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 fonte 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 de Público alvo

O componente de Público alvo permite que os autores criem mboxes dinâmicas a partir de componentes de conteúdo do CQ. (Consulte Definição de metas de conteúdo.) O componente do Público alvo está localizado em /libs/cq/personalization/components/público alvo.

O script público alvo.jsp acessa as propriedades da página para determinar o mecanismo de definição de metas 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/ContextHub do cliente: /libs/cq/personalization/components/target/engine_cq.jsp

A criação de mboxes

OBSERVAÇÃO

Por padrão, as mboxes ficam ocultas - a classe mboxDefault determina esse comportamento. Ocultar mboxes garante que os visitantes não vejam o conteúdo padrão antes de ser trocado; entretanto, ocultar mboxes afeta o desempenho percebido.

Quando a 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 elemento 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 elemento div.

Após o elemento div mboxDefault, 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 para as funções que mbox.js e outras bibliotecas clientes definem para criar mboxes.

Bibliotecas do cliente para direcionamento de conteúdo

Veja a seguir as categorias clientlib disponíveis:

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

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now