Crear condiciones para reglas basadas en eventos

Las condiciones determinan cuándo se activa una regla basada en eventos.

  1. Seleccione el tipo de interacción que desea rastrear, como clics con el ratón o envíos de formularios.

    For more information, see Event Types.

  2. Habilite las opciones siguientes según sea necesario:

    Elemento Descripción
    Retraso de activación de vínculo Habilita si el evento activa un vínculo y si desea que el vínculo se retrase hasta que el evento se active.
    Aplicar el controlador de eventos directamente al elemento Aplica el controlador de eventos a un elemento específico objetivo. Esta configuración está unida al concepto de propagación y capas de un explorador.

    Por ejemplo, cuando se hace clic en una imagen dentro de una etiqueta delimitadora como <a href="abc.html"><img src="xyz.png"/></a>, puede que se espere que el clic esté asociado con la etiqueta delimitadora, ya que la etiqueta está en el flujo de propagación. Sin embargo, si inspecciona el clic en las herramientas del desarrollador, es posible que el clic solo afecte a la etiqueta <img>. Para asegurar que el evento se administra correctamente, asocie el clic con la etiqueta <img> y no dependa del explorador para propagar el clic a un elemento principal. Un evento como un clic puede propagarse potencialmente a <body>. Es importante comprender a dónde está vinculado realmente el evento, y establecerlo específicamente como objetivo para asegurarse de que la regla se activa correctamente.

    Propagación significa que el evento primero se captura, se administra por el elemento más interior y, a continuación, se propaga a los elementos externos.

  3. Indique el nombre de la etiqueta que quiere rastrear, así como las propiedades adicionales de la etiqueta que desea hacer coincidir.

    Consulte Uso del selector de CSS para obtener información sobre cómo encontrar la etiqueta de elemento correcta.

  4. Seleccione y configure cualquier tipo de condición o criterio adicional que desee relacionar con la regla.

  5. Indique su preferencia con respecto a la propagación del evento.

    La propagación de eventos es una manera de difusión de eventos en HTML DOM.

    Problema Solución
    Desea interacciones relacionadas en elementos secundarios del selector de regla que identificó para activar la regla. Permitir propagación de eventos en elementos secundarios
    Desea evitar la propagación si el elemento secundario ya activa su propio evento. No permitir si el elemento secundario ya activa un evento.
    No desea que los eventos del selector de regla que identificó vayan más allá del propio elemento en la jerarquía de eventos. No permitir que los eventos se propaguen hacia los principales

Tipos de eventos

Lista de tipos de evento integrados y cómo se define cada uno.

Categoría Evento Definición
Mouse click Se pulsa un botón del dispositivo señalador y se suelta en un elemento.
mouseover Un dispositivo señalador se mueve al elemento que tiene el oyente conectado o a uno de sus elementos secundarios.
Teclado keypress Se presiona una tecla y esa tecla normalmente produce un valor de carácter (utilice entrada en su lugar).
Forms enfoque Se seleccionó un elemento (no genera burbujas).
blur Un elemento perdió el enfoque (no genera burbujas).
submit Se envía un formulario.
change Un elemento pierde el enfoque y su valor ha cambiado desde que se enfocó.
Vídeo HMTL5 ended La reproducción se detuvo porque se llegó al final del medio.
loadeddata El primer fotograma del medio ha terminado de cargarse.
play Se inició la reproducción.
pausar La reproducción está en pausa.
bloqueado El agente de usuario está intentando recuperar datos de medios, pero los datos no llegan de forma inesperada.
volumechange El volumen ha cambiado.
% completo Emite un evento dado un porcentaje especificado del tiempo total de reproducción. Por ejemplo, si se introduce un 10 %, se indica que esta regla solo se activa cuando se reproduce el 10 % de la duración total del vídeo.
tiempo completado Emite un evento con una duración específica del tiempo de reproducción. Por ejemplo, si se introduce 10, se indica que esta regla solo se activa cuando se han reproducido 10 segundos de la duración total del vídeo.
Dispositivo móvil orientationchange La orientación del dispositivo (vertical/horizontal) ha cambiado.
zoomchange Cuando se realiza un gesto de pellizco o propagación en un dispositivo móvil.
Browser tab focus El evento se activa cuando el contenido se centra.
tab blur El evento se activa cuando el contenido pierde el foco.
Otras personalizado Se ha activado un evento personalizado en el DOM. Select Custom from the Event Type drop-down list, then specify the custom event name. Para obtener más información, consulte CustomEvent en Mozilla Developer Network.
introduce ventanilla Cuando el elemento entra por primera vez en la vista del visitante. Si el elemento está en vista inmediatamente después de cargar la página, la regla se activa inmediatamente. Si el elemento entra en vista después de desplazarse, la regla se activa entonces. Se puede especificar un retraso opcional en la regla que determina cuánto tiempo debe estar en vista el elemento antes de que se active el evento (el valor predeterminado es 1 segundo).
element exists Cuando un elemento de un selector especificado entra en existencia, ya sea porque está en el marcado de la página o porque se inyecta dinámicamente más adelante. Cada regla se activa una sola vez.
pushState o hashchange Se cambió la ruta de URL o el hash (identificador de fragmento) al final de la dirección URL. El pushState o hashchange evento se puede utilizar con aplicaciones de una sola página (SPA) en las que una página no se vuelve a cargar, pero su contenido cambia. Los marcos de desarrollo comunes que pueden utilizarse para crear SPA incluyen Angular y React. Este tipo de evento le permite crear reglas basadas en eventos sin depender de los desarrolladores. Estas reglas se activan cuando se producen funciones comunes en SPA, como: La ruta de URL ha cambiado en función del uso de la API de historial pushState de HTML5. Para obtener más información sobre el uso pushState, consulte Añadir y modificar entradas de historial en Mozilla Developer Network. El hash cambió debido a que el usuario cambió las vistas o ubicaciones en la página. Para obtener más información sobre el uso hashchange, consulte Hashchange en Mozilla Developer Network.
tiempo transcurrido Valor en segundos. El evento se activa después de que haya transcurrido el número de segundos especificado.
dataelementchanged Se cambió un elemento de fecha. Este evento permite seleccionar un elemento de datos específico para utilizarlo como activador. Para obtener más información sobre un posible caso de uso, consulte Añadir la herramientaContextHub de Adobe Experience Manager.

