¿Cómo se comprueba si el Google Tag Manager funciona?

Google Tag Manager. Lo que facilita la vida de los vendedores y analistas web. Pero el propósito de esta entrada en el blog no es convencerte de que empieces a usarlo. Hoy, asumo que ya has decidido darle una oportunidad a Tag Manager (o tal vez incluso usarlo una o dos veces). En esta entrada del blog, les mostraré cómo comprobar si el Google Tag Manager funciona correctamente.

Hay varias formas de hacerlo, pero ten en cuenta que estos consejos no son alternativas entre sí. Si es posible, deberías usarlos todos o al menos la mitad de ellos.

Para comprobar si Google Tag Manager funciona, debes completar los siguientes pasos:

1. Comprueba el código fuente del sitio web (y utiliza la función de «Búsqueda»)
2. Activar el modo de vista previa y depuración. ¿Apareció? ¿Está todo funcionando?
3. Comprueba el asistente de etiquetas de Google
4. Rana gritona de apalancamiento
5. Revisa las herramientas de desarrollo de Chrome
6. Revisa los informes en tiempo real de Google Analytics (si has configurado algún evento o vista de página)

Ahora, veamos más de cerca cada paso individualmente.

1. Revisa el código fuente de la página web

1. Visita tu página de inicio (o cualquier página de tu sitio web)
2. Haga clic con el botón derecho del ratón (en cualquier lugar del fondo de la página) o pulse la tecla y haga clic en «Ver fuente de la página» (o simplemente pulse CTRL + U en el teclado)
3. Cuando vea la fuente de su página, haga un Control + F que le hará aparecer la función de «encontrar» dentro de su navegador
4. Introduce «gtm.js» aquí y si tienes algún carácter que coincida procede a verificar cada instancia.
5. Si tienes el GTM instalado correctamente, entonces deberías encontrar al menos una instancia (la está rodeada por script > de ambos lados).
   
6. Bastante a menudo el 2º código se implementa también (que está rodeado por ). Este código es opcional, pero si tienes la intención de usarlo, asegúrate de que se coloca inmediatamente después de la etiqueta en el HTML. Puedes aprender más sobre el noscript GTM aquí.

Importante: asegúrese de que todos los símbolos y caracteres de los fragmentos de código contenedor del Google Tag Manager sean correctos y que no haya modificaciones (especialmente por accidente). Por ejemplo, es muy popular entre los comerciantes sin experiencia compartir los códigos de seguimiento a través de un archivo de Word o Google Docs. Es una práctica muy mala porque estas plataformas suelen romper el código cambiando automáticamente las comillas.

2. Habilitar el modo de vista previa y depuración

La siguiente técnica para comprobar si el Google Tag Manager funciona es activar el modo de vista previa y depuración (P&D). Para ello, haga clic en el botón de vista previa en la esquina superior derecha de la interfaz GTM (cerca del botón Enviar ).

Después de habilitar el modo P&D, aparecerá un gran banner de notificación de color naranja.

Ahora, navegue hasta el sitio donde se implementa el código contenedor del Google Tag Manager, actualice la página y aparecerá una ventana de consola de depuración en la parte inferior de su navegador, mostrando información detallada sobre sus etiquetas, incluyendo su estado de disparo y qué datos se están procesando.

Esta ventana de consola sólo aparecerá en su ordenador cuando vea el sitio, y no es visible para los demás visitantes del sitio web.

Mientras siga navegando por su sitio y vea la consola de vista previa y depuración en la parte inferior de su pantalla, es una buena señal.

3. Usar el asistente de etiquetas de Google

Tag Assistant es una de las principales extensiones de Chrome para Google Tag Manager, una herramienta muy útil para probar y depurar su implementación. No solo ayuda a solucionar los problemas del Google Tag Manager, sino que también se puede verificar fácilmente la implementación de Google Adwords, Analytics y DoubleClick.

Una de las características más poderosas de la herramienta son las grabaciones. Esto permite «grabar» una sesión de navegación y producir un informe sobre todos los accesos que se envían e incluso sobre cómo se mostrarán potencialmente en Google Analytics.

1. Después de instalar la extensión, haz clic en el icono del Asistente de Etiquetas en tu navegador.
2. Habilita el Asistente de etiquetas y actualiza tu navegador.
3. Mira el estado del contenedor de Google Tag Manager. Si tiene amarillo o rojo, hay problemas con la instalación. Haz clic en el icono para saber cuál es el problema.

Tu objetivo es ver una etiqueta verde con una carita sonriente, como en la siguiente captura de pantalla.

4. Aprovechar la rana gritona

Otra forma de cómo la implementación del Google Tag Manager puede romperse es cuando el código del contenedor GTM no se agrega a todas las páginas de un sitio web. Hay muchas razones por las que cosas como esta suceden:

1. El Sistema de Gestión de Contenidos es terrible y está lleno de bichos.
2. El sitio web está usando un montón de plantillas de páginas diferentes y no hay una forma fácil de actualizarlas todas a la vez.
3. El desarrollador no tiene experiencia, etc.

