Muy a menudo me encuentro con una configuración de Google Tag Supervisor en la que Los propios oyentes de eventos automáticos de GTM no realizan la tarea que se suponía que debían hacer. Los problemas del oyente parecen ser un tema candente en Google+ y el Foros de productos también.
Puede haber muchas razones por las que sus oyentes no funcionan, pero una tendencia muy común es que tenga bibliotecas o scripts de JavaScript en conflicto ejecutándose en su página.
Exploremos cómo trabajan los oyentes antes de abordar el problema. Verá, cuando adjunta un detector de eventos a un elemento en su modelo de objetos de documento (la colección de todos los elementos en su página), el detector espera a que el elemento produzca la acción que está escuchando.
-
con un oyente de clic en enlaceel controlador espera un enlace (
) elemento para activar un evento de clic. -
con un haga clic en oyenteel controlador espera a que cualquier elemento lively un evento de clic.
-
con un oyente de envío de formularioel controlador espera un formulario (
) aspect to fireplace a submit occasion.
Now this could nonetheless be simple to observe. You arrange a hyperlink click on listener, and when somebody clicks a hyperlink, the listener pushes the occasion gtm.linkClick into the dataLayer object. Run-of-the-mill stuff.
X
The Simmer Publication
Subscribe to the Simmer e-newsletter to get the newest information and content material from Simo Ahava into your electronic mail inbox!
Competing listeners
Right here’s the gist. When you have one other listener ALSO ready for a similar occasion, there’s an opportunity that it’s going to interrupt the occasion from ever reaching the GTM listener, which means that your hyperlink click on listener by no means fires.
How is that this potential?
Effectively, a GTM hyperlink click on listener, for instance, shouldn’t be truly primed on each single hyperlink aspect in your web page. Relatively, it’s connected to the best potential DOM aspect node: the doc itself. It makes use of a JavaScript function known as occasion delegation. Which means when a click on occasion happens on a hyperlink, the occasion begins to bubble (sure, that’s an official time period) up the DOM tree, till it reaches the topmost node. Any parts alongside this bubbly path with listeners connected to them will fireplace when the occasion reaches them. That is additionally known as occasion propagation.
The image under clarifies the distinction between a listener on the hyperlink node and a listener on the doc node. Within the instance, I’ve a single hyperlink aspect with a traditional onClick=”” attribute. In actuality, this attribute can be an occasion listener. It waits for a click on occasion on this particular tag. Additionally, I’ve GTM’s personal click on listener primed and prepared. As you’ll be able to see, the onClick listener is connected to the hyperlink node itself, whereas the press listener is connected to the doc node.
A sensible instance
Let’s say you’ve got a quite simple web page with a supply code that appears one thing like this:
<html>
<head>
<title>My Web pagetitle>
head>
<physique>
<div id="principal">
<a href="http://www.google.com">Googlea>
div>
physique>
html>Si ahora agrego un detector de clics en un enlace a mi contenedor GTM, se adjuntará al nodo del documento, que es un padre de nivel superior para todos los elementos que ve en el código anterior.
Ahora, cuando alguien hace clic en el enlace, sucede lo siguiente:
-
Cualquier oyente adherido al
elemento en sí (por ejemplo al hacer clic) se disparará primero, porque es el más cercano a la ocurrencia del evento -
Cualquier oyente adherido al
aspect will fireplace subsequent, as a result of it’s the fast mother or father to the aspect the place the occasion occurred -
And so forth till the occasion bubbles up all the best way to the highest of the DOM tree and reaches the doc node the place GTM’s hyperlink click on listener is ready
Right here’s the factor. If at any level throughout the occasion’s bubbly journey to the highest of the mountain its course of is halted by a conflicting script, for instance, the occasion won’t ever attain GTM’s listener!
The most typical wrongdoer is a competing jQuery listener which comprises the next, ominous line of code:
return false;
Esto detiene efectivamente el progreso del detector de eventos y devuelve la acción al elemento de enlace con una declaración del tipo “no hagas lo que se suponía que debías hacer en primer lugar”.
Un caso muy común es cuando se utiliza jQuery para animar el desplazamiento en la página para anclar enlaces (es decir, desplazamiento suave). He visto un montón de scripts que secuestran el evento de clic en el enlace, animan la transición a la parte correcta de la página y devolver falso;porque, naturalmente, no quieren que el enlace realice su acción predeterminada de transportarlo instantáneamente a la parte correcta de la página.
¿Cuál es la cura?
Tendrás que hablar con tus desarrolladores sobre esto. Dígales que necesita que la propagación de eventos funcione hasta el nodo del documento. Generalmente esto se puede hacer reemplazando
return false;
con
occasion.preventDefault();
Por supuesto, necesitarás pasar el evento click on a la función del controlador como parámetro (evento en occasion.preventDefault();) para que esto funcione. También puede haber problemas entre navegadores, así que investigue un poco antes de realizar cualquier cambio.
.preventDefault() también evita la acción predeterminada del evento de clic en el enlace, pero no impide que la propagación del evento continúe en el árbol DOM. Por supuesto, tendrás que probarlo, ya que reemplazar el código podría alterar la funcionalidad de tu script.
¡NOTA! si usas evento.preventDefault(); O devolver falso;deberás desmarcar la Validación de cheques opción en su enlace, haga clic en el oyente. Si se deja marcado, el oyente no se activará incluso si el evento llega hasta el nodo del documento.
Conclusiones
Comprender la propagación de eventos y cómo funcionan los oyentes de GTM es una de las cosas que no debería debe preocuparse al utilizar GTM. Después de todo, los administradores de etiquetas se anuncian como una solución integral para todos sus problemas de recopilación de datos con frases como: “Olvídalo” o “No se necesita más desarrollo”.
La dura realidad es que un administrador de etiquetas como GTM es sólo una biblioteca más en la a menudo congestionada jungla de recursos del cliente. Es possible que surjan conflictos, especialmente cuando se utilizan recursos externos como jQuery para agregar funcionalidad al sitio.
Por un lado, siempre que trabajo con un sitio net complejo, nunca, NUNCA, ignoraré la unidad de desarrollo o de TI del cliente. Más bien, les hablaré sobre GTM y trabajaré junto con ellos para elaborar el mejor plan de implementación posible, sin comprometer la implementación frontal precise.