Nuevos tipos de eventos personalizados de Adobe DTM y pushState / hashChange

Icono de etiqueta de precio - Publicidad disruptiva

La semana pasada, el equipo estrella 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. Personalizado
  2. pushState o hashchange

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

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.

adobe-dtm-event-list "width =" 203 "height =" 453 "srcset =" https://blogging-techies.com/wp-content/uploads/2020/04/Nuevos-tipos-de-eventos-personalizados-de-Adobe-DTM-y-pushState.jpg 203w, https://www.disruptivestatic.com/wp-content/uploads/2015/07/adobe-dtm-event-list-134x300.jpg 134w "tamaños =" (ancho máximo: 203px) 100vw, 203px "></p>
<p>Al crear una regla basada en eventos, puede configurarla para eventos predeterminados específicos. Cada navegador (incluso Internet Explorer) tiene eventos predeterminados que se pueden activar para ciertas acciones. Algunos de los fáciles son:</p>
<ul>
<li>clics del mouse</li>
<li>mouse over (flotando sobre algo en la página)</li>
<li>foco de campo de formulario (el cursor va dentro de un campo de formulario)</li>
<li>el campo de formulario se desdibuja (el cursor deja un campo de formulario)</li>
<li>formulario envía</li>
<li>etc.</li>
</ul>
<p>Todo esto tiene sentido; son cosas que hacemos todos los días en la web. A veces necesitas rastrear 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 debe sintonizar la frecuencia correcta para escucharlos. Si transmites y nadie está escuchando, no es gran cosa (no se lo digas a los anunciantes de radio). Lo mismo ocurre con los eventos: puede desencadenar un evento y no causará ningún problema ni arrojará errores si no hay algo que lo escuche. Y si escucha un evento que nunca sucede, tampoco causará ningún problema ni arrojará errores.</p>
<p>¿Porque es esto importante? Una de las formas antiguas de rastrear acciones era crear una función JavaScript personalizada y luego llamarla, o implementar un conjunto de código muy específico que sea específico para un sistema de administración de etiquetas u otra base de código. Pero, ¿qué pasa si esa función de alguna manera se eliminó o cambió de nombre? Obtendría errores de JavaScript que a veces podrían romper un sitio. Los eventos resuelven ese problema.</p><div class='code-block code-block-3' style='margin: 8px auto; text-align: center; display: block; clear: both;'>
<div data-ad=

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

Para poder escuchar un evento, primero debes 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 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 de eventos básicos:

  • Evento: desencadena que algo sucedió sin enviar datos adicionales sobre el evento
  • CustomEvent: agrega algunos datos al evento

Usaré un ejemplo con un evento personalizado, ya que le permiten agregar datos. Supongamos que tenemos un carrito de compras, y cuando agrega algo al carrito, utiliza AJAX. Esto significa que no se carga una nueva página, pero en su lugar puede haber una ventana emergente o un mensaje que le informa que se agregó un artículo al carrito. Cuando esto sucede, puedo crear un evento personalizado que me dice exactamente lo que 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 "detallados" personalizados como un objeto, a los que puedo hacer referencia cuando escucho el evento. Después de construir el evento, lo disparo 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"
    Tipo de evento personalizado
  4. Defina la etiqueta o elemento que tendrá este evento. Usando selectores CSS, esto será "#minicart"
    Selector de eventos personalizados DTM
  5. Configura 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. <>%. Vea el ejemplo a continuación.
    Elementos de datos dinámicos para eventos personalizados.
    Probablemente nunca enviaría un evento como este, pero entiendes 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 estaba destinado 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 quedando en segundo plano en mis implementaciones, y los eventos personalizados son una escopeta.

pushState

Ahora echemos un vistazo a 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 marcos 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.

Tipo de evento DTM pushState o hashchange

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

hashchange

Gracias a Twitter todos sabemos lo que 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 hash se pueden usar para muchos propósitos, por lo que no veremos las razones por las cuales alguien tendría esto. Antes de que pushState existiera, no era raro actualizar el hash con nuevo contenido 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 criterio. Por ejemplo:

Condición de hash de Adobe DTM

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