Como estaba aburrido, hice una prueba rápida para determinar el orden de activación de los oyentes de GTM que competían. Si has hecho tu tarea (es decir, has leído mi artículo sobre oyentes de GTM), recordará que los oyentes de GTM están configurados en el documento nodo del modelo de objetos de documento (DOM). Quería probar cuál es el orden de activación si tienes varios oyentes compitiendo en la misma página.
Probé con los siguientes oyentes (asegúrate de leer sobre seguimiento automático de eventos si está completamente desconcertado en este punto):
-
Escucha de envío de formulario: escucha un evento de envío en un formulario
-
Click on Listener: escucha un evento de clic en cualquier elemento
-
Hyperlink Click on Listener: escucha un evento de clic en un elemento de enlace
-
Oyente de historia – escucha cambios en el historial del navegador
incógnita
El boletín a fuego lento
Suscríbete al Boletín a fuego lento para recibir las últimas noticias y contenido de Simo Ahava en su bandeja de entrada de correo electrónico.
la premisa
tuve un muy Página HTML sencilla, con sólo dos botones. Uno period el botón de envío de un formulario vacío, el otro un elemento de botón HTML5, envuelto en un enlace.
Para hacer las cosas más interesantes, también envolví el botón de envío del formulario en un enlace, porque quería ver qué sucede. No es como si alguna vez te encontraras con una implementación tonta como esa en la vida actual. Espero.
Así es como se veía el código:
<html>
<head>
<title>Simply testingtitle>
head>
<physique>
<type motion="#type">
<a href="?formlink">
<enter kind="submit" worth="Kind check"/>
a>
type>
<a href="?buttonlink">
<button>Hyperlink checkbutton>
a>
physique>
html>Muy sencillo, ¿verdad? Utilicé parámetros de consulta en enlaces simplemente porque quería ver qué pasó con el {{url}} macro cuando diferentes oyentes dispararon.
Creé una etiqueta HTML personalizada para cada oyente, con solo un easy diálogo de alerta. Así es como se veía mi etiqueta de clic:
<script>
alert("Click on occurred on " + {{url}});
script>
Y lo mismo ocurre con todos los demás oyentes. Entonces, cada vez que un oyente dispara, se muestra una alerta. Con solo seguir la secuencia de estas alertas, siempre debería ver cuál es el orden de disparo.
Resultado
Esto es lo que pasó Cromo y Safari:
Haga clic en “Formulario de prueba”
-
Alerta: Clic en el enlace ocurrió en (URL precise)
-
Alerta: Hacer clic ocurrió en (URL precise)
-
Alerta: Enviar formulario ocurrió en (URL precise)
-
Alerta: Evento histórico ocurrió en (URL precise +?#formulario)
Entonces el orden es:
Haga clic en el enlace -> Haga clic -> Enviar formulario
El Historical past Listener se activa porque el formulario me transporta a la URL ?#type (está en el acción atributo del elemento de formulario), y en Chrome y Safari esto desencadena un estado pop evento.
Haga clic en “Prueba de enlace”
-
Alerta: Clic en el enlace ocurrió en (URL precise)
-
Alerta: Hacer clic ocurrió en (URL precise)
-
Alerta: Evento histórico ocurrió en (URL precise +? Enlace de botón)
Y el orden es:
Enlace Haga clic -> Haga clic
El Historical past Listener dispara esta vez también sobre estado popporque la entrada del historial activo se cambia a ?buttonlink gracias a la acción predeterminada del enlace.
Con Firefox, el oyente de la historia no se activa al cargar la páginapor lo que no recibirás una alerta sobre los cambios de eventos del historial. De lo contrario, la secuencia es la misma.
Conclusiones
El resultado de esta sencilla prueba es que sus oyentes GTM se activan en el siguiente orden:
Haga clic en el enlace -> Haga clic -> Enviar formulario
Recuerde que cualquier otro oyente que haya configurado en los nodos del elemento (por ejemplo, onClick) se activará primero. Por ejemplo, si tienes un empujarEstado() llamada enviada al hacer clic en un enlace de navegación, esto cambiará la URL (si la pasa como parámetro) antes el oyente de clic en su enlace se activa. Esto, a su vez, significa que si tiene un evento enviado a GA con gtm.linkClick como regla de activación del evento, verá la URL configurada en empujarEstado() como la página donde se hizo clic en el enlace.
Asegúrese de comprender cómo los oyentes compiten entre sí. Los oyentes GMT son los últimos de la línea porque están configurados en el nodo del documento, no en los elementos en sí.
Todavía no me he encontrado con un solo caso en el que tener varios oyentes de GTM activos al mismo tiempo pueda causar problemas en la recopilación de datos. Sin embargo, no es inconcebible y realmente deberías intentar mantener las cosas simples con las etiquetas de tus oyentes (entre otras cosas).