Ahora existe una forma mucho más sencilla y nativa de GTM de hacer esto: el Coincide con el selector CSS.
Detrás de este título trágicamente aburrido se esconde una solución sencilla a muchos problemas relacionados con el seguimiento automático de eventos de Google Tag Supervisor. El denominador común de estos problemas es el marcado deficiente del sitio internet. Los selectores se utilizan con moderación y la jerarquía de elementos es confusa. Este desprecio por las relaciones adecuadas de los nodos significa que debe recurrir a macros de variables de capa de datos que parecen
gtm.component.parentElement.parentElement.id
para identificar el elemento que fue el objetivo del evento. En otras palabras, no existe un identificador único y sólido con el que pueda identificar el elemento objetivo, por lo que debe subir o bajar en el modelo de objetos de documento para encontrar algo a lo que pueda aferrarse.
Esto es no una solución estable.
Cuantos más pasos haya en su cadena de selección, más posibilidades habrá de que calcule mal los pasos requeridos o que algún código en alguna plantilla de página produzca una jerarquía que no tuvo en cuenta, lo que resulta en una pérdida de visitas.
En esta guía presento una solución bastante easy. Explora el concepto de relaciones de nodos utilizando una función DOM easy para hacerlo. Todo esto sigue siendo una solución alternativa y definitivamente deberías intentar hablar con tus desarrolladores sobre cómo marcar tus elementos con identificadores adecuados.
(Por cierto, para concepts de marcado, aquí hay dos artículos excelentes sobre el uso de atributos de datos como identificadores:
Seguimiento de clics mediante atributos de datos personalizados – generoso
Eventos de Google Tag Supervisor que utilizan atributos de datos HTML5 – Ruta del oleaje)
De todos modos, esta guía demostrará una función DOM (Modelo de objetos de documento) bastante easy con la que verificar si un elemento dado (por ejemplo, {{elemento}}) es un antepasado de algún otro elemento (por ejemplo, un contenedor de menú de nivel superior). La regla se verá así:
Como de costumbre, está el método fácil y luego está el método avanzado (que en realidad no es tan avanzado).
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.
El método fácil
En realidad, el método sencillo consiste simplemente en comprobar la relación de nodo entre un elemento determinado, como {{component}}, y un elemento principal específico. Esto es útil si solo tienes uno o dos casos en los que esto sea un problema.
El método DOM que usaremos es Nodo.contiene.
Aquí está el Macro de JavaScript personalizadaque es el motor de la solución, en toda su sencillez:
{{el nodo contiene elemento}}
perform() {
var controlElement = doc.querySelector('#parentId');
return controlElement && controlElement !== {{component}} ? controlElement.accommodates({{component}}) : false;
}
Y luego tu regla de despido será algo como:
{{el nodo contiene elemento}} es igual a verdadero
{{evento}} es igual a gtm.linkClick
No dudes en utilizar cualquier otro seguimiento automático de eventos escriba lo que desee.
Esto solo activará la etiqueta si se hace clic en un enlace que es un antepasado directo de un elemento con ID. ID de padre. Un primo o un hermano de sangre perdido hace mucho tiempo no servirán; los nodos deben tener una relación ancestral directa.
Entonces eso fue fácil, ¿verdad? ¿Qué pasa cuando tienes múltiples relaciones entre antepasados y descendientes que quieres explorar? Puede crear una regla y una macro para cada una, pero una forma mucho más sólida es utilizar una tabla de búsqueda o una macro de JavaScript personalizada.
El método avanzado
La thought con el método avanzado es variar el nodo contra el cual controlas el elemento del evento, dependiendo de algún parámetro. En este ejemplo specific utilizo {{ruta URL}} para determinar qué nodo de management elegir y una macro de JavaScript personalizada para devolver el nuevo selector de consultas.
Entonces digamos que tengo tres plantillas de página:
-
Página de inicio (ruta URL === ‘/’), donde deseo realizar un seguimiento de los clics en los enlaces en la navegación principal (id === ‘#mainNav’)
-
Páginas de productos (ruta URL === ‘/productos/*’), donde deseo realizar un seguimiento de los clics en cualquiera de los tres elementos de la página de llamado a la acción (clase === ‘llamado a la acción’)
-
Todas las demás páginas en las que deseo realizar un seguimiento de los clics en los enlaces del pie de página (nombre de etiqueta === ‘pie de página’)
Ahora, para complementar la macro de JavaScript personalizado anterior, quiero que el selector de consultas sea dinámico, dependiendo de cuál de las condiciones anteriores sea verdadera. Así que modifiquemos un poco la macro:
perform() {
var controlElement = doc.querySelector({{get question selector}});
return controlElement && controlElement !== {{component}} ? controlElement.accommodates({{component}}) : false;
}
Entonces es lo mismo, pero el doc.querySelector() recupera la cadena de consulta de una macro llamada {{obtener selector de consultas}}.
¿Y cómo es esta macro? Bueno, para satisfacer los tres requisitos que mencioné anteriormente, esto es lo que obtendrás:
perform() {
var homeRegex = /^/$/,
productRegex = /^/merchandise//;
if(homeRegex.check({{url path}})) {
return '#mainNav';
} else if (productRegex.check({{url path}})) {
return '.call-to-action';
}
return 'footer';
}
Esto devuelve una cadena diferente cada vez, dependiendo de la condición que cumpla la ruta URL del documento.
Ahora puede crear una etiqueta única para cada una de estas tres variaciones, aún haciendo referencia a la misma macro en la regla, porque devolverá verdadero/falso dependiendo de qué condición se cumpla. Si desea una verificación más detallada que solo booleana verdadero/falso, puede modificar la macro unique para devolver el selector de consultas en sí, después de lo cual puede modificar la regla en consecuencia:
perform() {
var controlElement = doc.querySelector({{get question selector}});
return controlElement && controlElement !== {{component}} && controlElement.accommodates({{component}}) ? {{get question selector}} : false;
}
Este fragmento de código devuelve “#mainNav” si el clic se produjo en la navegación de la página de inicio, ‘.call-to-action’ si el clic se produjo en cualquiera de los tres elementos de llamado a la acción en la página de inicio, o ‘pie de página ‘ para todos los demás casos. Luego, si tiene una etiqueta que solo debería activarse al hacer clic en las llamadas a la acción de la página del producto, la regla se vería así:
{{evento es igual a gtm.linkClick}}
{{el nodo contiene elemento}} es igual a .call-to-action
Y eso es todo por el método avanzado. Recuerde que una de las grandes ventajas de utilizar una solución de gestión de etiquetas es la oportunidad de consolidar sus etiquetas y hacer que toda la configuración sea mucho más sencilla. El uso de macros de JavaScript personalizadas para búsquedas avanzadas o la macro de tabla de búsqueda para recuperaciones de valores simples suele ser la clave para reducir el peso de su implementación.
Conclusiones
Esta fue una guía muy básica sobre un pequeño y atractivo método del objeto DOM Node que muchos no parecen conocer. El punto aquí es que en lugar de construir grandes cadenas de selección, donde cada eslabón es más débil que el anterior, puede simplemente usar una búsqueda de ancestros que lo abarque todo, lo que cut back la posibilidad de error.
Si quieres ser realmente llamativo, siempre existe la Nodo.compareDocumentPosition() método, que devuelve una máscara de bits que representa la relación entre dos nodos. No sólo tiene en cuenta la ascendencia, sino que también busca relaciones de descendientes, lo que puede resultar útil en algunos casos. Sin embargo, no está dentro del alcance de esta guía y estoy bastante seguro de que la mayoría de los problemas se pueden resolver con la búsqueda de antepasados.
¡JavaScript es divertido! ¡Google Tag Supervisor es más divertido!