Show Menu
TEMAS×

Desarrollo para contenido objetivo

En esta sección se describen temas sobre el desarrollo de componentes para su uso con la segmentación de contenido.
Cuando se destinatario un componente en el autor de AEM, el componente realiza una serie de llamadas del lado del servidor a Adobe Target para registrar la campaña, configurar ofertas y recuperar segmentos de Adobe Target (si están configurados). No se realizan llamadas del lado del servidor desde la publicación de AEM en Adobe Target.

Habilitar el objetivo con Adobe Target en las páginas

Para utilizar componentes de destino en las páginas que interactúan con Adobe Target, incluya código específico del lado del cliente en el elemento <head>.

Sección principal

Añada los dos siguientes bloques de código a la sección <head> de la 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"/>

Este código agrega los objetos javascript de análisis necesarios y carga las bibliotecas de servicios de nube asociadas al sitio web. Para el servicio de Destinatario, las bibliotecas se cargan mediante /libs/cq/analytics/components/testandtarget/headlibs.jsp
El conjunto de bibliotecas cargadas depende del tipo de biblioteca de cliente de destinatario (mbox.js o at.js) que se utilice en la configuración de Destinatario:
Para mbox.js predeterminado
<script type="text/javascript" src="/libs/cq/foundation/testandtarget/parameters.js"></script>
 <script type="text/javascript" src="/libs/cq/foundation/testandtarget/mbox.js"></script>
 <script type="text/javascript" src="/libs/cq/foundation/personalization/integrations/commons.js"></script>
 <script type="text/javascript" src="/libs/cq/foundation/testandtarget/util.js"></script>
 <script type="text/javascript" src="/libs/cq/foundation/testandtarget/init.js"></script>

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

Para at.js
<script type="text/javascript" src="/libs/cq/foundation/testandtarget/parameters.js"></script>
 <script type="text/javascript" src="/libs/cq/foundation/testandtarget/atjs-integration.js"></script>
 <script type="text/javascript" src="/libs/cq/foundation/testandtarget/atjs.js"></script>

Solo se admite la versión de at.js enviada con el producto. La versión de at.js envío con el producto puede obtenerse consultando el at.js archivo en la ubicación:
/libs/cq/testandtarget/clientlibs/testandtarget/atjs/source/at.js .
Para at.js personalizado
<script type="text/javascript" src="/etc/cloudservices/testandtarget/<CLIENT-CODE>/_jcr_content/public/at.js"></script>
    <script type="text/javascript" src="/libs/cq/foundation/testandtarget/parameters.js"></script>
 <script type="text/javascript" src="/libs/cq/foundation/testandtarget/atjs-integration.js"></script>

El CQ_Analytics.TestTarget objeto administra la funcionalidad de Destinatario en el lado del cliente. Por lo tanto, la página contendrá algún código de inicio, como en el siguiente ejemplo:
<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>

JSP agrega los objetos de javascript de análisis necesarios y las referencias a bibliotecas de javascript del lado del cliente. El archivo testandtarget.js contiene las funciones mbox.js. El HTML que genera la secuencia de comandos es similar al siguiente ejemplo:
<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>

La sección del cuerpo (inicio)

Añada el siguiente código inmediatamente después de la etiqueta <body> para agregar las características de contexto de cliente a la página:
<cq:include path="clientcontext" resourceType="cq/personalization/components/clientcontext"/>

La sección del cuerpo (final)

Añada el siguiente código inmediatamente antes de la etiqueta final </body>:
<cq:include path="cloudservices" resourceType="cq/cloudserviceconfigs/components/servicecomponents"/>

El script JSP de este componente genera llamadas a la API de javascript de Destinatario e implementa otras configuraciones necesarias. El HTML que genera la secuencia de comandos es similar al siguiente ejemplo:
<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>

Uso de un archivo de biblioteca de Destinatario personalizado