Uso del selector de CSS

Utilice el CSS Selector para seleccionar rápida y fácilmente los elementos CSS para utilizarlos como activadores para reglas basadas en eventos sin salir del generador de reglas de la DTM.

Una de las mayores ventajas de la DTM es la capacidad de evento de comportamientos o interacciones de página en el sitio web. Sin embargo, encontrar los elementos CSS deseados para incluirlos en las reglas a veces es difícil y lleva mucho tiempo.

Ejemplo con elemento único

Por ejemplo, queremos crear una regla que se active cuando los usuarios hagan clic en el vínculo "Iniciar sesión o registrarse" en nuestro sitio web, como se muestra en la siguiente ilustración. Este ejemplo es sencillo porque el vínculo "Iniciar sesión o registrarse" no tiene elementos similares en la CSS.

El ejemplo más complejo que se describe a continuación ilustra cómo usar el CSS Selector cuando hay muchos elementos similares en la página, como las fichas de la parte superior ("Hombre", "Mujer", "Equipo", etc.).

Para utilizar el selector de CSS:

  1. Acceda a la CSS Selector utilidad dentro de la DTM haciendo clic en el Target icono mientras crea una regla.

    En este ejemplo, creamos una regla basada en eventos que utiliza el Click tipo de evento para activar la regla cuando los usuarios hacen clic en el vínculo "Iniciar sesión o registrarse".

  2. Especifique la dirección URL del sitio web y haga clic en Load.

    NOTE

    Sea lo más específico posible para la página web de la que desee realizar el evento. Tenga en cuenta que las hojas de estilo CSS pueden cambiar de una página a otra, según el sitio web y su arquitectura. Resulta útil experimentar con la frecuencia con la que cambia la hoja de estilo.

    El sitio web ahora se carga en un iFrame con el widget selector de CSS incrustado. Pase el ratón sobre diferentes elementos para conocer cómo funciona la herramienta.

    Si creáramos esta regla sin usar la CSS Selector, inspeccionaríamos el elemento de página deseado para determinar la CSS adecuada que se debe utilizar. Con el CSS Selector, haga clic en el elemento de la página que desea activar la regla.

  3. Haga clic en Sign In or Register.

    Al hacer clic en un elemento de página con el que desea que coincida el selector, este se vuelve verde. A CSS Selector continuación, genera un selector CSS mínimo para ese elemento.

    Observe el panel de la parte inferior que contiene información sobre el elemento seleccionado y un botón para enviar la información a la DTM.

    El número entre paréntesis junto a Clear indica el número de elementos seleccionados. En este ejemplo, el vínculo "Iniciar sesión o registrarse" no tiene nada parecido en la página especificada, por lo que se muestra "1". Haga clic en Clear para eliminar los elementos seleccionados. Haga clic en Toggle Position para mover el panel a la parte superior o inferior del iFrame, según lo desee. Click ? para vista de la información de ayuda sobre la CSS Selector.

  4. Haga clic en Send to DTM para copiar la CSS en el Element Tag or Selector campo de la DTM.

  5. Termine de configurar la regla como se describe en Crear condiciones para reglasbasadas en eventos.

    Sin escribir código ni inspeccionar elementos, hemos creado una regla basada en eventos que se activa cuando los usuarios hacen clic en Sign In or Register.

