Herramienta ContextHub de Adobe Experience Manager

Utilice la herramienta ContextHub de AEM para integrar Dynamic Tag Management en ContextHub de Adobe Experience Manager (AEM) (versión de la capa de datos de AEM). También puede utilizar esta herramienta para integrar la DTM en cualquier capa de datos, incluso en sitios web que no utilicen AEM.

Los clientes de DTM suelen utilizar elementos de datos para asignarlos a las capas de datos de sus sitios web. Por ejemplo, la capa de datos puede incluir información sobre un usuario que está mirando un producto en particular o que ha incluido un artículo en el carro de compras. DTM puede utilizar esta información en acciones y condiciones de regla de varias maneras. Esto incluye el envío de datos a Analytics con fines de creación de informes o a Target para mostrar contenido personalizado al usuario.

La herramienta ContextHub de AEM soluciona muchos problemas asociados a las capas de datos. Algunas capas de datos no se cargan en la parte superior de la página. Otras capas de datos son dinámicas o asíncronas, y cambian con frecuencia a medida que cambia la página. Anteriormente, estos problemas no permitían que DTM enviara datos o activara acciones correctamente.

La herramienta ContextHub de AEM elimina la necesidad de escribir código personalizado que compruebe con cierta frecuencia si la capa de datos cambia, se carga en algún lugar que no sea la parte superior de la página o se modifica según cambia la página.

Por ejemplo, supongamos que un cliente añade un artículo al carro de compras y, luego, lo elimina. Si la página no se actualiza a medida que cambia la capa de datos, DTM no reconocerá el cambio sin haber agregado código personalizado. La herramienta ContexHub de AEM contiene un motor de sondeo que comprueba si hay cambios cada segundo.

Dado que DTM ya puede rellenar elementos de datos de forma proactiva a través de la capa de datos, los usuarios también pueden utilizar los elementos de datos de ContextHub de AEM junto con las condiciones publicadas anteriormente, como el valor de los elementos de datos. Esto permite a los usuarios administrar los valores de la capa de datos al cargar una página o combinar la condición Valor del elemento de datos con el evento dataelementchanged, en los casos en que la capa de datos haya cambiado debido a la interacción del usuario.

Al configurar esta herramienta, puede utilizar la configuración predeterminada para integrarse con ContextHub de AEM o puede personalizar la estructura para trabajar con cualquier sitio web.

  1. Haga clic en <Nombre de propiedad web> > Overview > Add a Tool > AEM ContextHub.

  2. Ponga un nombre descriptivo a la herramienta.

    Este nombre se muestra en la pestaña Overview debajo de Installed Tools.

  3. Haga clic en Create Tool para mostrar la página AEM ContextHub Settings.

  4. Rellene los campos:

    Elemento Descripción
    Usar capa de datos predeterminada de ContextHub Utilice el formato de ContextHub de AEM. Con esta opción seleccionada, DTM hace referencia al esquema predeterminado de ContextHub en el caso de esta integración. Si ha realizado cambios en el esquema de ContextHub o quiere utilizar una capa de datos distinta, utilice la opción personalizada.
    Personalizar capa de datos de ContextHub Utilice un formato personalizado que se asigne a la estructura de las capas de datos de cualquier sitio web, aunque no utilice AEM. Esta opción le permite editar el esquema de la capa de datos. De forma predeterminada, añade la capa de datos predeterminada de ContextHub a la ventana de edición, donde puede realizar cambios o reemplazarla por completo con su código.
    Abrir editor Si elige la opción Personalizar la capa de datos de ContextHub, puede utilizar el editor para insertar el código personalizado.
    Añadir una nota Añada notas relativas a esta implementación.
  5. Haga clic en Save Changes.

Administración de capas de datos con la herramienta ContextHub

La herramienta AEM ContextHub de Dynamic Tag Management (DTM) se puede utilizar tanto para implementaciones de ContextHub como de capas de datos genéricas. El esquema de la capa de datos de ContextHub se carga de forma predeterminada en la herramienta y proporciona una integración sencilla con los almacenes de Adobe Experience Manager (AEM) ContextHub. Se proporcionan ejemplos tanto de la implementación predeterminada de ContextHub como de una implementación personalizada de capas de datos genéricas.

Requisitos previos

Para utilizar la herramienta ContextHub, debe satisfacer los siguientes requisitos previos:

  • Capa de datos de objeto de ContextHub o JavaScript existente en un sitio web.
  • Esquema JSON que define correctamente la capa de datos que se utiliza en el sitio web.
  • Propiedad web principal de DTM que se está utilizando en el sitio web.

Componentes de la herramienta ContextHub de AEM

