Show Menu
TEMAS×

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.
    For example, when you click an image inside an anchor tag like <a href="abc.html"><img src="xyz.png"/></a> , you might expect the click to be associated with the anchor tag, because the tag is in the bubble stream. However, when you inspect the click in the developer tools, the click may actually affect only the <img> tag. To ensure that the event is handled correctly, associate the click with the <img> tag and do not depend on the browser to bubble up the click to a parent element. 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.
    See Using the CSS Selector for information about finding the correct element tag.
  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 su definición.
Categoría
Evento
Definición
Ratón
click
Se presiona un botón del dispositivo señalador y se suelta en un elemento.
mouseover
Un dispositivo señalador se mueve sobre un elemento con el detector adjunto o sobre uno de sus elementos secundarios.
Teclado
keypress
Se presiona una tecla que normalmente produce un valor de carácter (utilizar entrada en su lugar).
Formularios
focus
Un elemento ha recibido el foco (no genera burbuja).
blur
Un elemento ha perdido el foco (no genera burbuja).
submit
Se ha enviado un formulario.
change
Un elemento ha perdido el foco y su valor ha cambiado desde que ha recibido el foco.
Vídeo HMTL5
ended
Se ha detenido la reproducción porque se ha llegado al final del medio.
loadeddata
Ha finalizado la carga del primer cuadro del medio.
play
Se ha iniciado la reproducción.
pause
Se ha detenido la reproducción.
stalled
El agente de usuario intenta recuperar los datos de los medios, pero los datos no llegan de la forma prevista.
volumechange
Se ha modificado el volumen.
% complete
Emite un evento al llegar a un porcentaje especificado del tiempo de reproducción total. Por ejemplo, si se introduce un 10 %, indica que la regla solo se activará cuando se haya reproducido un 10 % de la duración total del vídeo.
time complete
Emite un evento al llegar a una duración especificada del tiempo de reproducción. Por ejemplo, si se introduce 10, indica que la regla solo se activará cuando se hayan reproducido 10 segundos de la duración total del vídeo.
Dispositivo móvil
orientationchange
Se ha modificado la orientación del dispositivo (vertical/horizontal).
zoomchange
Al tocar o ampliar con un gesto la pantalla de un dispositivo móvil.
Explorador
tab focus
El evento se activa cuando el contenido recibe el foco.
tab blur
El evento se activa cuando el contenido pierde el foco.
Otras
custom
Un evento personalizado se ha activado 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.
enters viewport
Cuando el elemento queda por primera vez a la vista del visitante. Si el elemento queda a la vista inmediatamente después de cargar la página, la regla se activa directamente. Si el elemento queda a la vista después de desplazarse hacia abajo, la regla se activa en ese momento. Se puede especificar un retraso opcional en la regla para determinar cuánto tiempo debe estar a la vista el elemento antes de que se active el evento (el valor predeterminado es 1 segundo).
element exists
Cuando se produce un elemento de un selector especificado, ya sea porque está en la marca de página o si se inserta dinámicamente más adelante. Cada regla se activa una sola vez.
pushState o hashchange
Se ha modificado la ruta de URL o el hash (identificador del fragmento) al final de la URL. El evento pushState o hashchange se puede utilizar en aplicaciones de una sola página (SPA) en las que no se vuelva a cargar una página pero su contenido cambie. Algunos marcos de desarrollo que se utilizan habitualmente para crear SPA son Angular y React. Este tipo de evento le permite crear reglas basadas en eventos sin necesidad de acudir a los desarrolladores. Estas reglas se activan cuando se utilizan funciones comunes en SPA, como, por ejemplo: Se ha modificado la ruta de URL en función del uso de la API pushState del historial HTML5. Para obtener más información sobre el uso de pushState , consulte Añadiendo y modificando entradas del historial en Mozilla Developer Network. Se ha modificado el hash debido a que un usuario ha cambiado la vista o la ubicación de la página. Para obtener más información sobre el uso de hashchange , consulte Hashchange en Mozilla Developer Network.
time passed
Valor en segundos. El evento se activa cuando transcurre el número de segundos especificados.
dataelementchanged
Se ha modificado un elemento de datos. Este evento le permite seleccionar un elemento de datos específico para utilizarlo como activador. For more information on a possible use case, see Add Adobe Experience Manager ContextHub Tool .

Using the CSS selector

Use the CSS Selector to quickly and easily select CSS elements to use as triggers for event-based rules without leaving the DTM rule builder.
Una de las mayores ventajas de la DTM es poder crear eventos de comportamientos o interacciones de la página en su sitio web. No obstante, encontrar los elementos CSS que desea incluir en las reglas puede ser difícil y requerir mucho tiempo.

Example with unique element

En este ejemplo, queremos crear una regla que se active cuando los usuarios hagan clic en el vínculo “Iniciar sesión o registrarse” de nuestro sitio web, tal y como se muestra en la siguiente ilustración. Este es un ejemplo sencillo, ya que el vínculo “Iniciar sesión o registrarse” no contiene elementos similares en el CSS.
The more complex example described below illustrates how to use the CSS Selector when there are many similar elements on the page, such as the tabs along the top ("Men's," "Women's," "Equipment," and so forth).

