(Última actualización en junio de 2014: Lea la última publicación sobre la extensión, Sonda GTM v1.2.)
Muchos de los Administrador de etiquetas de Google Los artículos de este weblog podrían considerarse trucos, ya que amplían las funciones listas para usar de GTM en formas que seguramente no serán compatibles oficialmente con Google. El quid del problema es que mucha gente se sorprende cuando GTM se niega a funcionar correctamente en su sitio, o cuando tienen problemas para rastrear elementos clave en la plantilla de página.
Seguimiento automático de eventos Es un denominador muy común cuando surgen problemas con GTM. Es una característica maravillosa que le permite etiquetar y rastrear acciones automáticamente en la página net usando detectores de eventos, pero hay muchos problemas con JavaScript conflictivo y marcado de mala calidad que podrían impedir que el seguimiento automático de eventos funcione por completo.
Para ayudarlo a establecer el estado precise de su plantilla, le proporciono la extensión de Chrome GTM Auto-Occasion Listener Debugger (nombre en construcción). Debería ser una herramienta bienvenida para usted si desea depurar la plantilla de su página y los elementos de la página teniendo en cuenta el seguimiento automático de clics.
Lo primero es lo primero: descargue el depurador de escucha automática de eventos de GTM aquí.
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.
Descargo de responsabilidad
Los problemas de marcado siempre deben resolverse primero con los desarrolladores del sitio y luego con un terapeuta autorizado. La mayoría de las veces es sólo una cuestión de si se han observado las mejores prácticas, como identificar elementos únicos con ID, agrupar estilos similares con clases o tener una jerarquía de diseño consistente. Todos estos son problemas que deberían solucionarse en el CMS (o la plantilla), porque también facilitan el trabajo de desarrollo del sitio net en el futuro.
Sin embargo, hay muchas razones por las que una No se puede establecer una relación con los desarrolladores.. Es posible que sea un trabajador contratado con solo GTM y análisis net como dominio. Es posible que los desarrolladores no sepan nada sobre el desarrollo net. La organización podría insistir en procesos rígidos y burocracia para hacer cualquier cosa, y eso simplemente no encajará con su visión de análisis ágil.
Cualquiera sea el caso, a veces sólo tienes que superar las deficiencias de tu CMS o de tu plantilla de página. Al menos, al menos tendrá una prueba de concepto en sus manos para entregársela a los desarrolladores.
Instrucciones
Para usar el depurador, primero asegúrese de haberlo habilitado en Herramientas -> Extensiones de su navegador Chrome. Si está habilitado, debería ver un ícono de destino rojo en el panel de su extensión.
Los pasos reales para usar el depurador son simples:
-
Busque una página net que desee depurar
-
Haga clic en el objetivo rojo (debería volverse verde para indicar que el depurador se está ejecutando)
-
Haga clic en cualquier lugar de la página
-
Abra la consola JavaScript en Chrome, escriba
debugDLy presione Entrar
Cuando enciendes el depurador, hace dos cosas: 1) detiene la acción predeterminada de todos los clics en la página, 2) cuando haces clic en un elemento, almacena sus detalles en el debugDL matriz en formato idéntico a los oyentes GTM.
¿Por qué evitar la acción predeterminada de los clics? Easy, por razones de depuración, es mejor si permaneces en la misma página para probar cosas. Detener la acción predeterminada impide que los enlaces funcionen. Porque debugDL es un objeto en el documento precise, persistirá solo para la página en la que se encuentra (related a cómo funciona dataLayer).
¿Y por qué almacenar el objeto en debugDL y no dataLayer¿Por ejemplo? Bueno, quería que este depurador no arruinara ningún marco existente, para que puedas jugar libremente. Claro, a alguien más se le podría haber ocurrido el nombre “debugDL” en otras bibliotecas o extensiones, pero me arriesgaré.
Cuando desactiva el depurador (haciendo clic nuevamente en el destino), se devuelve la acción predeterminada de los eventos de clic. El debugDL Sin embargo, la matriz no se borra y puede continuar viendo su contenido mientras esté en la página.
La parte de depuración comienza cuando comienzas a revisar debugDL. Cada clic se registra en un formato idéntico al que obtendría si tuviera activo un GTM Click on Listener.
¿Cuál es el punto?
La thought es probar la plantilla de su página si funciona con los oyentes de GTM.
O tal vez desee planificar con anticipación y elegir las propiedades del elemento en el que se hizo clic (o sus padres o hermanos) al que desea acceder en sus macros.
O tal vez desee ver si los eventos de clic se propagan a los oyentes de GTM, que operan en el nodo superior del documento.
Mi razón favorita es esta: hago MUCHA depuración para las personas y no siempre tengo acceso a su contenedor de vista previa/depuración. Entonces, en realidad no hay ningún oyente que se lively en la página, y tengo que adivinar mirando el marcado y aplicando ingeniería inversa a su JavaScript para identificar por qué los oyentes de clics podrían no funcionar.
Con esta extensión, puedo depurar el sitio sin necesidad de un detector de clics GTM actual.
Cosas técnicas
Si conoces tu Extensiones de Chromesabrás que operan en un entorno aislado. Lo que esto significa en la práctica es que no puedes acceder a las variables creadas por la página en la extensión.
Esto también tiene implicaciones para este oyente, porque quiero almacenar datos en el window.debugDL formación.
Para evitar este problema, cuando activa el depurador, inyecta un bloque de script en su plantilla de página, que crea el objeto. Este bloque de secuencia de comandos también prepara el detector de clics en el nodo del documento. Cuando luego hace clic en cualquier parte de la página, se realiza otra inyección en forma de empuje en debugDL.
Inyectar cosas apesta, pero es la única forma (hasta donde yo sé) de modificar variables en el window objeto a través de la extensión.
Cuando desactiva el depurador, elimina el detector de eventos y todos los bloques de secuencias de comandos personalizados creados por la extensión.
Tenga en cuenta también que las acciones del depurador son exclusivas de cualquier pestaña en la que se activó el depurador. Esto significa que puede tener varias pestañas abiertas, cada una con sus propias instancias del depurador ejecutándose o no. Genial, ¿eh?
¿Qué sigue?
Dado que esta es mi primera incursión en las extensiones de Chrome, hay muchos ajustes por hacer. Aquí hay una lista de cosas que he pensado hacer en un futuro cercano. También solicité pruebas beta a la maravillosa gente del Comunidad GTM de Google+¡así que espero tener más funciones en la mesa de dibujo pronto!
-
Un interruptor para desvincular todos los controladores de clics de jQuery en el sitio, para probar si la interferencia de jQuery es la razón por la que los oyentes de eventos automáticos no registran sus clics.
-
Agregue también una función de escucha de clics en enlaces, para registrar solo los clics en los elementos del enlace.
-
Agregue también una función de escucha de envío de formularios: dado que alrededor del 75 % de todos los problemas de los escuchas tienen que ver con el envío de formularios, esto es realmente una obviedad.
-
Agregue otros controladores de eventos, como pasar el mouse por encima, presionar una tecla o cambiar, para demostrar el poder de rastrear automáticamente todas las acciones basadas en el usuario.
-
Hazlo más bonito y llamativo.
-
Piensa en un mejor nombre para la extensión.