Este artículo describe cómo utilizar eventos personalizados de su sitio web para activar una regla de Administración dinámica de etiquetas (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:

Ratón 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:

  1. Añada una nueva regla basada en eventos.

  2. Dele un nombre.

  3. Seleccione el tipo de evento personalizado e introduzca el nombre del evento, que en el ejemplo anterior se definió como addToCart.

    Screen-Shot-2015-07-10-at-12.55.24-PM
  4. Defina una etiqueta o elemento que vaya a tener este evento. Utilizando selectores CSS, es #minicart.

    Screen-Shot-2015-07-10-at-12.56.44-PM
  5. 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. 

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea