Show Menu
TEMAS×

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 de que un usuario está mirando un producto en particular o que ha colocado un elemento en el carro de compras. La DTM puede utilizar esta información en condiciones de regla y acciones de varias maneras. Esto incluye el envío de datos a Analytics con fines de sistema de informes o de Destinatario para mostrar contenido personalizado para el usuario.
La herramienta ContextHub de AEM soluciona muchos problemas asociados 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. En el pasado, ambos problemas dificultaban que la DTM enviara datos o activara acciones.
La herramienta ContextHub de AEM elimina la necesidad de escribir código personalizado que compruebe con 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 a medida que cambia la página.
Por ejemplo, supongamos que un cliente coloca un artículo en el carro de compras y luego lo elimina. Si la página no se actualiza a medida que cambia la capa de datos, la DTM no reconocerá el cambio sin agregar un código personalizado. La herramienta AEM ContexHub contiene un motor de sondeo que comprueba cada segundo si hay cambios.
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 pueden utilizar AEM elementos de datos de ContextHub junto con las condiciones publicadas anteriormente, como el valor del elemento 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 AEM ContextHub 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. Especifique un nombre descriptivo para la herramienta.
    Este nombre se muestra en la Overview ficha debajo de 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 predeterminada de ContextHub
    Utilice el formato AEM de ContextHub. Con esta opción seleccionada, la DTM hace referencia al esquema predeterminado de ContextHub para esta integración. Si ha realizado cambios en el esquema de ContextHub o desea utilizar una capa de datos diferente, utilice la opción personalizada.
    Personalizar la capa de datos de ContextHub
    Utilice un formato personalizado que se asigne a la estructura de 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, rellena la ventana de edición con la capa de datos predeterminada de ContextHub, 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 las notas relativas a esta implementación.
  5. Haga clic en Save Changes .

Administración de capas de datos mediante 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 cumplir los siguientes requisitos previos:
  • Una capa de datos de objeto de ContextHub o Javascript existente en un sitio web.
  • Un esquema JSON que define correctamente la capa de datos que se utiliza en el sitio web.
  • Propiedad web de DTM activa que se está utilizando en el sitio web.

Componentes de AEM herramienta ContextHub

La herramienta ContextHub de AEM agrega dos funciones a la DTM:
  • Definición de la capa de datos
  • El tipo de capa de datos de AEM ContextHub
Además, se ha agregado un nuevo tipo de evento para facilitar el monitoreo de la capa de datos llamado dataelementchanged . Este tipo de evento se puede utilizar independientemente de la herramienta ContextHub de AEM.
Cada área funcional corresponde a un paso de configuración descrito en los dos ejemplos siguientes.

Monitoreo de elementos de datos

El nuevo dataelementchanged tipo de evento supervisa 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 una secuencia de comandos personalizada de 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 es posible que no funcionen en absoluto. Los valores simples como cadenas e enteros funcionan bien.
  2. Sea prudente en el número de dataelementchanged tipos de evento a los que se hace referencia en una sola página. Aunque la supervisión es eficiente, un gran número de evaluaciones podría afectar al rendimiento de la página.
  3. El dataelementchanged tipo de evento funciona solamente dentro de la vista de página actual porque es un sistema de monitoreo basado en DOM.
  4. El monitor 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 y utiliza la capa de datos predeterminada de ContextHub dentro de la Dynamic Tag Management configuración.
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.
El monitor de capa de datos de la DTM inicio antes que cualquier otra función de la DTM, por lo que los ejemplos no implementarán la capa de datos a través de la DTM aunque sea posible hacerlo. En su lugar, dependerán de la capa de datos generada por el servidor. De lo contrario, podrían aparecer advertencias de JavaScript porque es posible que algunos valores de la capa de datos no estén disponibles.

Definir la capa de datos