Ejemplo con elementos similares

Ahora supongamos que desea crear una regla que se active cuando los usuarios hagan clic en la ficha "Hombre" en la parte superior o en el sitio web. La diferencia entre este ejemplo y el ejemplo simple descrito anteriormente es que la ficha "Hombre" tiene muchos elementos similares en la página.

  1. Acceda a la CSS Selector utilidad dentro de la DTM haciendo clic en el Target icono mientras crea una regla.

  2. Especifique la dirección URL del sitio web y haga clic en Load.

  3. Haga clic en la ficha "Hombre" para seleccionarla.

    Observe que muchos elementos de la página están seleccionados y resaltados en amarillo. El número que aparece entre Clear paréntesis es 28 en este ejemplo, lo que significa que hay 28 elementos en la página que utilizan la etiqueta "a".

    Queremos activar la regla cuando los usuarios hagan clic en el vínculo "Hombre", por lo que debemos anular la selección de los otros elementos similares.

    Pase el cursor sobre cualquier elemento similar resaltado (por ejemplo, "Mujer") y verá que aparece un cuadro rojo alrededor del elemento.

    Al hacer clic en un elemento de página con el que desea que coincida el selector, este se vuelve verde. A CSS Selector continuación, genera un selector CSS mínimo para ese elemento. Además, el selector resalta todo lo que coincida con ese elemento en amarillo. Los CSS Selector inicios son amplios y le permiten reducir la selección.

    Haga clic en un elemento resaltado para rechazarlo (rojo) o haga clic en un elemento no resaltado para agregarlo (verde). A través de este proceso de selección y rechazo, puede encontrar el selector de CSS perfecto para sus necesidades. Si pulsa Mayús mientras mueve el ratón, podrá seleccionar elementos dentro de otros elementos seleccionados.

  4. Haga clic en el elemento con el cuadro rojo (Mujer) para anular la selección y todos los demás elementos similares.

    Observe que el número entre paréntesis junto a Clear es ahora 1.

  5. Haga clic en Send to DTM para copiar la CSS en el Element Tag or Selector campo de la DTM.

  6. Termine de configurar la regla como se describe en Crear condiciones para reglasbasadas en eventos.

Limitaciones del selector de CSS

El CSS Selector está en fase beta y es posible que no funcione bien en algunos sitios debido a limitaciones técnicas.

Variables rellenadas dinámicamente

Puede asignar atributos de elemento a variables de forma dinámica.

Para asignar atributos de elemento de forma dinámica a variables, utilice la sintaxis siguiente:

%this.attributeName%

Por ejemplo, supongamos que tiene una página de resultados de búsqueda con varios vínculos a sitios Web externos. Desea rastrear en qué vínculo se hace clic rellenando dinámicamente un eVar con el id elemento en el que se hace clic.

Vínculo de ejemplo: <a id='myFirstLink' href='www.exampleLink.com'>

Para ello, cree una regla basada en eventos que se active al hacer clic en los vínculos de la página. A continuación, en la Analytics sección de la regla, establezca el eVar en %this.id%.

Para los atributos no estándar, también puede aprovechar la función JavaScript this.getAttribute() ajustándola en caracteres '%', como se indica a continuación:

%this.getAttribute(attributeName)%

Por ejemplo, supongamos que tiene una página de resultados de búsqueda similar a la que muestra el ejemplo anterior. Sin embargo, estos vínculos contienen un atributo no estándar, loc que desea establecer dinámicamente en un eVar según el vínculo en el que se hizo clic.

Vínculo de ejemplo: <a id='myFirstLink' loc='top' href='www.exampleLink.com'>

Para ello, cree una regla basada en eventos que se active al hacer clic en los vínculos de la página. A continuación, en la Analytics sección de la regla, establezca el eVar en %this.get Attribute(loc)%.

Si no está seguro de si el atributo deseado es estándar o no, consulte w3school.com para obtener más información sobre los atributos HTML estándar. Sin embargo, si tiene alguna duda, puede utilizar el formato no estándar getAttribute() , que funcionará en cualquier escenario.

Esta funcionalidad se puede utilizar en los campos de reglas de la administración dinámica de etiquetas, que incluyen:

Variables de Analytics

  • Adobe Analytics:

    • Seguimiento de vínculos, datos de página, jerarquía
    • Variables y Eventos globales
  • Google Analytics

    • Vistas de página, Eventos, variables personalizadas

Secuencia de comandos personalizada

También se puede hacer referencia a los atributos estándar mediante JavaScript normal en el código personalizado.

En esta página