La herramienta ContextHub de AEM añade dos funcionalidades a DTM:

  • Definición de la capa de datos
  • El tipo de capa de datos de ContextHub de AEM

Además, se ha añadido un nuevo tipo de evento para facilitar la monitorización de la capa de datos con nombre dataelementchanged. Este tipo de evento se puede utilizar independientemente de la herramienta ContextHub de AEM.

Cada área funcional corresponde a un paso de la configuración descrito en los dos ejemplos siguientes.

Monitorización de elementos de datos

El nuevo tipo de evento dataelementchanged monitoriza los cambios que se producen en un valor de elemento de datos específico durante una vista de página. Cabe señalar las siguientes observaciones al utilizar este tipo de evento.

  1. El elemento de datos debe asignarse a un valor de JavaScript simple. Los valores complejos como matrices y objetos que se devuelven en un script de elemento de datos personalizado no funcionarán correctamente. Las cookies, los selectores de CSS y los parámetros de URL también producen resultados inesperados, y es posible que no funcionen. Los valores simples como cadenas y números enteros funcionan bien.
  2. Sea prudente con la cantidad de tipos de evento dataelementchanged a los que se hace referencia en una sola página. Aunque la monitorización es eficaz, una gran cantidad de evaluaciones podría afectar el rendimiento de la página.
  3. El tipo de evento dataelementchanged funciona solo en la vista de página actual porque es un sistema de monitorización basado en DOM.
  4. La monitorización de elementos de datos sondea los valores.

Ejemplo predeterminado de capa de datos de ContextHub

Ejemplo de uso de la herramienta ContextHub de AEM, que hace referencia a la capa de datos predeterminada de ContextHub, y la usa, en la configuración de Dynamic Tag Management.

La capa de datos de ContextHub se cargará en un sitio web de prueba de Adobe Experience Manager (AEM), pero ContextHub se puede utilizar sin depender de AEM. Póngase en contacto con su representante de Adobe si desea utilizar ContextHub sin depender de AEM.

Se puede hacer referencia a todas las tiendas de ContextHub desde la consola del explorador.

La monitorización de la capa de datos de DTM se inicia antes que cualquier otra función de DTM, por lo que los ejemplos no implementarán la capa de datos a través de DTM aunque se pueda hacer. En su lugar, dependerán de la capa de datos que genere el servidor. De lo contrario, podrían aparecer advertencias de JavaScript, ya que es posible que algunos valores de la capa de datos no estén disponibles.

Definición de la capa de datos

El primer paso para configurar la herramienta ContextHub de AEM es añadirla a una propiedad web.

NOTA

En este momento, solo se permite una herramienta ContextHub de AEM por propiedad web de DTM.

  1. Haga clic en <Nombre de propiedad web> > Overview > Add a Tool > AEM ContextHub.

  2. Ponga un nombre descriptivo a la herramienta.

  3. Haga clic en Create Tool para mostrar la página AEM ContextHub Settings.

  4. Seleccione Use Default ContextHub Data Layer para aprovechar las tiendas estándares de ContextHub.

    O

    Seleccione Customize ContextHub Data Layer para modificar el esquema. Es necesario utilizar la opción personalizada si se está utilizando una capa de datos de ContextHub no predeterminada en la implementación.

    La raíz de la capa de datos predeterminada permite acceder a todas las tiendas de ContextHub. Dada la naturaleza dinámica de las tiendas de ContextHub, hay funciones adicionales disponibles con esta capa de datos, que no están disponibles en la referencia de objeto de JavaScript simple que se vale del enfoque de capa de datos genérica.

  5. (Condicional) Para utilizar una capa de datos personalizada, haga clic en Open Editor para ver la definición del esquema de la capa de datos. Si la capa de datos personalizada es una modificación del esquema de ContextHub, asegúrese de añadir “ContextHub” en el campo Data Layer Root.

    El esquema predeterminado de ContextHub se completa en el editor.

    1. Modifique el esquema según sea necesario para que coincida con el esquema de la capa de datos del sitio.
    2. Haga clic en Save and Close para guardar el esquema y cerrar el editor.
  6. Haga clic en Save Changes.

Creación de un elemento de datos de la capa de datos

  1. En la propiedad web, haga clic en la pestaña Rules y, a continuación, haga clic en Data Elements en el menú de la izquierda.

  2. Haga clic en Create New Data Element.

  3. Especifique un nombre para el elemento de datos. En este ejemplo, asigne al elemento de datos el nombre “total_price”.

  4. En la lista desplegable Type, seleccione AEM ContextHub.

    El nombre de la herramienta ContextHub de AEM se rellena en la “fuente”, pero solo se puede definir una herramienta ContextHub de AEM en la versión actual.

  5. Asigne el elemento de datos a la capa de datos seleccionando una ruta en el selector de objetos.

    En este ejemplo, seleccione el objeto cart.totalPriceFloat.

  6. Haga clic en Save Data Element.

