Show Menu
TEMAS×

Adobe Experience Manager ContextHub tool

Utilice la herramienta ContextHub de AEM para integrar la administración dinámica de etiquetas 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 la DTM a menudo utilizan elementos de datos para asignarlos a las capas de datos de sus sitios web. Por ejemplo, la capa de datos podría incluir información de un usuario que esté consultando un producto específico o haya añadido un elemento al carro de compras. La DTM puede utilizar esa información de distintas formas en condiciones de reglas y acciones. Entre otras cosas, se incluye el envío de datos a Analytics para generar informes o a Target para mostrar contenido personalizado para el usuario.
La herramienta ContextHub de AEM resuelve muchos problemas relacionados con 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 asincrónicas y cambian con frecuencia a medida que cambia la página. Anteriormente, ambos problemas dificultaban que la DTM enviara datos correctamente o activara una acción.
La herramienta ContextHub de AEM elimina la necesidad de escribir código personalizado que compruebe constantemente si la capa de datos cambia, se carga en algún sitio que no sea la parte superior de la página o se modifica a medida que cambia la página.
A modo de ejemplo, supongamos que un cliente añade un elemento al carro de compras y después lo elimina. Si la página no se actualiza a medida que cambia la capa de datos, la DTM no reconocerá el cambio sin una adición de código personalizada. La herramienta ContextHub de AEM incluye un motor de sondeo que comprueba cada segundo si se ha realizado algún cambio.
Dado que la DTM ahora puede rellenar elementos de datos de forma proactiva a través de la capa de datos, los usuarios también podrán utilizar los elementos de datos de ContextHub de AEM junto con otras condiciones emitidas anteriormente, como el valor del elemento de datos. De ese modo, los usuarios podrán gestionar los valores de la capa de datos al cargar una página o combinar la condición del valor del elemento de datos con el evento dataelementchanged , en caso de que la capa de datos haya cambiado debido a la interacción de un usuario.
Al configurar esta herramienta, puede integrar la configuración predeterminada en ContextHub de AEM o personalizar la estructura para trabajar en cualquier sitio web.
  1. Click <Web Property Name> > Overview > Add a Tool > AEM ContextHub .
  2. Especifique un nombre descriptivo para la herramienta.
    This name displays on the Overview tab under Installed Tools.
  3. Click Create Tool to display the AEM ContextHub Settings page.
  4. Rellene los campos:
    Elemento
    Descripción
    Usar la capa de datos de ContextHub predeterminada
    Permite utilizar el formato de ContextHub de AEM. Con esta opción seleccionada, la DTM aplica el esquema predeterminado de ContextHub en la 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 la capa de datos de ContextHub
    Permite utilizar un formato personalizado que se asigne a la estructura de capa de datos de cualquier sitio web, incluso si no utiliza AEM. Esta opción le permite editar el esquema de capa de datos. De forma predeterminada, la ventana de edición se rellena con la capa de datos predeterminada de ContextHub, donde puede realizar cambios o sustituirla íntegramente por su código.
    Abrir editor
    Si elige la opción Personalizar la capa de datos de ContextHub, puede utilizar el editor para insertar su código personalizado.
    Agregar una nota
    Permite agregar cualquier nota acerca de la implementación.
  5. Haga clic en Save Changes .

Data layer management using the ContextHub tool

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 reunir los siguientes requisitos previos:
  • Una capa de datos de un objeto de JavaScript o ContextHub existente en un sitio web.
  • Un esquema JSON que defina correctamente la capa de datos en uso en el sitio web.
  • Una propiedad web activa de la DTM en uso en el sitio web.

AEM ContextHub tool components

La herramienta ContextHub de AEM agrega dos funciones a la DTM:
  • La definición de la capa de datos
  • El tipo de capa de datos de ContextHub de AEM
Además, se ha agregado un nuevo tipo de evento, llamado dataelementchanged , que facilitará la supervisión de la capa de datos. Este tipo de evento se puede utilizar de forma independiente a la herramienta ContextHub de AEM.
Cada área funcional corresponde a un paso de la configuración descrita en los ejemplos siguientes:

Data element monitoring

The new dataelementchanged event type monitors any changes that occur to a specific data element value during a page view. Se deben tener en cuenta 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 devueltos en un script personalizado del elemento de datos no funcionarán correctamente. Las cookies, los selectores de CSS y los parámetros de URL también producen resultados inesperados y podrían no funcionar. Los valores simples como cadenas y valores enteros funcionan correctamente.
  2. Intente no utilizar demasiado el tipo de evento dataelementchanged cuando se haga referencia a este en una única página. Aunque la supervisión es eficiente, una cantidad elevada de evaluaciones podría afectar al rendimiento de la página.
  3. El tipo de evento dataelementchanged funciona únicamente en la vista de página actual porque se trata de un sistema de supervisión basado en DOM.
  4. La pantalla del elemento de datos sondea los valores.

