Última actualización: 24 de agosto de 2022:Las instrucciones de este artículo ya no son tan útiles, ya que simplemente puedes usar el JavaScript nativo.
Aspect.closest(selector)método en lugar del truco {{Discover Closest}} descrito en este artículo. Compatibilidad del navegador conclosestAfortunadamente ha mejorado mucho desde que se escribió originalmente este artículo.
Administrador de etiquetas de Google nos proporciona una serie de activadores útiles, diseñados para facilitar la captura de interacciones de los usuarios en el sitio internet. Estos activadores forman parte de un paradigma llamado seguimiento automático de eventosque comprende el Hacer clic, Forma, Historiay Error de JavaScript tipos de disparadores
Ya he hablado de los activadores de GTM muchas, muchas veces. Si necesitas un repaso, echa un vistazo a los siguientes artículos:
En este artículo quiero abordar un aspecto específico de Haga clic en disparadoresSi los has usado antes, sabrás (al menos) dos cosas:
-
El Solo enlaces El disparador captura el elemento de enlace (
) que es el enlace de envoltura más cercano del elemento en el que se hizo clic. -
El Todos los elementos El disparador captura el elemento en el que se hizo clic.
En otras palabras, el disparador Solo vínculos en realidad sube por el documento hasta encontrar un elemento de vínculo y lo devuelve para que GTM lo procese. El disparador Todos los elementos actúa más como un controlador regular: simplemente devuelve el elemento en el que se hizo clic.
En este artículo, quiero mostrarte cómo aprovechar especialmente el disparador Todos los elementos de manera más eficaz. Básicamente, es posible que quieras usar el disparador Todos los elementos, pero luego imitar el disparador Solo vínculos para encontrar el elemento envolvente más cercano y devolverlo para que lo use GTM.
incógnita
El boletín informativo de Simmer
Suscríbete a la Boletín informativo de Simmer ¡Para recibir las últimas noticias y contenidos de Simo Ahava en tu bandeja de entrada de correo electrónico!
¿Por qué utilizar All Parts?
Bueno, hay una razón obvia: Hay todo tipo de elementos en la página que quizás quieras rastrear.Aunque los enlaces son un elemento de seguimiento muy common, hay muchos elementos que no tienen nada que ver con ellos.
Quizás desees realizar un seguimiento de un botón, un campo de formulario o una imagen. En estos casos, necesitarás el disparador Todos los elementos.
Otra razón que quizás no conozcas es muy significativa: El disparador Todos los elementos utiliza el captura fase de la ruta del eventoEl disparador Simply Hyperlinks, así como prácticamente todos los demás disparadores de GTM, utilizan el burbuja fase.
¿Y por qué es importante esto? Porque la propagación de eventos es cancelado con mayor frecuencia en el burbuja ¡Fase! Muchas personas se han encontrado con formularios y enlaces que simplemente se niegan a activar sus respectivos activadores en Google Tag Supervisor. La razón es que otro JavaScript en el sitio puede impedir que el evento suba por el documento hasta donde esperan los oyentes de Google Tag Supervisor.
Pero cuando usas el disparador Todos los elementos, estás usando el captura fase, que se cancela con mucha menos frecuencia.
En otras palabras, puedes usar el activador Todos los elementos para aplicar el seguimiento de enlaces que no crean un evento GTM cuando usas el activador Solo enlaces.
El único problema con este enfoque es que el disparador Todos los elementos devuelve el elemento actual en el que se hizo clic. Por ejemplo, supongamos que tiene HTML como este en el sitio:
<div id="contact-us">
<a href="mailto:(electronic mail protected)">
<span>Ship me mailspan>
a>
div>Si usaste un Solo enlaces disparador y la propagación del evento no se detuvo, al hacer clic en el enlace pasará el (electronic mail protected)"/> a Google Tag Supervisor como elemento de destino del evento. Pero si estás usando el Todos los elementos disparador, GTM captura el ¡Porque es donde realmente aterrizó el clic!
Entonces, ¿cómo obtenemos el beneficio de todos los elementos con su captura manejador de fase, pero ¿aún así poder capturar cualquier elemento en el árbol DOM?
¡Con un poco de magia de etiquetas HTML personalizadas y variables JavaScript personalizadas, por supuesto!
La solución
La solución consta de dos partes. Primero, necesitamos crear una etiqueta HTML personalizada que introduzca un relleno de polietileno (léase: solución alternativa) para navegadores más antiguos que podrían no admitir el método que vamos a utilizar.
A continuación, utilizaremos una variable de JavaScript personalizada para crear una función genérica a la que podemos pasar una Selector CSSEsta función, a su vez, sube por el árbol del documento y devuelve el elemento que coincide con el selector.
Tenga en cuenta que puede lograr la mayor parte de esto fácilmente con jQuery o algo comparable. Sin embargo, quiero mostrar la forma nativa de hacerlo en JavaScript, ya que en realidad no es tan complejo.
La etiqueta HTML personalizada
La etiqueta HTML personalizada debe activarse lo antes posible en la página, de modo que puede utilizar el activador Todas las páginas, si lo desea. Esto es lo que contiene:
Esta es una buena adición al código del sitio en basic, por lo que, si es posible, ¡te recomiendo que lo hagas!
El polyfill está gratamente copiado del Páginas de la purple de desarrolladores de Mozilla.
El script comprueba si el navegador admite el método. Aspect.matches() o cualquiera de sus alternativas. Si no se encuentra ninguna coincidencia, se soluciona con un método personalizado que recorre los elementos del documento y comprueba si alguno coincide con el selector CSS indicado.
¡Una vez que esté funcionando, puedes comenzar a usarlo!
La variable personalizada de JavaScript
Para que todo funcione, necesitamos una pequeña utilidad: variable personalizada de JavaScript. Por lo tanto, crea una nueva variable personalizada de JavaScript y nómbrala {{Buscar más cercano}}Este es el código que debes poner dentro:
operate() {
return operate(goal, selector) {
whereas (!goal.matches(selector) && !goal.matches('physique')) {
goal = goal.parentElement;
}
return goal.matches(selector) ? goal : undefined;
}
}
Esta función toma dos parámetros: goal y selectorEl primero es un elemento HTML como el {{Hacer clic en el elemento}} variable incorporadaEste último es un Selector CSS Cadena. El selector CSS es lo que se utiliza para indicarle a GTM lo siguiente:
A partir de
goalcomience a subir por la estructura DOM envolvente hasta que encuentre un elemento que coincidaselectorSi se encuentra dicho elemento, devuélvalo. Si NO se encuentra dicho elemento, devuelva el objetivo del evento unique.
La concept aquí es que, aunque el clic haya impactado en el elemento al que desea dirigirse, Es posible que en realidad desees acceder a algún otro elemento relativo al objetivo del evento unique.Para ello, el matches() La solución alternativa es invaluable, ya que permite recorrer rutas relativas a elementos.
Cómo usarlo
Una vez que haya configurado el polyfill y la variable JavaScript personalizada, puede aprovechar la variable en todo su JavaScript de Google Tag Supervisor con la siguiente sintaxis:
var elementFound = {{Discover closest}}(someHTMLElement, 'someCSSselector');
Por ejemplo, supongamos que tienes una estructura HTML que se parece a esto:
<div id="product_12345">
<div class="particulars">
<h2>Product 1h2>
div>
<div class="hyperlink">
<a href="product1.html">
Product 1
a>
div>
div>Ahora, has configurado un Haga clic – Solo enlaces o Haga clic en todos los elementos disparador para capturar clics en el elemento. Ahora, sin embargo, también desea capturar el valor del id atributo desde lo más alto div (“product_12345”). Para obtenerlo, puede utilizar una variable JavaScript personalizada como esta:
operate() {
var el = {{Discover closest}}({{Click on Aspect}}, 'div(id^="product")');
return typeof el !== 'undefined' ? el.id : undefined;
}
Esta variable JavaScript personalizada toma {{Click on Aspect}} (el elemento en el que se hizo clic originalmente) y luego comienza a recorrer el DOM hasta que encuentra un div cuyo id El atributo comienza con la cadena “producto”. Si se encuentra dicho elemento, devuelve el valor del id atributo en cuestión. Si no se encuentra el elemento, simplemente devuelve undefined.
Resumen
Recorrer el modelo de objetos del documento con selectores CSS puede ser un gran aliado. Los controladores de clics suelen ser también preciso, ya que devuelven elementos que no esperábamos que devolvieran, o devuelven elementos demasiado profundos en el DOM como para que importen.
Por eso es bueno tener una herramienta que te permita acceder a la estructura del DOM de forma más deliberada. Recorrer el DOM con la solución alternativa {{Discover nearest}} es una buena manera de lograr el tipo de libertad con JavaScript nativo que normalmente solo se encuentra en marcos como jQuery.