Creación de una regla basada en eventos que utilice el tipo de evento de cambio de elementos de datos

  1. En la propiedad web, haga clic en la pestaña Rules y, a continuación, haga clic en Event Based Rules en el menú de la izquierda.

  2. Haga clic en Create New Rule.

  3. Asigne un nombre a la regla. En este ejemplo, asigne un nombre a la regla “cart_total_update”.

  4. Expanda la sección Condiciones.

  5. En la lista desplegable Event Type, seleccione dataelementchanged.

  6. Seleccione el elemento de datos que se creó en la sección anterior (total_price).

  7. En Rule Conditions, seleccione Data Element Value en la lista desplegable y haga clic en Add Criteria.

  8. Seleccione el elemento de datos que se creó en la sección anterior (total_price) y asigne un valor para que la regla se active.

    En este ejemplo, se utiliza una expresión regular para evaluar cualquier valor superior o igual a 50: ^([5-9]\d|[1-9]\d{2,})$

    NOTA

    Si los valores del elemento de datos se utilizan de esta manera como condiciones, es importante que la configuración del elemento de datos se tenga en cuenta en la coincidencia. Por ejemplo, si selecciona la opción Force Lowercase Value en la configuración del elemento de datos, el valor aparecerá en minúsculas antes de la evaluación. Dado que JavaScript distingue entre mayúsculas y minúsculas, “test” no es lo mismo que “Test” y la condición no se activaría como se espera.

  9. Expanda la sección Javascript / Third Party Tags.

  10. Haga clic en Add New Script.

  11. Añada un JavaScript no secuencial que proporcione una notificación si se activa la regla. Asigne a la regla el nombre “big_money_alert” y añada un script de alerta similar al siguiente ejemplo:

    alert('$' + _satellite.getVar(‘total_price’) + ‘ is big money!’);

  12. Haga clic en Save Code, luego en Save Rule.

Validar la implementación

En el sitio web habilitado para DTM que ejecuta la propiedad web anterior, valide la implementación.

  • En la consola del desarrollador, compruebe la existencia de la capa de datos (ContextHub).

  • Cambie el objeto de la capa de datos que se esté monitorizando a un valor que NO coincide con la condición anterior: ContextHub.setItem('/store/cart/totalPriceFloat','5');

  • Cambie el objeto de capa de datos que se esté monitoreando a un valor que NO coincida con la condición anterior: ContextHub.setItem('/store/cart/totalPriceFloat','52');

  • En la implementación de ejemplo, debería aparecer un cuadro de alerta:

Si la depuración de DTM está activada, la evaluación fallida debería aparecer en la consola.

Ejemplo de capa de datos personalizada

Ejemplo de uso de la herramienta ContextHub de AEM que hace referencia a una capa de datos personalizada que no es ContextHub, y la usa, en la configuración de Dynamic Tag Management.

La capa de datos de ejemplo (_dl) se cargará en la página web de prueba como una definición de un objeto de JavaScript en la sección <head/> de la página antes de hacer referencia al código incrustado de DTM.

<head> 
    <script> 
        window._dl = { 
            page: { 
                name: 'homepage', 
                quantity: 1, 
                friend: 'No one' } 
        } 
    </script> 
    <script src="//assets.adobedtm.com/satelliteLib-*.js"></script> 
</head> 

La monitorización de la capa de datos de DTM (ver a continuación) se inicia antes que cualquier otra función de DTM, por lo que los ejemplos no implementarán la capa de datos a través de DTM. De lo contrario, podrían aparecer advertencias de JavaScript, ya que es posible que algunos valores de la capa de datos no estén disponibles.

Definición de la capa de datos

El primer paso para configurar la herramienta ContextHub de AEM es añadirla a una propiedad web.

NOTA