ContextHub data layer default example

Example using the AEM ContextHub tool that references and uses the default ContextHub data layer within the Dynamic Tag Management configuration.
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.
Todos los almacenes de ContextHub se pueden consultar desde la consola del explorador.
La pantalla de la capa de datos de la DTM se inicia antes que cualquier otra función de la DTM, de modo que en los ejemplos no se implementará la capa de datos a través de la DTM aunque esto sea posible. En lugar de eso, dependerán de la capa de datos generada por el servidor. De lo contrario, podría mostrarse alguna advertencia de JavaScript debido a que no estén disponibles determinados valores de la capa de datos.

Definir la capa de datos

El primer paso para configurar la herramienta ContextHub de AEM es agregarla a la propiedad web.
En este momento, solo se permite una herramienta contexthub de AEM por propiedad web de DTM.
  1. Click <Web Property Name> > Overview > Add a Tool > AEM ContextHub .
  2. Especifique un nombre descriptivo para la herramienta.
  3. Click Create Tool to display the AEM ContextHub Settings page.
  4. Select Use Default ContextHub Data Layer to leverage the standard ContextHub stores.
    O
    Select Customize ContextHub Data Layer to modify the schema. Debe seleccionar la opción personalizada si utiliza una capa de datos no predeterminada de ContextHub en la implementación.
    La raíz de la capa de datos predeterminada permite acceder a todos los almacenes de ContextHub. Debido al carácter dinámico de los almacenes de ContextHub, hay funciones adicionales disponibles en esta capa de datos que no están disponibles en el objeto de referencia simple de JavaScript que se utiliza en el uso genérico de la capa de datos.
  5. (Conditional) To use a custom data layer, click Open Editor to view the data layer schema definition. If the custom data layer is a modification of the ContextHub schema be sure to add “ContextHub” in the Data Layer Root field.
    En el editor se rellena el esquema predeterminado de ContextHub.
    1. Modifique el esquema según sea necesario para que coincida con el esquema de la capa de datos del sitio.
    2. Click Save and Close to save the schema and close the editor.
  6. Haga clic en Save Changes .

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

  1. In the web property, click the Rules tab, then click Data Elements in the left menu.
  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. From the Type drop-down list, select AEM ContextHub .
    El campo “Origen” se rellena con el nombre de la herramienta ContextHub de AEM, 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 .

Crear una regla basada en eventos que use el tipo de evento de cambio de elemento de datos

  1. In the web property, click the Rules tab, then click Event Based Rules in the left menu.
  2. Haga clic en Create New Rule .
  3. Asigne un nombre a la regla. En este ejemplo, asigne a la regla el nombre “cart_total_update”.
  4. Amplíe la sección Condiciones.
  5. From the Event Type drop-down list, select dataelementchanged .
  6. Seleccione el elemento de datos creado en la sección anterior (total_price).
  7. Under Rule Conditions , select Data Element Value from the drop-down list, then click Add Criteria .
  8. Seleccione el elemento de datos creado en la sección anterior (total_price) y asígnele un valor para crear la regla de activación.
    In this example, a regular expression is used to evaluate anything greater than or equal to 50: ^([5-9]\d|[1-9]\d{2,})$
    Si los valores del elemento de datos se utilizan de este modo como condiciones, es importante tener en cuenta la configuración del elemento de datos en la coincidencia. For example, selecting the Force Lowercase Value option in the data element settings would convert the value to all lowercase before evaluation. JavaScript distingue entre mayúsculas y minúsculas, de modo que no es lo mismo “test” que “Test” y, por tanto, la condición no se activaría como es de esperar.
  9. Expand the Javascript / Third Party Tags section.
  10. Haga clic en Add New Script .
  11. Agregue un JavaScript no secuencial que genere una notificación si la regla se activa. Asigne a la regla el nombre “big_money_alert” y agregue un script de alerta similar al siguiente ejemplo:
    alert('$' + _satellite.getVar(‘total_price’) + ‘ is big money!’);
  12. Click Save Code , then click Save Rule .

Validar la implementación

Valide la implementación en el sitio web habilitado por la DTM que ejecuta la propiedad web mencionada anteriormente.
  • En la consola de desarrolladores, compruebe si existe alguna capa de datos ( ContextHub ).
  • Cambie el objeto de capa de datos que esté bajo supervisión por un valor que NO coincida con la condición anterior: ContextHub.setItem('/store/cart/totalPriceFloat','5'); .
  • Cambie el objeto de capa de datos que esté bajo supervisión por un valor que SÍ coincida con la condición anterior: ContextHub.setItem('/store/cart/totalPriceFloat','52'); .
  • En la implementación de ejemplo, debería mostrarse un cuadro de alerta:
