Ratón
Última actualización el
4 may. 2021
Este artículo describe cómo utilizar eventos personalizados de su sitio web para activar una regla de Dynamic Tag Management (DTM).
Eventos del navegador
Un evento es una señal de que ha sucedido algo en la página web. Los desarrolladores pueden utilizar estas señales para reaccionar o realizar una acción.
Imagine un evento como una onda de radio. Estas ondas se emiten de forma general, pero para captarlas es necesario sintonizar la frecuencia correcta. Si se emite pero nadie está escuchando, no sucede nada. Con los eventos sucede lo mismo: puede activar un evento, pero no tendrá ningún efecto si no hay ningún elemento a la escucha. Del mismo modo, no hay ningún problema en estar atento a un evento que nunca llega a producirse.
Existen varios recursos que tratan los eventos de HTML:
Uso de reglas basadas en eventos en DTM
Al crear una regla basada en eventos, puede configurarla para eventos predeterminados específicos. Cada navegador tiene eventos predeterminados que se activan por acciones concretas. Los siguientes son algunos habituales:
- Clics del ratón
- Pasar el puntero (pasar el puntero sobre un elemento de la página)
- Foco en un campo de formulario (el cursor entra en un campo de formulario)
- Foco fuera de un campo de formulario (el cursor sale de un campo de formulario)
- Envíos de formulario
Estos eventos tienen sentido; se dan a diario en la web. Si los eventos personalizados del navegador no le permiten realizar el seguimiento que desea, puede utilizar los eventos JavaScript.
¿Qué eventos incluye DTM?
DTM incorpora los siguientes eventos para sus reglas basadas en eventos:
|
|
Teclado |
Foros (solo inglés) |
Vídeo HTML5 |
Móvil |
Otros |
|---|---|---|---|---|---|
|
click mouseover |
keypress |
focus blur submit change |
ended loadeddata play pause stalled volumechange % complete time complete |
orientationchange zoomchange |
custom enters viewport element exists pushState o hashchange |
Eventos personalizados
Para poder escuchar un evento, primero este debe producirse. Los eventos los definen los desarrolladores en el código del sitio. Identificar cuándo y dónde utilizarlos puede tener su complicación. Una regla sencilla es que, si quiere realizar el seguimiento de una acción y dicha acción no se puede detectar con un tipo de evento DTM predefinido, se debe utilizar un evento personalizado.
Activación de un evento
Considere el siguiente ejemplo con un evento personalizado, ya que estos permiten agregar datos. Pongamos que tiene un carrito de la compra que utiliza AJAX cada vez que se añade un artículo. No se carga una nueva página, sino que una ventana o un mensaje emergente le informa de que se ha añadido un artículo. Cuando esto suceda, puede crear un evento personalizado que le diga exactamente qué se ha añadido:
var addToCart = new CustomEvent('addToCart', 'detail': {'product_id': data.product.sku, 'quantity': data.product.quantity, 'price': data.product.price.fullPrice});
document.getElementById('minicart').dispatchEvent(addToCart);
El código anterior hace referencia a datos de un objeto llamado “data”. El dato personalizado “detail” se define como un objeto al que se puede hacer referencia cuando se escucha el evento. Tras construir el evento, puede activarlo en un elemento específico, en este caso, un elemento de la página con el id. “minicart”. Ya tiene un evento personalizado que está emitiendo para cualquiera que desee escucharlo.
Agregación de un oyente de evento personalizado
En DTM, añadir un oyente de evento personalizado es tan sencillo como añadir una regla basada en eventos.
Los siguientes pasos configuran una regla de escucha en DTM:
-
Añada una nueva regla basada en eventos.
-
Dele un nombre.
-
Seleccione el tipo de evento personalizado e introduzca el nombre del evento, que en el ejemplo anterior se definió como addToCart.
-
Defina una etiqueta o elemento que vaya a tener este evento. Utilizando selectores CSS, es #minicart.
-
Configure la regla para que active los señalizadores apropiados.
¿Tiene alguna pregunta?
Si tiene alguna pregunta sobre este artículo o cualquier otro tema de DTM, pásese por los foros de la comunidad de DTM. Ahí puede consultar dudas, participar en las conversaciones y mantenerse informado de las últimas novedades sobre cada solución.
Gracias a Adam, de Disruptive Advertising, por permitirnos utilizar partes de su publicación para este artículo.