El primer paso para configurar la herramienta ContextHub de AEM es agregarla a una propiedad web.
En este momento, solo se permite una AEM herramienta ContextHub por cada propiedad web de la DTM.
  1. Haga clic en <Nombre de propiedad web> > 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. Seleccione Use Default ContextHub Data Layer para aprovechar las tiendas estándar 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 capa de datos predeterminada permite el acceso a todos los almacenes de ContextHub. Dada la naturaleza dinámica de los almacenes de ContextHub, hay funciones adicionales disponibles con esta capa de datos que no están disponibles en la simple referencia de objeto Javascript utilizada por el enfoque de capa de datos genérica.
  5. (Condicional) Para utilizar una capa de datos personalizada, haga clic en Open Editor para vista de la definición de esquema de la capa de datos. Si la capa de datos personalizada es una modificación del esquema de ContextHub, asegúrese de agregar "ContextHub" en el Data Layer Root campo.
    El esquema predeterminado de ContextHub se rellena 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 capa de datos

  1. En la propiedad web, haga clic en la Rules ficha 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 "total_price".
  4. En la lista Type desplegable, seleccione AEM ContextHub .
    El nombre de la herramienta ContextHub de AEM se rellena en la "Fuente", pero solo se puede definir una AEM herramienta ContextHub 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 cart.totalPriceFloat objeto.
  6. Haga clic en Save Data Element .

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

  1. En la propiedad web, haga clic en la Rules ficha y, a continuación, haga clic 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 "cart_total_update".
  4. Expanda la sección Condiciones.
  5. En la lista Event Type desplegable, 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 bueno o igual a 50: ^([5-9]\d|[1-9]\d{2,})$
    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 Force Lowercase Value opción en la configuración del elemento de datos, el valor se convertirá a todo 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. Expand the Javascript / Third Party Tags section.
  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 agregue una secuencia de comandos 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 de

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 capa de datos que se esté monitoreando a un valor que NO coincida 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 y utiliza una capa de datos personalizada que no es ContextHub dentro de la Dynamic Tag Management configuración.
La capa de datos de ejemplo ( _dl ) se cargará en la página web de prueba como una definición de objeto Javascript en la <head/> sección de la página antes de hacer referencia al código incrustado de la DTM.
<head> 
    <script> 
        window._dl = { 
            page: { 
                name: 'homepage', 
                quantity: 1, 
                friend: 'No one' } 
        } 
    </script> 
    <script src="//assets.adobedtm.com/satelliteLib-*.js"></script> 
</head> 

El monitor de capa de datos de la DTM (véase a continuación) inicio antes que cualquier otra función de la DTM, por lo que los ejemplos no implementarán la capa de datos a través de la DTM. De lo contrario, podrían aparecer advertencias de JavaScript porque es posible que algunos valores de la capa de datos no estén disponibles.

Definir la capa de datos

El primer paso para configurar la herramienta ContextHub de AEM es agregarla a una propiedad web.
En este momento, solo se permite una AEM herramienta ContextHub por cada propiedad web de la DTM.
  1. Haga clic en <Nombre de propiedad web> > 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. Seleccione Customize ContextHub Data Layer para modificar el esquema.
    Se debe agregar un nombre de objeto JavaScript raíz al Data Layer Root campo para las capas de datos que no sean ContextHub. La _dl definición se utiliza en los ejemplos genéricos de esta sección.
  5. Haga clic en Open Editor para vista de la definición de esquema de la capa de datos.
    De forma predeterminada, el esquema predeterminado de ContextHub se rellena 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 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. Haga clic en Save and Close para guardar el esquema y cerrar el editor, luego 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 Rules ficha 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 Type desplegable, seleccione AEM ContextHub .
    El nombre de la herramienta ContextHub de AEM se rellena en la "Fuente", pero solo se puede definir una AEM herramienta ContextHub 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 page.friend objeto.
  6. Haga clic en Save Data Element .

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

  1. En la propiedad web, haga clic en la Rules ficha y, a continuación, haga clic 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 Event Type desplegable, 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.
    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 Force Lowercase Value opción en la configuración del elemento de datos, el valor se convertirá a todo 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. Expand the Javascript / Third Party Tags section.
  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 agregue una secuencia de comandos 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 de

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 capa de datos que se esté monitoreando 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 objeto a un valor diferente ( _dl.page.friend = ‘Bob’ ) y no debería mostrarse ninguna alerta.
    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 de la coincidencia ( _dl.page.friend = ‘carl’ ) y no debería mostrarse ninguna alerta.
  • Cambie el objeto por el valor de mayúsculas y minúsculas correcto de la coincidencia ( _dl.page.friend = ‘Carl’ ) y la alerta debería volver a mostrarse.