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.

    Para obtener más información, consulte Tipos de eventos.

  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 eventos integrados y cómo se define cada uno.

Categoría Evento Definición
Mouse click Se presiona 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 adjunto o a uno de sus elementos secundarios.
Teclado keypress Se presiona una tecla que normalmente produce un valor de carácter (utilice la entrada en su lugar).
Formularios enfoque Un elemento recibió el enfoque (no genera burbujas).
blur Un elemento perdió el foco (no genera burbujas).
submit Se envía un formulario.
change Un elemento pierde el foco y su valor ha cambiado desde que obtuvo el foco.
Vídeo HMTL5 ended Se detuvo la reproducción porque se llegó al final del contenido.
loadeddata El primer fotograma del contenido ha finalizado la carga.
play Se ha iniciado la reproducción.
pause La reproducción está en pausa.
stalled 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 a partir de un porcentaje especificado del tiempo de reproducción total. Por ejemplo, si se introduce un 10 %, indica que esta regla solo se activa cuando se ha reproducido un 10 % de la duración total del vídeo.
tiempo completado Emite un evento con una duración especificada del tiempo de reproducción. Por ejemplo, si se introduce 10, significa que esta regla solo se activa cuando se hayan 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 pellizcar o difundir en un dispositivo móvil.
Explorador tab focus El evento se activa cuando el contenido recibe Focus.
tab blur El evento se activa cuando el contenido pierde Focus.
Otras custom Se ha activado un evento personalizado en el DOM. Seleccione Personalizado en la lista desplegable Tipo de evento y, a continuación, especifique el nombre del evento personalizado. Para obtener más información, consulte CustomEvent en Mozilla Developer Network.
introduce viewport Cuando el elemento entra por primera vez en la vista del visitante. Si el elemento está a la vista inmediatamente después de la carga de la página, la regla se activa inmediatamente. Si el elemento queda a la 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 a la vista el elemento antes de activar el evento (el valor predeterminado es 1 segundo).
element exists Cuando aparece un elemento de un selector especificado, ya sea porque está en el marcado de la página o porque se inserta dinámicamente más adelante. Cada regla se activa una sola vez.
pushState o hashchange La ruta de URL o el hash (identificador de fragmento) al final de la dirección URL han cambiado. El evento pushState o hashchange se puede usar 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 se pueden usar 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 aparecen funciones comunes en SPA, como: La ruta URL cambió según el uso de la API pushState del historial HTML5. Para obtener más información sobre el uso de pushState, consulte Adición y modificación de entradas del historial en Mozilla Developer Network. El hash cambió debido a que el usuario cambió de vista o ubicación en la página. Para obtener más información sobre el uso de hashchange, consulte 🔗 Hashchangeon Mozilla Developer Network.
tiempo transcurrido Valor en segundos. El evento se activa después de que haya pasado el número de segundos especificado.
dataelementchanged Se ha cambiado un elemento de fecha. Este evento permite seleccionar un elemento de datos específico para utilizarlo como déclencheur. Para obtener más información sobre un posible caso de uso, consulte Agregar la herramienta ContextHub de Adobe Experience Manager.

Uso del selector de CSS

Utilice el selector de CSS para seleccionar rápida y fácilmente los elementos CSS que se utilizarán como déclencheur para las 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 realizar eventos 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 con déclencheur cuando los usuarios hagan clic en el vínculo "Iniciar sesión o registrarse" de 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 el CSS.

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

Para utilizar el selector de CSS:

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

    En este ejemplo, creamos una regla basada en eventos que utiliza el tipo de evento Click para almacenar en déclencheur 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 Cargar.

    NOTA

    Sea lo más específico posible de la página web en la que desea crear 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. Es útil experimentar para ver con qué frecuencia 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 utilizar el selector de CSS, inspeccionaríamos el elemento de página deseado para determinar el CSS adecuado que se debe utilizar. Con el selector de CSS, simplemente haga clic en el elemento de la página en el que queremos almacenar la regla en déclencheur.

  3. Haga clic en Iniciar sesión o registrarse.

    Cuando hace clic en un elemento de página con el que desea que coincida el selector, este se vuelve verde. A continuación, el selector de CSS genera un selector de 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 DTM.

    El número entre paréntesis situado 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 Borrar para eliminar los elementos seleccionados. Haga clic en Alternar posición para mover el panel a la parte superior o inferior del iFrame, según lo desee. Click ? para ver información de ayuda sobre el selector de CSS.

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

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

    Sin escribir código ni inspeccionar elementos, hemos creado una regla basada en eventos que déclencheur cuando los usuarios hacen clic en Iniciar sesión o registrarse.

Ejemplo con elementos similares

Ahora supongamos que desea crear una regla con déclencheur 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 que se ha discutido anteriormente es que la ficha "Hombre" tiene muchos elementos similares en la página.

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

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

  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 entre paréntesis situado junto a Clear es 28 en este ejemplo, lo que significa que hay 28 elementos en la página que utilizan la etiqueta "a".

    Queremos crear un déclencheur de la regla cuando los usuarios hagan clic en el vínculo "Hombre", por lo que tenemos que anular la selección de los demás elementos similares.

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

    Cuando hace clic en un elemento de página con el que desea que coincida el selector, este se vuelve verde. A continuación, el selector de CSS genera un selector de CSS mínimo para ese elemento. Además, el selector resalta en amarillo todo lo que coincida con ese elemento. El selector de CSS comienza de forma amplia y luego le permite limitar 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 de todos los demás elementos similares.

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

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

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

Limitaciones del selector de CSS

El selector de CSS está en versión beta y es posible que no funcione bien en algunos sitios debido a limitaciones técnicas.

Rellenado dinámico de variables

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

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

%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 al rellenar dinámicamente un eVar con el id del 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 para almacenar en déclencheur el clic en los vínculos de la página. A continuación, en la sección Analytics de la regla, establezca el eVar en %this.id%.

Para los atributos no estándar, puede aprovechar de forma similar la función JavaScript this.getAttribute() ajustándola en caracteres '%', de la siguiente manera:

%this.getAttribute(attributeName)%

Por ejemplo, supongamos que tiene una página de resultados de búsqueda similar a la que se muestra en el ejemplo anterior. Sin embargo, estos vínculos contienen un atributo no estándar, loc, que desea establecer dinámicamente como eVar en función del 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 para almacenar en déclencheur el clic en los vínculos de la página. A continuación, en la sección Analytics 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 estándar, consulte w3schools.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 Dynamic Tag Management, incluidos:

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 regular en el código personalizado.

En esta página