Si la depuración de la DTM está activada, debería mostrarse el error de evaluación en la consola.

Custom data layer example

Example using the AEM ContextHub tool that references and uses a custom, non-ContextHub data layer within the Dynamic Tag Management configuration.
The example data layer ( _dl ) will be loaded on the test web page as a Javascript object definition in the <head/> section of the page before the DTM embed code is referenced.
<head> 
    <script> 
        window._dl = { 
            page: { 
                name: 'homepage', 
                quantity: 1, 
                friend: 'No one' } 
        } 
    </script> 
    <script src="//assets.adobedtm.com/satelliteLib-*.js"></script> 
</head> 

La pantalla de la capa de datos de la DTM (véase a continuación) se inicia antes que cualquier otra función de la DTM, de modo que en los ejemplos no se implementará la capa de datos a través de la DTM. De lo contrario, podría mostrarse alguna advertencia de JavaScript debido a que no estén disponibles determinados valores de la capa de datos.

Definir la capa de datos

El primer paso para configurar la herramienta ContextHub de AEM es agregarla a la propiedad web.
En este momento, solo se permite una herramienta contexthub de AEM por propiedad web de DTM.
  1. Click <Web Property Name> > Overview > Add a Tool > AEM ContextHub .
  2. Especifique un nombre descriptivo para la herramienta.
  3. Click Create Tool to display the AEM ContextHub Settings page.
  4. Select Customize ContextHub Data Layer to modify the schema.
    A root Javascript object name must be added to the Data Layer Root field for non-ContextHub data layers. The _dl definition is used in the generic examples in this section.
  5. Click Open Editor to view the data layer schema definition.
    De forma predeterminada, en el editor se rellena el esquema predeterminado de ContextHub.
  6. Elimine el esquema predeterminado y pegue el esquema de la capa de datos del sitio.
    En los ejemplos genéricos se utiliza el siguiente esquema de muestra, que no es de 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. Click Save and Close to save the schema and close the editor, then click Save Changes .

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

  1. In the web property, click the Rules tab, then click Data Elements in the left menu.
  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. From the Type drop-down list, select AEM ContextHub .
    El campo “Origen” se rellena con el nombre de la herramienta ContextHub de AEM, 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 .

Crear una regla basada en eventos que use el tipo de evento de cambio de elemento de datos

  1. In the web property, click the Rules tab, then click Event Based Rules in the left menu.
  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. Amplíe la sección Condiciones.
  5. From the Event Type drop-down list, select dataelementchanged .
  6. Seleccione el elemento de datos creado en la sección anterior (my_friend).
  7. Under Rule Conditions , select Data Element Value from the drop-down list, then click Add Criteria .
  8. Seleccione el elemento de datos creado en la sección anterior (my_friend) y asígnele un valor para crear la regla de activación.
    En este ejemplo, utilice “Carl” como valor.
    Si los valores del elemento de datos se utilizan de este modo como condiciones, es importante tener en cuenta la configuración del elemento de datos en la coincidencia. For example, selecting the Force Lowercase Value option in the data element settings would convert the value to all lowercase before evaluation. JavaScript distingue entre mayúsculas y minúsculas, de modo que no es lo mismo “test” que “Test” y, por tanto, la condición no se activaría como es de esperar.
  9. Expand the Javascript / Third Party Tags section.
  10. Haga clic en Add New Script .
  11. Agregue un JavaScript no secuencial que genere una notificación si la regla se activa. Asigne a la regla el nombre “found_my_friend” y agregue un script de alerta similar al siguiente ejemplo:
    alert(_satellite.getVar(‘my_friend’) + ‘ is my friend.’);
  12. Click Save Code , then click Save Rule .

Validar la implementación

Valide la implementación en el sitio web habilitado por la DTM que ejecuta la propiedad web mencionada anteriormente.
  • En la consola de desarrolladores, compruebe si existe alguna capa de datos ( _dl ).
  • Cambie el objeto de capa de datos que está bajo supervisión por el valor definido en la condición anterior ( _dl.page.friend = ‘Carl’ ).
    • En la implementación de ejemplo, debería mostrarse un cuadro de alerta:
  • Change the object to a different value ( _dl.page.friend = ‘Bob’ ) and no alert should display.
    Si la depuración de la DTM está activada, debería mostrarse el error de evaluación en la consola.
  • Change the object to a lowercase value of the match ( _dl.page.friend = ‘carl’ ) and no alert should display.
  • Change the object to the correct case value of the match ( _dl.page.friend = ‘Carl’ ) and the alert should once again display.