En este momento, solo se permite una herramienta ContextHub de AEM por propiedad web de DTM.

  1. Haga clic en <Nombre de la propiedad web> > Overview > Add a Tool > AEM ContextHub.

  2. Ponga un nombre descriptivo a la herramienta.

  3. Haga clic en Create Tool para mostrar la página AEM ContextHub Settings.

  4. Seleccione Customize ContextHub Data Layer para modificar el esquema.

    Se debe añadir un nombre de objeto de JavaScript raíz al campo Data Layer Root para las capas de datos que no sean de ContextHub. La definición de _dl se utiliza en los ejemplos genéricos de esta sección.

  5. Haga clic en Open Editor para ver la definición del esquema de la capa de datos.

    De forma predeterminada, el esquema predeterminado de ContextHub se completa en el editor.

  6. Elimine el esquema predeterminado y pegue en el esquema de la capa de datos del sitio.

    En los ejemplos genéricos, se utiliza el siguiente esquema de muestra no perteneciente a ContextHub:

    { 
      "$schema": "https://json-schema.org/draft-04/schema#", 
      "type": "object", 
      "properties": { 
        "page": { 
          "type": "object", 
          "properties": { 
            "name": { 
              "type": "string" 
            }, 
            "quantity": { 
              "type": "number" 
            }, 
            "friend": { 
              "type": "string" 
            } 
          }, 
          "required": [ 
            "name", 
            "quantity", 
            "friend" 
          ] 
        } 
       }, 
      "required": [ 
        "page" 
      ] 
    } 
    
  7. Haga clic en Save and Close para guardar el esquema y cerrar el editor, y después, haga clic en Save Changes.

Creación de un elemento de datos de capa de datos

  1. En la propiedad web, haga clic en la pestaña Rules y, a continuación, haga clic Data Elements en el menú de la izquierda.

  2. Haga clic en Create New Data Element.

  3. Especifique un nombre para el elemento de datos. En este ejemplo, asigne al elemento de datos el nombre “my_friend”.

  4. En la lista desplegable Type, seleccione AEM ContextHub.

    El nombre de la herramienta ContextHub de AEM se rellena en la “fuente”, pero solo se puede definir una herramienta ContextHub de AEM en la versión actual.

  5. Asigne el elemento de datos a la capa de datos seleccionando una ruta en el selector de objetos.

    En este ejemplo, seleccione el objeto page.friend.

  6. Haga clic en Save Data Element.

Creación de una regla basada en eventos que utilice el tipo de evento de cambio de elementos de datos

  1. En la propiedad web, haga clic en la pestaña Rules y, a continuación, haga clic en Event Based Rules en el menú de la izquierda.

  2. Haga clic en Create New Rule.

  3. Asigne un nombre a la regla. En este ejemplo, asigne a la regla el nombre “find_a_friend”.

  4. Expanda la sección Condiciones.

  5. En la lista desplegable Event Type, seleccione dataelementchanged.

  6. Seleccione el elemento de datos que se creó en la sección anterior (my_friend).

  7. En Rule Conditions, seleccione Data Element Value en la lista desplegable y haga clic en Add Criteria.

  8. Seleccione el elemento de datos que se creó en la sección anterior (my_friend) y asigne un valor para que la regla se active.

    En este ejemplo, utilice “Carl” como valor.

    NOTA

    Si los valores del elemento de datos se utilizan de esta manera como condiciones, es importante que la configuración del elemento de datos se tenga en cuenta en la coincidencia. Por ejemplo, si selecciona la opción Force Lowercase Value en la configuración del elemento de datos, el valor cambiará a minúsculas antes de la evaluación. Dado que JavaScript distingue entre mayúsculas y minúsculas, “test” no es lo mismo que “Test” y la condición no se activaría como se espera.

  9. Expanda la sección Javascript / Third Party Tags.

  10. Haga clic en Add New Script.

  11. Añada un JavaScript no secuencial que proporcione una notificación si se activa la regla. Asigne a la regla el nombre “found_my_friend” y añada un script de alerta similar al siguiente ejemplo:

    alert(_satellite.getVar(‘my_friend’) + ‘ is my friend.’);

  12. Haga clic en Save Code, luego en Save Rule.

Validar la implementación

En el sitio web habilitado para DTM que ejecuta la propiedad web anterior, valide la implementación.

  • En la consola del desarrollador, compruebe la existencia de la capa de datos (_dl).

  • Cambie el objeto de la capa de datos que se esté monitorizando por el valor definido en la condición anterior (_dl.page.friend = ‘Carl’).

    • En la implementación de ejemplo, debería aparecer un cuadro de alerta:

  • Cambie el valor del objeto (_dl.page.friend = ‘Bob’) y, así, no debería mostrarse ninguna alerta.

    NOTA

    Si la depuración de DTM está activada, la evaluación fallida debería aparecer en la consola.

  • Cambie el objeto a un valor en minúsculas del resultado (_dl.page.friend = ‘carl’) y, así, no debería mostrarse ninguna alerta.

  • Cambie el objeto por el valor correcto, en mayúsculas o minúsculas, del resultado (_dl.page.friend = ‘Carl’) y, así, la alerta debería volver a mostrarse.

En esta página