Para utilizar el selector de CSS:

  1. Access the CSS Selector widget within DTM by clicking the Target icon while creating a rule .
    In this example, we are creating an event-based rule that uses the Click event type to trigger the rule when users click the "Sign in or Register" link.
  2. Specify the website's URL, then click Load .
    Sea tan específico de la página Web que desee que tenga el menor número de eventos. Tenga en cuenta que las hojas de estilo CSS pueden variar de una página a otra, en función del sitio web y su arquitectura. Puede realizar pruebas para ver con cuánta frecuencia cambian sus hojas de estilo.
    El sitio web se ha cargado en un iFrame con el widget del selector de CSS incrustado. Pase el ratón sobre los distintos elementos para hacerse una idea de cómo funciona la herramienta.
    If we were creating this rule without using the CSS Selector, we would inspect the desired page element to determine the proper CSS to use. Using the CSS Selector, simply click the element on the page that we want to trigger the rule.
  3. Haga clic en Sign In or Register .
    Al hacer clic en un elemento de página para el que desea que el selector busque coincidencias, este se vuelve verde. CSS Selector A 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.
    The number in parenthesis next to Clear indicates the number of items selected. En este ejemplo, el vínculo “Iniciar sesión o registrarse” no tiene ningún elemento similar en la página especificada, por lo que se muestra “1”. Click Clear to remove selected items. Click Toggle Position to move the panel to the top or bottom of the iFrame as desired. Haga clic ? to view help information about the CSS Selector.
  4. Click Send to DTM to copy the CSS into the Element Tag or Selector field within DTM.
  5. Finish configuring the rule as described in Create conditions for event-based rules .
    Without writing any code or inspecting elements, we have created an event-based rule that triggers when users click Sign In or Register .

Example with similar elements

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 sencillo que hemos visto antes es que la ficha “Hombre” tiene muchos elementos similares en la página.
  1. Access the CSS Selector widget within DTM by clicking the Target icon while creating a rule .
  2. Specify the website's URL, then click Load .
  3. Haga clic en la ficha “Hombre” para seleccionarla.
    Observe que se han seleccionado varios elementos en la página y están resaltados en amarillo. The number next to Clear in parenthesis is 28 in this example, which means there are 28 elements on the page that use the "a" tag.
    Queremos que la regla se active cuando los usuarios hagan clic en el vínculo “Hombre”, de modo que debemos desmarcar el resto de elementos similares.
    Pase el ratón sobre cualquier elemento similar resaltado (por ejemplo, “Mujer”) y verá cómo aparece un cuadro rojo alrededor del elemento.
    Al hacer clic en un elemento de página para el que desea que el selector busque coincidencias, este se vuelve verde. CSS Selector A continuación, genera un selector CSS mínimo para ese elemento. Además, el selector resalta en amarillo todo aquello que coincida con el elemento. CSS Selector La opción empieza por amplia y le permite limitar la selección.
    Haga clic en un elemento resaltado para rechazarlo (rojo) o en un elemento no resaltado para agregarlo (verde). Mediante este proceso de selección y rechazo, conseguirá el selector de CSS idóneo para sus necesidades. Si presiona Mayús mientras mueve el ratón, podrá seleccionar elementos incluidos en otros elementos seleccionados.
  4. Haga clic en el elemento con el cuadro rojo (Mujer) para rechazarlo y haga lo mismo con el resto de elementos similares.
    Notice that the number in parenthesis next to Clear is now 1.
  5. Click Send to DTM to copy the CSS into the Element Tag or Selector field within DTM.
  6. Finish configuring the rule as described in Create conditions for event-based rules .

CSS Selector limitations

CSS Selector El valor es Beta y es posible que no funcione bien en algunos sitios debido a limitaciones técnicas.

Dynamically populate variables

Puede asignar atributos del elemento a las variables de forma dinámica.
Para asignar atributos del elemento a las variables de forma dinámica, utilice la siguiente sintaxis:
%this.attributeName%

Por ejemplo, suponga que tiene una página de resultados de búsqueda con varios vínculos a sitios web externos. Desea rastrear los vínculos en los que se hace clic al rellenar de forma dinámica una eVar con el id del elemento en el que se ha hecho clic.
Example Link: <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. Then, within the Analytics section of the rule, set the eVar to %this.id% .
For non-standard attributes, you can similarly leverage the JavaScript function this.getAttribute() by wrapping it in '%' characters, as follows:
%this.getAttribute(attributeName)%

Por ejemplo, suponga que dispone de una página de resultados de búsqueda similares, tal y como se muestra en el ejemplo anterior. Sin embargo, estos vínculos contienen un atributo no estándar, loc que desea establecer de forma dinámica en una eVar en función del vínculo en el que se hace clic.
Example link: <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. Then, within the Analytics section of the rule, set the eVar to %this.get Attribute(loc)% .
Si no está seguro de si el atributo deseado es 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 getAttribute() no estándar, que funcionará en cualquier escenario.
Esta funcionalidad se puede utilizar en los campos de reglas de la administración dinámica de etiquetas, incluyendo:

Analytics variables

  • Adobe Analytics:
    • Seguimiento de vínculos, datos de página, jerarquía
    • Variables globales y eventos
  • Google Analytics
    • Vistas de página, eventos, variables personalizadas

Custom script

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