Si no utiliza la DTM u otro sistema de marketing de destinatario, puede utilizar archivos de biblioteca de destinatario personalizados.
De forma predeterminada, los mboxes están ocultos: la clase mboxDefault determina este comportamiento. La ocultación de mboxes garantiza que los visitantes no verán el contenido predeterminado antes de que se intercambien; sin embargo, la ocultación de mboxes afecta al rendimiento percibido.
El archivo mbox.js predeterminado que se utiliza para crear mboxes se encuentra en /etc/clientlibs/foundation/testandtarget/mbox/source/mbox.js. Para utilizar un archivo mbox.js de cliente, agregue el archivo a la configuración de la nube de Destinatario. Para agregar el archivo, el archivo mbox.js debe estar disponible en el sistema de archivos.
Por ejemplo, si desea utilizar el servicio de ID de Marketing Cloud, debe descargar mbox.js para que contenga el valor correcto para la imsOrgID variable, que se basa en su inquilino. Esta variable es necesaria para la integración con el servicio de Marketing Cloud ID. Para obtener más información, consulte Adobe Analytics como fuente de Sistema de informes para Adobe Target y antes de la implementación .
Si un mbox personalizado está definido en una configuración de Destinatario, todos deben tener acceso de lectura a /etc/cloudservices en los servidores de publicación. Sin este acceso, la carga de archivos mbox.js en el sitio web de publicación produce un error 404.
  1. Vaya a la página Herramientas de CQ y seleccione Cloud Service . ( https://localhost:4502/libs/cq/core/content/tools/cloudservices.html )
  2. En el árbol, seleccione Adobe Target y, en la lista de configuraciones, haga clic con el botón doble en la configuración del Destinatario.
  3. En la página de configuración, haga clic en Editar.
  4. Para la propiedad Custom mbox.js, haga clic en Examinar y seleccione el archivo.
  5. Para aplicar los cambios, introduzca la contraseña de la cuenta de Adobe Target, haga clic en Volver a conectar con Destinatario y, a continuación, haga clic en Aceptar cuando la conexión se haya realizado correctamente. A continuación, haga clic en Aceptar en el cuadro de diálogo Editar componente.
La configuración de Destinatario incluye un archivo mbox.js personalizado; el código requerido en la sección de encabezado de la página agrega el archivo al marco de trabajo de la biblioteca del cliente en lugar de una referencia a la biblioteca testandtarget.js.

Desactivación del comando Destinatario para componentes

La mayoría de los componentes se pueden convertir en componentes de destino mediante el comando Destinatario del menú contextual.
Para quitar el comando Destinatario del menú contextual, agregue la siguiente propiedad al nodo cq:editConfig del componente:
  • Nombre: cq:disableTargeting
  • Tipo: Boolean (booleano)
  • Valor: True
Por ejemplo, para desactivar la segmentación para los componentes de título de las páginas del sitio de demostración de Geometrixx, agregue la propiedad al nodo /apps/geometrixx/components/title/cq:editConfig.

Envío de información de confirmación de pedido al Adobe Target

Si no utiliza la DTM, envíe la confirmación del pedido a Adobe Target.
Para rastrear el rendimiento de su sitio web, envíe la información de compra desde la página de confirmación del pedido al Adobe Target. (Consulte Creación de un mbox orderConfirmPage en la documentación de Adobe Target). Adobe Target reconoce los datos de mbox como datos de confirmación de pedido cuando el nombre de MBox es orderConfirmPage y utiliza los siguientes nombres de parámetro específicos:
  • productPurchasedId: Una lista de ID que identifica los productos comprados.
  • orderId: ID del pedido.
  • orderTotal: El importe total de la compra.
El código de la página HTML representada que crea el mbox es similar al siguiente ejemplo:
<script type="text/javascript">
     mboxCreate('orderConfirmPage',
     'productPurchasedId=product1 product2 product3',
     'orderId=order1234',
     'orderTotal=24.54');
</script>

Los valores de cada parámetro son diferentes para cada pedido. Por lo tanto, se requiere un componente que genere el código basado en las propiedades de la compra. CQ eCommerce Integration Framework le permite integrarse con el catálogo de productos e implementar un carro de compras y una página de cierre de compra.
El ejemplo de Geometrixx Outdoors muestra la siguiente página de confirmación cuando un visitante compra productos:
El siguiente código para la secuencia de comandos JSP de un componente accede a las propiedades del carro de compras y, a continuación, imprime el código para crear el 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>

Cuando el componente se incluye en la página de cierre de compra del ejemplo anterior, el origen de la página incluye la siguiente secuencia de comandos que crea el 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>

Explicación del componente Destinatario

El componente Destinatario permite a los autores crear mboxes dinámicos a partir de componentes de contenido de CQ. (Consulte Objetivo de contenido ). El componente Destinatario se encuentra en /libs/cq/personalization/components/destinatario.
La secuencia de comandos de destinatario.jsp accede a las propiedades de la página para determinar el motor de determinación de objetivos que se va a utilizar para el componente y, a continuación, ejecuta la secuencia de comandos adecuada:
  • Adobe Target: /libs/cq/personalization/components/target/engine_tnt.jsp
  • Adobe Target con AT.JS : /libs/cq/personalization/components/target/engine_atjs.jsp
  • Adobe Campaign : /libs/cq/personalization/components/target/engine_cq_campaign.jsp
  • Reglas de cliente/ContextHub: /libs/cq/personalization/components/target/engine_cq.jsp

Creación de mboxes

De forma predeterminada, los mboxes están ocultos: la clase mboxDefault determina este comportamiento. La ocultación de mboxes garantiza que los visitantes no verán el contenido predeterminado antes de que se intercambien; sin embargo, la ocultación de mboxes afecta al rendimiento percibido.
Cuando Adobe Target dirige el objetivo de contenido, la secuencia de comandos engine_tnt.jsp crea mboxes que contienen el contenido de la experiencia de destino:
  • Añade un div elemento con la clase de mboxDefault , como requiere la API de Adobe Target.
  • Añade el contenido del mbox (el contenido de la experiencia de destino) dentro del div elemento.
Después del mboxDefault elemento div, se inserta el javascript que crea el mbox:
  • El nombre, el ID y la ubicación del mbox se basan en la ruta del repositorio del componente.
  • La secuencia de comandos obtiene los nombres y valores de los parámetros de ClientContext.
  • Se realizan llamadas a las funciones que mbox.js y otras bibliotecas de cliente definen para crear mboxes.

Bibliotecas de clientes para la segmentación de contenido

Las siguientes son las categorías clientlib disponibles:
  • testandtarget.mbox
  • testandtarget.init
  • testandtarget.util
  • testandtarget.atjs
  • testandtarget.atjs-integration