Mi punto es que las cosas suceden y tienes que estar preparado para eso. Una de las formas de comprobar si el código del Google Tag Manager se añade a todas las páginas es utilizar un rastreador web.

Screaming Frog es una solución que es especialmente popular entre los profesionales de SEO que quieren comprobar lo que está pasando en los sitios web de sus clientes. ¿Cómo se relaciona con GTM? Se puede configurar para rastrear todo el sitio web y buscar https://www.googletagmanager.com/gtm.js en el código fuente del sitio web. Esta URL es usada por el contenedor del Google Tag Manager.

En la aplicación de Screaming Frog, vaya a Configuración > Personalizar > Buscar e introduzca la siguiente condición:

No contiene https://www.googletagmanager.com/gtm.js

Ingrese el URL del sitio web que desea revisar y presione el botón de Inicio.

Eso es todo! A medida que el rastreo progresa, podrá ver los URL completos de las páginas en las que falta el código del contenedor GTM. Su próximo paso es, obviamente, añadir el código de rastreo a esas páginas o pedirle a un desarrollador que lo haga.

5. Las herramientas para desarrolladores de Chrome

Otra forma de comprobar si el Google Tag Manager funciona es sumergirse más profundamente en la zona del desarrollador. Necesitaremos las herramientas para desarrolladores de Chrome aquí (otros navegadores también tienen herramientas, pero Chrome es el navegador de mi elección, por eso le prestaré más atención).

En Mac, puedes acceder a las herramientas para desarrolladores a través del menú Ver.

En Windows, haz clic en CTRL + Mayúsculas + I.

Observarás que en la parte inferior de la pantalla se habilita una consola completa con varias opciones. Hay dos pestañas que te interesarán más, Consola y Red.

En primer lugar, haga clic en Consola y comience a navegar por el sitio web y siga buscando errores. Si no se produce ninguno, ¡genial! De lo contrario, si ves una advertencia o un error y contiene palabras clave como Google Tag Manager, gtm.js, etc., esto significa que algo no está bien con tu implementación.

Discuta eso con un desarrollador, pregunte en los foros de GTM o Stack Overflow, o simplemente en Google, tal vez otros se enfrenten a problemas similares y hayan encontrado una solución.

Ahora, vamos a la pestaña de la red. También notarán que está completamente en blanco (o contiene muy poca información). Esto se debe a que tendrás que refrescar tu navegador para que esta información se complete. Refresca el navegador y empieza a ver algunos datos que llegan.

Esto es lo que sucede debajo del capó cada vez que se carga una página web. Verás las imágenes de tu sitio, los scripts que tienes y (con suerte) que el código del Google Tag Manager se ha disparado correctamente.

En el campo de búsqueda, ingresa gtm y comienza a buscar la línea con gtm.js?id=GTM-XXXXX (Reemplacé el ID actual por XXXXX). Si su estado es 200, ¡está listo para empezar! 200 significa OK.

También puedes buscar el analytics .js (ese es el script principal de Google Analytics), collect?v= (ese es el Hit Track de Google Analytics), etc.

En realidad, la pestaña de red es una herramienta invaluable para la resolución de problemas para cualquier webmaster o propietario de un sitio web, y va mucho más allá de sólo usar GTM. Puede utilizar esta herramienta para comprender plenamente la huella de su sitio en la web, cómo sus imágenes o scripts pueden afectar el tiempo de carga, etc. Esto puede ser muy poderoso, revelador, y lleva al conjunto a otro nivel.

6. Google Analytics + GTM? Revisa los informes en tiempo real!

Si ya has implementado algún evento de Google Analytics o Pageviews en GTM, uno de los consejos más comunes que les doy a mis estudiantes es que siempre revisen los reportes de Google Analytics en tiempo real. Dado que la mayoría de ustedes usan el GTM para implementar varias cosas de rastreo relacionadas con GA, el reporte en tiempo real es un verdadero ahorro de tiempo.

Ingresen a su cuenta de Google Analytics y en la barra lateral izquierda, hagan clic en Tiempo Real. La sección » Overview » le mostrará las vistas de página y » Events » mostrará los eventos que acaba de enviar a Google Analytics.

Si los ves, entonces todo bien. Si no, entonces tendrás que solucionar los problemas.

Hay muchas razones posibles por las que los informes en tiempo real no te muestran nada y no todas están directamente relacionadas con el GTM.

Compruebe si el Google Tag Manager funciona: últimas palabras

Ahí estaban mis 6 consejos sobre cómo comprobar si el Google Tag Manager funciona correctamente. Si tuviera que elegir los 3 más utilizados, serían Preview and Debug Console, Tag Assistant, y GA Real-time reports (porque todos los proyectos en los que he trabajado usaron GA en algún momento). Pero, por favor, no subestimen a los demás, de hecho, estoy empezando a usar el resto de ellos cada vez más a menudo.

¿Me he perdido algo? ¿Hay alguna otra técnica que uses para comprobar si el Google Tag Manager funciona? ¡Házmelo saber en los comentarios!