La semana pasada, el equipo estelar de Adobe Dynamic Tag Management agregó algunas características nuevas y atractivas a las reglas basadas en eventos de DTM. Hay 2 nuevos tipos de eventos para reglas basadas en eventos que puede usar.

1. Costumbre
2. pushState o hashchange

Lea las secciones a continuación para obtener más información sobre cada tipo de evento.

Regla basada en eventos: personalizada

Primero, definamos un evento personalizado. Veamos algunos ejemplos de otras reglas basadas en eventos en DTM. A continuación se muestra la lista de tipos de eventos para reglas basadas en eventos.

Al crear una regla basada en eventos, puede configurarla para eventos predeterminados específicos. Cada navegador (incluso Internet Explorer) tiene eventos predeterminados que pueden activarse para ciertas acciones. Algunas de las fáciles son:

• clics del mouse
• mouse overs (pasar el mouse sobre algo en la página)
• foco de campo de formulario (el cursor va dentro de un campo de formulario)
• el campo de formulario se desdibuja (el cursor deja un campo de formulario)
• formulario envía
• etc.

Todo esto tiene sentido; son cosas que hacemos todos los días en la web. A veces es necesario realizar un seguimiento de algo y es casi imposible hacerlo correctamente. Es por eso que me encanta usar eventos de JavaScript. Piense en un evento como ondas de radio. Se transmiten para que todos los escuchen, pero debes sintonizar la frecuencia correcta para escucharlos. Si transmites y nadie está escuchando, no pasa nada (no se lo digas a los anunciantes de radio). Lo mismo con los eventos: puede desencadenar un evento y no causará ningún problema ni arrojará ningún error si no hay algo que lo esté escuchando. Y si escucha un evento que nunca sucede, tampoco causará ningún problema ni arrojará ningún error.

¿Porque es esto importante? Una de las formas antiguas de rastrear acciones era crear una función de JavaScript personalizada y luego llamarla, o implementar un conjunto de código muy específico que es específico para un sistema de administración de etiquetas u otra base de código. Pero, ¿y si esa función de alguna manera fuera eliminada o renombrada? Obtendría errores de JavaScript que a veces podrían romper un sitio. Los eventos resuelven ese problema.

Si está familiarizado con las reglas de llamadas directas de DTM, es posible que se pregunte "¿Por qué no usar simplemente una regla de llamadas directas?" Una pregunta válida. El problema es que las reglas de llamadas directas crean una dependencia en DTM. Si soy un desarrollador y alguien me dice que ponga un montón de código que hace referencia a _satellite.track en mi código, ¡lo cuestionaría y probablemente diría que no! En su lugar, puede usar un evento, que no tiene dependencias.

Para poder escuchar un evento, primero debe activar uno. Los desarrolladores deben definir los eventos en el código del sitio. Identificar cuándo y dónde usar uno puede ser un poco complicado, pero una regla general simple es que si es algo que desea rastrear y no puede rastrearlo con un tipo de evento DTM predefinido, use un evento personalizado. Podemos encontrar buena información sobre cómo hacer esto en Mozilla. Hay 2 tipos básicos de eventos:

• Evento: active que algo sucedió sin enviar ningún dato adicional sobre el evento
• CustomEvent: agregue algunos datos al evento

Usaré un ejemplo con un evento personalizado, ya que te permiten agregar datos. Digamos que tenemos un carrito de compras, y cuando agregas algo al carrito, usa AJAX. Esto significa que no se carga una nueva página, sino que puede haber una ventana emergente o un mensaje que le informe que se agregó un artículo al carrito. Cuando esto sucede, puedo crear un evento personalizado que me diga exactamente qué se agregó:

 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);

En el código anterior, puede ver que estoy haciendo referencia a datos de un objeto llamado "datos". Estoy definiendo los datos de "detalle" personalizados como un objeto, al que luego puedo hacer referencia cuando escucho el evento. Después de crear el evento, lo activo en un elemento específico, en este caso, un elemento en la página con la identificación "minicart". Ahora tengo un evento personalizado que se está transmitiendo para cualquiera que quiera escuchar.

A continuación, configuraré una regla para escuchar en DTM:

1. Agregar una nueva regla basada en eventos
2. Dale un nombre
3. Seleccione el tipo de evento "personalizado" e ingrese el nombre del evento, que definimos como "addToCart"
   
4. Define la etiqueta o elemento que va a tener este evento. Usando los selectores de CSS, será "#minicart"
   
5. Configure la regla. Aquí es donde se pone genial. Puede usar el "detalle" que se proporcionó en el evento e incluso puede usarlo como un objeto. ¡GRACIAS ADOBE! Aquí estoy enviando un evento de Google Analytics con los datos que quiero. Puede hacer referencia a los datos utilizando %event.detail% o, si tiene un objeto, puede hacer referencia a él como %event.detail.<<name>>%. Vea el ejemplo a continuación.
   
   Probablemente nunca enviaría un evento como este, pero entiendes la esencia de cómo se puede usar. Y si necesita usarlo en un código personalizado, digamos para la herramienta Adobe Analytics, puede hacer referencia a él como _satellite.getVar(“%event.detail.product_id%”). ¡¡¡SALSA IMPRESIONANTE!!!

Esto no pretendía ser una novela, pero quería mostrar lo increíble que es esta función. Por mucho que me encanten las reglas de llamadas directas, están ocupando un lugar secundario en mis implementaciones, y los eventos personalizados están sentados al azar.

pushState o hashchange

empujarestado

Ahora veamos pushState. Básicamente, le permite actualizar la URL de la página/sitio sin tener que cargar una nueva página. En sí mismo, eso no hace nada, pero permite el uso de aplicaciones de una sola página. Hay varios frameworks que aprovechan esta característica. Entonces, si su sitio está construido de esta manera, ¡la función pushState puede ser realmente útil!

Al configurar la regla, por supuesto, seleccionará el nuevo tipo de evento.

No se necesitan selectores de CSS para definirlo mejor. Sin embargo, querrá ver algunas condiciones. El principal que usará, si solo está mirando la nueva URL, es la ruta. ¡Eso es todo!

cambio hash

Gracias a Twitter, todos sabemos qué es un hash (etiquetas hash), por lo que hashchange debe referirse a un cambio en el hash. Lo bueno del hash es que puedes cambiarlo todo lo que quieras y no hace que la página se cargue. Los hashes se pueden usar para muchos propósitos, por lo que no entraremos en las razones por las que alguien tendría esto. Antes de que existiera pushState, no era raro actualizar el hash con contenido nuevo para AJAXy o sitios de una sola página.

Para configurar una nueva regla, seleccione el mismo tipo de evento que pushState. La única diferencia es que ahora puede ver el hash como su criterio. Por ejemplo:

Conclusión

Adobe DTM es el mejor sistema de administración de etiquetas que existe y, por suerte para los clientes de Adobe, ¡es gratis! ¡Use estos consejos útiles para ayudarlo a aprovechar su poder y potencial, y vuelva a consultar con frecuencia para obtener más información! Si está buscando ayuda con el análisis de su sitio web, contáctenos y le enviaremos una propuesta gratuita sobre cómo podemos ayudarlo.