32 Consejos de depuración y prueba de Google Tag Manager

IMPORTANTE: El 16 de octubre de 2023, GTM lanzó un nuevo modo de previsualización. Para obtener más información, vea este vídeo.

============

La depuración de Google Tag Manager es un arte en sí mismo. Comprobar el modo de vista previa y depuración para ver si la etiqueta se disparó es sólo la punta del iceberg. De hecho, hay muchas más cosas/técnicas que debes seguir para asegurarte de que todo funciona correctamente (o simplemente para encontrar la razón que está causando algunos errores desagradables).

En esta guía, he recopilado una lista de consejos de depuración y de prueba de Google Tag Manager (y algunas herramientas) para ayudarte a comprender mejor qué y dónde debes comprobar. Algunas de ellas se superponen, por lo que, al final, depende de ti cuáles usar. Empecemos, ¿sí?

Antes de continuar

Esta lista está definitivamente lejos de ser completa, por lo tanto, pido su opinión. Si ve que falta alguna técnica de depuración muy útil, por favor hágamelo saber en los comentarios o póngase en contacto conmigo a través de otros canales (por ejemplo, medios sociales, correo electrónico o formulario de contacto). Además, todavía hay una alta probabilidad de que todavía no sepa o simplemente haya olvidado incluir algo, por lo que cualquier aportación de mi público es apreciada.

Pasemos a los consejos de depuración de Google Tag Manager

He escrito un montón de consejos/sugerencias/ideas y luego los he dividido en categorías:

Tabla de contenidos

  • Consejos de depuración relacionados con la vista previa y el modo de depuración del GTM
  • Depuración de Google Tag Manager con herramientas de navegación incorporadas
  • Depuración de Google Tag Manager con extensiones del navegador
  • Otros consejos para la depuración del GTM

Parte I: Depuración del GTM con el modo de previsualización y depuración

#1. Si el cuadro naranja no aparece, la consola de previsualización del GTM tampoco

Si pulsas el botón de vista previa en la esquina superior derecha de la interfaz del GTM y no aparece el cuadro naranja (ver más abajo), es un buen indicador de que la cookie de terceros (de www.googletagmanager.com) no se ha almacenado en tu navegador.

Esto significa que la consola de Previsualización y Depuración tampoco aparecerá. Puede haber varias razones para ello. Por ejemplo, la configuración de privacidad de su navegador bloquea las cookies de terceros o usted está usando una extensión del navegador más agresiva relacionada con la privacidad que también bloquea las cookies de terceros de GTM.

¿Una solución para eso? Cambiar la configuración de las cookies de terceros para que las acepten, las cookies de la lista blanca www.googletagmanager.com, la lista blanca www.googletagmanager.com en la extensión de privacidad de su navegador, etc. Ya que hay muchos navegadores y extensiones, dejo esta tarea (para averiguarlo) para ti.

Además, este tema es una de las razones más populares por las que el modo de previsualización y depuración de GTM no funciona para usted.

Hay dos razones principales por las que quieres compartir tu modo de vista previa y de depuración:

  • mostrarle a alguien cómo implementó los cambios en el contenedor (por ejemplo, para el control de calidad)
  • …obtener la ayuda de alguien para depurar un asunto en particular para usted.

Este último punto es la razón por la que incluí este «consejo» en esta lista. Si quieres obtener ayuda de alguien más rápido (por ejemplo, en la comunidad GTM en Facebook), haz lo posible para proporcionar toda la información que puedas. Esto también incluye la URL de la página donde el problema debe ser depurado.

He tenido demasiadas veces en las que una persona me envía un enlace al modo P&D sin introducir realmente la URL de destino donde debería comprobarlo. No soy un psíquico para leer tu mente 🙂

Así que aunque este consejo no está directamente relacionado con TU depuración, hará el trabajo más fácil para la persona que quiera ayudarte y depurar.

#3. Para salir del modo de vista previa y depuración compartidos, debe volver a visitar la URL compartida y hacer clic en SALIR o eliminar la cookie de terceros

Si ha hecho clic en el enlace compartido de alguien del modo de vista previa y depuración y sigue viendo la consola de depuración en la parte inferior de la pantalla del navegador incluso después de que el trabajo/tarea de depuración ya esté hecho, tiene dos opciones:

  • Revisar el enlace del modo P&D compartido y hacer clic en Salir del modo de vista previa y depuración .
  • O eliminar la cookie de terceros que pertenece a www.googletagmanager.com

#4. El modo de previsualización y depuración puede no funcionar siempre y hay muchas causas para ello

Hay muchas razones por las que el modo de vista previa y depuración del GTM no funciona en su sitio web (del cliente). De hecho, he enumerado al menos 15 razones y soluciones a ellas. La lista contiene (pero no está limitada a):

  • Contenedor equivocado
  • Un fuerte caché…
  • Política de Seguridad de Contenidos (CSP)
  • AdBlockers
  • etc.

#5. El modo de vista previa puede ser minimizado. También puede permanecer así después de recargar una página.

Si el GTM ocupa demasiado espacio en la pantalla, puede redimensionarlo arrastrando su borde superior. Si quieres, puedes minimizarlo haciendo clic en un pequeño icono en su esquina superior derecha.

Si actualiza una página, la consola de depuración volverá a aparecer en su pantalla (independientemente de su estado anterior). Afortunadamente, esto se puede arreglar con las Herramientas Da Vinci de la Extensión Chrome. Este práctico plugin implementa varias mejoras en GA, GTM, Data Studio. Una de ellas es la función «Recordar minimizado» que mantiene la consola de Previsualización y Depuración minimizada incluso después de que la página haya sido recargada.

#6. El modo de vista previa y depuración se reinicia después de que la página se actualiza

Esto sucede porque la consola de P&D muestra lo que está sucediendo en la capa de datos , que se borra después de que la página se actualiza. Por lo tanto, si tienes algún clic u otra interacción rastreada en la consola de depuración y quieres ver qué tipo de variables estaban disponibles en ese momento, no podrás hacerlo después de que la página se actualice… a menos que apliques una de las siguientes técnicas/herramientas:

  1. ¿Quieres rastrear un enlace? CTRL + Clic (en Windows) o CMD + Clic (en Mac) ayudarán. Estos comandos abrirán el vínculo en una nueva pestaña, mientras que los datos de la pestaña anterior se conservan.
  2. Después de que hagas un clic o envíes un formulario, presiona rápidamente el botón ESC de tu teclado. El éxito no está garantizado pero aún así vale la pena intentarlo.
  3. A pesar de que la página se actualiza, todavía puede conservar la información de la capa de datos en su navegador. Esto puede hacerse habilitando la opción «Preservar registro» en la consola JavaScript del navegador y luego combinándola con extensiones como dataLayer Inspector+.
    Así es como puede preservar el registro en Google Chrome:
    Una vez que lo haga, habilite dataLayer Inspector+ haciendo clic en su icono y luego marcando la casilla de verificación:
    Después de eso, comenzará a ver algo de magia en la consola JS de su navegador.
    Alternativamente, puede usar las extensiones GTM Debugger o Data Layer Checker que preservan los datos en la función Data Layer without Preserve Log.
  4. Ingrese un Script Personalizado en la Consola JavaScript del navegador y bloqueará la recarga de la página.
  5. Pausando automáticamente la página en el evento de descarga previa. Al ir a las herramientas de desarrollo de tu navegador, puedes configurar la página para que se detenga cuando tenga la intención de recargarse. Durante la pausa, puedes inspeccionar la capa de datos en la consola de JavaScript del navegador. Esta técnica avanzada también se explica en la guía de Simo Ahava
  6. Implementar esta solución de Simo Ahava para persistir los datos en la Capa de Datos a través de las páginas.

#7. El lado izquierdo del modo de vista previa y depuración muestra los cambios en la capa de datos

Haga clic en cualquier interacción para inspeccionar lo que ocurrió en la Capa de Datos en ese momento exacto: qué datos estaban (in)disponibles. Cada pulsación de la Capa de Datos es visible en esta corriente. Si la pulsación tiene una tecla de evento , entonces el nombre exacto de la tecla será visible en la corriente. Si no hay ninguna tecla de evento, entonces la pulsación del DataLayer .push se mostrará como un mensaje.

#8. Si desea utilizar un dato en particular (de la Capa de Datos) en una etiqueta GTM, asegúrese de que este dato esté disponible como una variable en ese evento de Capa de Datos en particular

Hay varias interacciones en la capa de datos:

  • userInfo ( dataLayer.push personalizado)
  • Vista de página
  • DOM Ready
  • Ventana cargada
  • formSubmission (otro dataLayer.push personalizado)

Con el evento userInfo, hubo algunos datos relacionados con el usuario empujados a la Capa de Datos, incluyendo PricingPlan. Ahora, si quieres pasar el valor de PricewaterhouseCoopers con el evento FormSubmission a una herramienta de terceros, como Google Analytics o Facebook Pixel, tienes que asegurarte de que el valor del plan de precios está realmente disponible en la Capa de Datos.

Puedes comprobarlo fácilmente por:

  1. eligiendo el evento formSubmission en el modo de vista previa y depuración (porque quieres disparar una etiqueta sobre este evento)
  2. y yendo a la pestaña de Variables.

Si la variable contiene algún valor real (no un indefinido, NaN, etc.) en ese evento de Capa de Datos, definitivamente puedes usar la variable en una etiqueta para enviar su valor a una herramienta de terceros. Tenga en cuenta que los datos personalizados de la Capa de datos no están disponibles de forma predeterminada en la pestaña Variables de la consola de vista previa.

Ahora, si el userInfo dataLayer.push ocurre después del formSubmission dataLayer.push, el valor de PricingPlan no estará disponible y no será enviado a GA ni a ningún otro lugar. Y ese es uno de los errores más comunes entre los principiantes del GTM: no comprobar si la variable está realmente disponible en el momento en que se dispara una etiqueta).

Si una variable no está disponible en absoluto en la pestaña de Variables, entonces vaya a la pestaña de Capa de Datos y vea si los datos necesarios están allí. Si es así, o bien habilita una variable GTM incorporada adecuada o crea una Variable de Capa de Datos.

En resumen: si quieres usar un dato en particular de la Capa de Datos en tu etiqueta, asegúrate de que esté disponible allí. Si una tecla en particular es presionada en la Capa de Datos sólo después de un clic, entonces definitivamente no estará disponible con el evento de Vista de Página (porque la Vista de Página ocurre antes del clic).

#9. Vigile la pestaña Errores

Esta característica es bastante nueva en el GTM y no se usa demasiado a menudo (al menos según mi experiencia). Pero si notas cualquier número en la pestaña (en lugar de 0), haz clic en él y mira cuál es la causa. Esta pestaña muestra si una plantilla de etiquetas de GTM no se disparó debido a un error.

#10. Compruebe qué valores se enviaron a una herramienta de terceros haciendo clic en una etiqueta

Elija un evento en el flujo de eventos del modo de vista previa y depuración y haga clic en la etiqueta que se disparó en ese evento.

Si es necesario, amplíe la tabla para ver qué configuración tenía esa etiqueta en particular y qué datos se enviaron a una herramienta de terceros (como Google Analytics).

#11. El resumen muestra cuántas veces se disparó cada etiqueta

Esto es útil si planeaste una etiqueta en particular para disparar una sola vez pero, de hecho, se disparó varias veces por múltiples disparadores.

P.D. Puedes evitar que una etiqueta se dispare varias veces en su configuración avanzada. Selecciona Una vez por página.

#12. Ver las condiciones de disparo haciendo clic en una etiqueta

Si desea averiguar por qué se disparó o no se disparó una etiqueta en particular, elija un evento en el flujo de eventos de la consola de vista previa y depuración y haga clic en la etiqueta que se ha disparado (o no).

Desplácese hacia abajo para ver todos los disparos y bloqueos vinculados. Observa más de cerca los iconos. Si un disparador tiene un icono de comprobación verde, significa que este disparador ha activado la etiqueta. También puedes ver los iconos verdes y rojos junto a cada condición de las etiquetas. Si la condición se cumplió, el icono será verde.

Esto te ayuda a identificar las posibles razones por las que una u otra etiqueta se ha disparado (o no).

#13. El modo de vista previa y depuración no muestra todo lo relacionado con las condiciones de disparo

Existe la posibilidad de que tal situación ya le haya ocurrido una vez (o le ocurra en el futuro). Una etiqueta se ha disparado aunque las condiciones de sus disparadores no se hayan cumplido. O al contrario, todas las condiciones se cumplieron pero la etiqueta no se disparó. ¿Por qué suceden estas cosas?

En noviembre de 2023 (y muchos años antes), no todo (relacionado con las condiciones de disparo de la etiqueta) se muestra en el modo de vista previa y depuración. Estoy hablando de las opciones de secuenciación y disparo de etiquetas.

Si configuras una etiqueta para que se dispare antes o después de otra etiqueta (a través de la secuenciación de etiquetas), esto no será visible en la consola de vista previa, en la sección Disparos. Sólo podrá verlo en la interfaz de usuario del GTM si abre una etiqueta en particular y se desplaza hacia abajo hasta la sección Disparos.

De todos modos, como resultado, podrías empezar a pensar que tus etiquetas se están disparando incluso cuando no deberían, pero eso no es cierto. Es que la consola de vista previa no muestra la secuencia de etiquetas (es una solicitud de función aquí mismo).

Hablando de etiquetas que no se disparan aunque deberían, otro ajuste que puede impedirlo es Opciones de disparo de etiquetas. Es posible que hayas configurado una etiqueta para que se dispare sólo una vez por cada carga de la página. Esto significa que una etiqueta (que ya se ha disparado) no se disparará más aunque se cumplan todas las condiciones. Esta configuración se encuentra en las Opciones avanzadas de la etiqueta.

#14. ¿Falta el evento de la vista de página? La Capa de datos está configurada incorrectamente.

Cada vez que una página se carga, al menos 3 eventos de la Capa de Datos son visibles en el modo de Vista Previa y Depuración:

  • Vista de página(gtm.js)
  • DOM Ready(gtm.dom)
  • Ventana cargada(gtm.load)

Y siempre debería ser así. Por lo menos 3. Sin embargo, a veces la Capa de Datos se implementa incorrectamente en un sitio web que causa que el evento de vista de página(gtm.js) se rompa. Esto sucede porque un desarrollador coloca el siguiente fragmento de la Capa de Datos debajo del contenedor del Administrador de Etiquetas de Google:

Por lo tanto, siempre que estés depurando la implementación de Google Tag Manager, vigila si los tres eventos relacionados con la carga de páginas aparecen en el modo de vista previa y de depuración.

¿Una solución para esto? Al menos pide a un desarrollador que coloque el código de la Capa de Datos sobre el contenedor GTM. Pero incluso una mejor opción es usar dataLayer.push en lugar de dataLayer=[]. Entonces la posición del fragmento ya no es tan importante.

Parte II: Depuración del Google Tag Manager con herramientas de navegación incorporadas

Haciendo uso de la funcionalidad estándar del navegador para los desarrolladores.

#15. Revisar la consola de JavaScript del navegador por si hay errores

Ya que estoy usando principalmente Google Chrome para trabajar con el Administrador de Etiquetas de Google, así es como puedes habilitar la consola JS allí. En la esquina superior derecha del navegador, haz clic en tres puntos y luego navega a Más herramientas > Herramientas para desarrolladores.

Aparecerá un panel en la parte inferior de la pantalla (o en la barra lateral, esto depende de tus preferencias). Cambie a consola, haga clic en Borrar consola y actualice la página. Si notas algún error en rojo, consulta con tu desarrollador si es crítico. La variedad de errores es enorme, así que no creas que puedo darte algunos consejos sobre cómo actuar en los casos más habituales.

Si notas que un error se origina en gtm.js, entonces echa un vistazo más profundo (porque ese algo lo causa el Administrador de etiquetas de Google).

Uno de los más comunes es este:

404 no encontrado para GET: GET http://www.googletagmanager.com/gtm.js?id=GTM-XXXXX

#16. Vea la capa de datos introduciendo «dataLayer» en la consola

Incluso si no tienes acceso al contenedor de Google Tag Manager del sitio web y no puedes habilitar el modo de vista previa y depuración, puedes comprobar lo que está pasando en la capa de datos. Esto es muy útil si se le pide que depure rápidamente un problema en particular pero, por alguna razón, no puede obtener acceso al contenedor GTM de inmediato.

Para ello, abra la consola de JavaScript de su navegador y entre en la Capa de Datos. Lo que verás es la lista de toda la información que fue empujada a la Capa de Datos.

Haga clic en el triángulo para expandir la Capa de Datos y luego haga clic en cualquier otro triángulo para expandir esa Capa de datos en particular.

Sin embargo, es muy importante entender que esta Capa de datos no es la misma que los datos que son capturados por el modelo de datos de Google Tag Manager. Lo sé, esto suena confuso, pero si quieres avanzar, tendrás que hacerlo. Si quieres saber el acceso a los valores exactos que Google Tag Manager ve en la Capa de Datos, usa los métodos descritos en el tip #19.

#17. «Tag Fired» ≠ datos fueron enviados correctamente a una herramienta de terceros

Aunque se muestre una etiqueta entre «Despedido» en el modo de vista previa y depuración del GTM, esto no significa que los datos se hayan enviado a otra herramienta (por ejemplo, Google Analytics o Facebook Pixel) como se esperaba.

Es bastante común entre los principiantes asumir que si una etiqueta se ha disparado, el trabajo se hace aquí. Incluso si eso ocurriera, la solicitud podría terminar con un error (404, 502, etc.). O tal vez la solicitud fue enviada correctamente pero los valores de sus variables no estaban definidos.

Entonces, ¿cómo puedes asegurarte de que los datos llegaron a su destino como querías? Hay varias opciones:

  • Reviselos informes en tiempo real si existen en su herramienta de elección.
    • Por ejemplo, en los informes en tiempo real de GA puedes depurar vistas de página, eventos, conversiones. Cuando tu etiqueta se dispara en el modo de vista previa y depuración, ve a comprobar los informes en tiempo real y mira si los datos se muestran realmente aquí. Ten en cuenta que las dimensiones personalizadas, las métricas personalizadas, los datos de comercio electrónico no están disponibles allí.
    • En cuanto al Píxel de Facebook, también puede comprobar sus datos en tiempo real en Facebook Analytics. Vaya a analytics .facebook.com, abra los informes de su Píxel y en la barra lateral izquierda elija Depuración de Eventos. Aquí es donde puedes comprobar qué datos fueron recogidos recientemente por Facebook.
  • Comprueba la pestaña Red en las Herramientas para desarrolladores de tu navegador. En las herramientas para desarrolladores, ve a la pestaña Red para ver la lista de solicitudes que tu navegador ha hecho en esa página. Puedes localizar un tipo específico de solicitud utilizando la función de filtro. Por ejemplo, si estás depurando solicitudes de Píxeles de Facebook, ingresa a facebook.com/tr/ para ver las solicitudes enviadas por Píxeles de Facebook. Si los códigos de estado son 200, esto significa que todo es genial. A veces las redirecciones internas son posibles, así que el código de estado 307 también está bien, siempre y cuando veas que otras solicitudes obtienen el 200 OK.
  • Utiliza ayudantes (extensiones del navegador) adaptados a la depuración de herramientas/plataformas particulares. Profundizaré un poco más en este tema más adelante (en uno de los próximos capítulos de esta entrada de blog). Pero cuando digo «ayudantes», me refiero a Pixel Helper de Facebook, Twitter Pixel helper, GA Debugger, etc.

#18. Comprueba si hay más elementos del sitio web que coincidan con el mismo selector CSS

Si estás rastreando activamente los clics y otras interacciones mediante el uso de ID de elementos, Clases CSS o Coincidencias de los operadores de CSS Selector en GTM, encontrarás este útil. Al emplear atributos y/o operadores de elementos HTML en sus disparadores GTM, la gente suele asumir que esos atributos/Selectores CSS son bastante únicos y se aplican sólo a aquellos elementos que desean rastrear.

Bueno, por lo general no es así como funcionan las cosas.

El problema de este enfoque es que la gente no puede estar 100% segura de que esas clases, IDs, etc. son lo suficientemente únicos como para confiar en ellos. ¿Qué pasa si quieres rastrear los clics de un elemento con una clase CSS btn-bt? ¿Cómo puedes estar seguro de que no estás estableciendo un disparador que causará muchos falsos positivos?

De hecho, hay una posibilidad decente de que haya más elementos en esa página/sitio web con una clase CSS similar. Así que si estás revisando tus informes analíticos y te preguntas por qué hubo un clic rastreado en cierta página (aunque la página no contenga ESE ELEMENTO ESPECIAL), este consejo es para ti.

Vamos a continuar con el ejemplo anterior, la clase CSS btn-bt. Para saber el número de elementos que utilizan esta clase, abre la consola de JavaScript en las herramientas de desarrollo de tu navegador, e introduce el siguiente comando:

document.querySelectorAll("tu_css_selector")

Reemplaza el selector your_css_selector con el selector de CSS actual con el que deseas hacer la prueba. En nuestro caso, el selector es «.red-block».

document.querySelectorAll(".btn-bt")

Presiona enter. Lo que verás es la lista de todos los elementos de una página que usan esta clase. En el ejemplo de abajo, tengo 2 elementos. Puedes saberlo por el número que está al lado del NodeList y si haces clic en el triángulo que está al lado, verás la lista de todos los elementos HTML que usan esa clase btn-bt CSS).

Para hacer uso de este método necesitas poseer al menos algún conocimiento básico de los selectores CSS.

¿Cuántos elementos ves después de lanzar este comando? ¿Es ese el resultado que esperabas? Si no, entonces intenta reducir el selector CSS para elegir el elemento que realmente te interesa.

Los selectores CSS más comunes para principiantes son:

  • .class
  • #id
  • parentElement > directChildElement
  • padreDescendiente del elemento

#19. google_tag_manager[‘GTM-XXXXXX’].dataLayer methods

Si desea acceder a los valores almacenados en el modelo de datos del Google Tag Manager desde fuera del GTM, puede utilizar la interfaz google_tag_manager.

google_tag_manager[‘GTM-XXXX’].dataLayer.set(‘key’, ‘value’) establece el valor de keyName a algúnValue en el modelo de datos del GTM. Esto es el equivalente a usar dataLayer.push({‘key’: ‘value’});

google_tag_manager[‘GTM-XXXX’].dataLayer.get(‘ key’) obtiene el valor almacenado en el modelo de datos del GTM para la clave del nombre de la variable.

google_tag_manager[‘GTM-XXXX’].dataLayer.reset() borra el modelo de datos del GTM y elimina todas las claves almacenadas.

En cuanto a la depuración, la más útil aquí es google_tag_manager[‘GTM-XXXX’].dataLayer.get(‘key’) porque puede averiguar rápidamente cuál debe ser el valor correcto de su variable de la capa de datos (sin necesidad de actualizar constantemente la variable real en la interfaz de usuario del GTM y refrescar el modo de vista previa).

Apuesto a que esto todavía parece confuso para algunos de mis lectores. No se preocupe! Una explicación un poco más visual de esto se puede encontrar en el video de MeasureSchool (comienza a las 1:07) y a las 5:07 aprenderá sobre una de las formas en que puede aplicar esto en la práctica.

¿Demasiados consejos de depuración del Google Tag Manager a la vez? No se preocupe. Sólo tienes que marcar esta guía y volver lo antes posible.

Parte III: Depuración de Google Tag Manager con extensiones del navegador

Un montón de ahorradores de tiempo que harán su trabajo mucho más fácil.

#20. Inyecta tu contenedor de Google Tag Manager con extensiones como Tag Manager Injector o dataLayer Inspector+.

Cuando se crea un nuevo contenedor de Google Tag Manager, un desarrollador debe añadir su código al código fuente del sitio web para que funcione. ¿Pero qué pasa si está ocupado y puede hacerlo sólo después de un par de días? Con las extensiones del inyector, puede emular su contenedor GTM en cualquier sitio web y luego continuar trabajando/configurando el GTM sin ninguna interrupción.

Para simplificar, les demostraré el inyector Tag Manager. Instale la extensión desde el Chrome Store y haga clic en su icono. Ingrese la identificación de su contenedor GTM. Haga clic en Start.

Lo que hace esta extensión es inyectar su contenedor de Google Tag Manager en todas las pestañas del navegador (si desea acotar en qué pestañas debe inyectarse el contenedor, utilice la función Incluir dominios e introduzca sólo los nombres de host a los que realmente desea inyectar el contenedor.

Así que después de habilitar el modo de vista previa y depuración, comenzará a ver el panel de depuración en la parte inferior de la pantalla. Aunque el código del contenedor no sea realmente añadido por un desarrollador al código fuente del sitio web, puedes depurar y configurar con éxito tus etiquetas, activadores y variables.

Una vez que el desarrollador implementa el código contenedor, la configuración del GTM ya estará lista.

Otra situación en la que lo uso es cuando alguien pide ayuda para depurar un problema en particular. Simplemente inyecto mi propio contenedor GTM y hago las configuraciones necesarias para replicar el problema y resolverlo.

Tengan en cuenta:

  • Usando el Tag Manager Injector, dataLayer Inspector+ o cualquier otra extensión de inyección funcionará sólo dentro de los límites de su navegador. Cálmate, no estás hackeando el sitio web real. Sólo estás jugando en tu caja de arena.
  • Si ya hay algún contenedor GTM añadido directamente en un sitio web y has inyectado tu propio contenedor, NO VERÁS el contenido del contenedor original. Estoy hablando de etiquetas, disparadores, variables, su configuración. Por otro lado, podrás ver lo que hay en la capa de datos. Pero eso es todo.

#21. inspector de la Capa de Datos+

AnalyticsPros ha creado una increíble extensión de navegador que puede ser usada como una navaja suiza en la depuración y pruebas del Google Tag Manager. No sólo puede inyectar tu contenedor GTM, sino que también hay otras ventajas a tu disposición.

Por nombrar algunas de las muchas características impresionantes (y muy útiles):

  • Peticionesvisibles a Google Analytics en la consola de JavaScript del navegador.
  • Identificación de aciertos duplicados de GoogleAnalytics. Útil si no quieres alterar tu tasa de rebote.
  • Cronometraje. Puedes marcar la casilla para ver cuánto tiempo tarda el GTM en procesar un hit desde el push de dataLayer hasta el eventCallback.
  • Validaciones (por ejemplo, las teclas que faltan en un objeto de comercio electrónico.
  • Ya lo he mencionado: Los datos de la Capa de Datos se conservan a lo largo de varias páginas (ver consejo #6).
  • Otra característica útil se convirtió en un consejo aparte en esta entrada del blog. Continúe leyendo.

#22. Bloquear los contenedores GTM ya existentes para inyectar los suyos propios. Fresco y limpio.

Este consejo está relacionado con el ya mencionado DataLayer Inspector+. No quería que se mezclara con una simple mención de la extensión, así que lo creé como una punta separada.

Esta es la situación. Alguien te pide ayuda para depurar una interacción con el GTM en un sitio web en particular, que ya tiene su propio contenedor de Google Tag Manager. Por alguna razón, no puedes acceder rápidamente al contenedor original, así que decidiste inyectar el tuyo propio (con fines de prueba).

A pesar de que no puede ver en su vista previa y el modo de depuración el contenido del contenedor original, usted todavía es capaz de monitorear lo que está sucediendo en la capa de datos y jugar con el sitio web en sí.

El contenedor original está usando activamente la Capa de datos y sigue empujando algunos datos que están jugando con su contenedor. Esto hace que la depuración sea incómoda, ya que estás viendo eventos que no deberían verse en tu contenedor.

¿Cuál es la solución? Podrías bloquear temporalmente el script del contenedor original para que no interfiera con tus esfuerzos de depuración. Afortunadamente, dataLayer Inspector+ ofrece una función muy útil llamada Bloquear e Intercambiar Script.

Abra dataLayer Inspector+ > Inspeccionar > Opciones avanzadas > Bloquear y cambiar el script y pegue el ID del antiguo contenedor del GTM.

El plugin buscará todos los scripts de una página que contengan esa cadena (el ID de su contenedor GTM) y los bloqueará.

De esta manera, el contenedor original no se meterá con tu depuración. Una vez más, esto está sucediendo sólo dentro de los límites de su navegador, por lo tanto, no está afectando a otros visitantes.

#23. Herramientas Da Vinci

Otra navaja suiza que se ha convertido en la predeterminada en mi pila de Google Tag Manager es la Da Vinci Tools de Stéphane Hamel. Es una extensión de Chrome muy práctica y ordenada que ajusta y añade útiles mejoras a la interfaz de Google Tag Manager (¡también a GA y a Data Studio!).

Aquí están mis características favoritas relacionadas con la depuración:

  • Capacidad de copiar los datos de la pestaña de la capa de datos en el modo de vista previa y depuración del GTM. ¿Has notado que, por defecto, es imposible copiar nada de la pestaña de Capa de Datos del modo de Vista Previa? Bueno, ya no. Da Vinci te cubrió. Después de instalar el plugin, la opción de Copiar volverá!
  • Tidy GTM Preview (por ejemplo, los bloques de etiquetas están enriquecidos con iconos)
  • Recuerda si el panel de vista previa y depuración se minimiza (y lo mantiene así después de actualizar la página)
  • Salir del modo de vista previa y depuración directamente del panel de depuración

Además, he visto a Stéphane mencionando en alguna parte que, a largo plazo, planea añadir características de depuración similares a la extensión WASP, que (¡sorpresa!) también fue desarrollada por él.

#24. Depurador GA

Esta extensión es útil si quieres profundizar en los datos que se pasaron a Google Analytics. Una vez instalada y activada, habilita el modo de depuración de GA que comienza a mostrar los datos en la consola de JavaScript del navegador (entre otras herramientas de desarrollo).

Para activarlo, simplemente haz clic en el icono de la extensión y verás la insignia ON. Esto indica que el modo de depuración de GA está habilitado y puedes empezar a comprobar los datos.

Una vez que la extensión esté habilitada, abre la consola JavaScript del navegador y actualiza la página. Empezarás a ver todas las solicitudes que se enviaron a GA.

Aunque la información pueda parecer un poco demasiado técnica, definitivamente vale la pena comprobarlo ya que muestra (más o menos) claramente todos los parámetros que se pasaron a Google Analytics. Cada acierto de GA (por ejemplo, vista de página, evento, etc.) es visible como una tabla separada con todos los parámetros y sus valores.

Por defecto, la consola del navegador se borra cada vez que la página se recarga. Así que si quieres preservar lo que fue capturado, habilita la opción Preservar registro :

#25. Configuración del modo de depuración GA en GTM

Aunque este consejo probablemente debería haber sido mencionado en uno de los otros capítulos de este post, pensé que sería más apropiado mencionarlo justo después de presentar la extensión del Depurador GA.

Como alternativa a GA Debugger, también puedes ver los datos de la carga útil de GA en la consola con sólo activar la siguiente configuración en la variable de configuración de GA que está siendo utilizada por tu etiqueta de Google Analytics.

Una vez habilitada, mostrará los mismos datos que con la extensión GA Debugger.

Para que estos datos sean visibles sólo cuando haya habilitado el modo de vista previa y depuración de GTM, habilite la variable incorporada denominada Debug Mode. Devuelve true si estás actualmente en el modo Preview y Debug.

Esa variable entonces debe ser insertada en el campo Debug Mode de su Variable de Configuración de Google Analytics o etiquetas GA.

Por lo tanto, mientras estés en el modo de vista previa del GTM, el modo de depuración GA también estará habilitado. Y cuando salgas del modo de vista previa, la variable del modo de depuración devolverá false, por lo que los datos GA dejarán de registrarse en la consola del navegador. Bonito y limpio.

#26. Usar las grabaciones del Asistente de Etiquetas para depurar la implementación de Google Analytics

Lo primero es lo primero, el asistente de etiquetas de Google es una extensión de Chrome que te ayuda a validar el código de seguimiento de tu sitio web y a solucionar problemas comunes y hace que todo el proceso sea mucho más fácil y rápido. Te permite registrar un flujo de usuarios típico, lleva un registro de todas las visitas que envías, comprueba si hay problemas y te proporciona un informe completo de las interacciones. En caso de cualquier problema o mejora potencial, te hará saber sobre ellos.

De forma predeterminada, el Asistente de etiquetas está en el «modo de espera», lo que significa que no comprueba nada de lo que ocurre en una página. Para activarlo, haz clic en el icono de la etiqueta azul y luego en Activar.

Ahora actualiza la página. Si alguno de los productos de Google se implementa en esa página, empezarás a ver un número concreto dentro de ese icono de etiqueta azul que representa el recuento de etiquetas encontradas.

Una función muy útil, aunque a menudo poco utilizada, son las grabaciones de sesión. La grabación de un flujo produce un informe de todos los aciertos que se enviaron a través de las etiquetas de marketing. Esto le permite validar que una etiqueta de seguimiento particular en su sitio funciona como se espera.

Por ejemplo, si usted es dueño de un sitio de comercio electrónico, podría recorrer las páginas y los pasos necesarios para seleccionar un artículo, hacer el pedido y enviar el pago. Después de que la grabación se haya completado, puede revisar todos los eventos/visitas de página/etc. que se pasaron y ver qué datos particulares se enviaron, qué errores ocurrieron, dónde sucedieron, etc.

Para empezar a grabar un flujo, haga clic en el icono del asistente de etiquetas y luego en el botón GRABAR.

La grabación real comenzará después de que actualices la página. Durante toda la sesión, un punto rojo se adjuntará al icono de la etiqueta azul. Para detener la grabación, haz clic en el icono, en el botón rojo DETENER GRABACIÓN y aparecerá el resumen de la sesión. Haga clic en Mostrar informe completo.

Este informe le dará más información sobre lo que sucedió durante esa sesión de grabación. Hay dos tipos de informes a su disposición:

  1. Informe del Asistente de Etiquetas.
  2. Y el Informe de Google Analytics.

El informe del Asistente de etiquetas muestra todas las etiquetas que se dispararon en todas las páginas que visitó durante la sesión de grabación. Los controles del panel izquierdo le permiten hacer lo siguiente:

  • Filtrar etiquetas
  • Cambiar entre vistas detalladas y básicas
  • Mostrar/ocultar peticiones ignoradas.

El cuerpo principal de la página contiene el resumen de la grabación (de lo que ocurrió durante la sesión) y las páginas grabadas. Haga clic en cada página para ampliar sus detalles y las etiquetas que se dispararon. Tenga en cuenta que estas etiquetas están ordenadas alfabéticamente (y no en su secuencia).

El segundo informe (Informe de Google Analytics) mostrará una emulación de cómo Google Analytics procesará los aciertos. La pestaña reconocerá el ID de la cuenta de este sitio y le permitirá ver el informe completo (si tiene acceso a esa cuenta).

En él, verás múltiples puntos de datos recopilados por Google Analytics, incluidos los datos de adquisición, los datos de comportamiento y los datos de conversión. Si notas algún problema en el informe que deba ser solucionado en la cuenta de GA (por ejemplo, que hayas tenido que configurar una lista de exclusión de referencias del seguimiento entre dominios en tu cuenta de Google Analytics), no dudes en hacerlo.

Después de que hayas terminado, sólo tienes que volver al informe del Administrador de etiquetas de Google y pulsar el botón Actualizar informe en la esquina superior izquierda. El plugin comprobará toda la sesión de grabación con la nueva configuración de las propiedades de GA y te hará saber si el problema se ha solucionado. ¡Eso es un verdadero ahorro de tiempo!

#27. La implementación no estándar de Google Analytics no es un problema

Así que implementa las etiquetas de Google Analytics a través de Google Tag Manager, abre el asistente de etiquetas y ve que el color de la etiqueta GA es azul, no verde. Haz clic en él y obtendrás un mensaje «Implementación no estándar» en la sección «¿Dónde optimizar?».

No hay nada de qué preocuparse. Resulta que el Asistente de Etiquetas siempre muestra la implementación de GA como No estándar si se agregó a través de GTM.

Caso cerrado.

#28. Depurador del Google Tag Manager

Otra asombrosa extensión del cromo relacionada con el GTM, esta vez desarrollada por David Vallejo. Añade una pestaña adicional a las herramientas de desarrollo de tu navegador Chrome que facilita el proceso de depuración del Google Tag Manager.

En primer lugar, la extensión muestra claramente (de manera bastante legible) los datos que fueron empujados a la Capa de Datos y los datos actuales que están almacenados allí. Si quieres copiar la Capa de datos (por ejemplo, para enviar el fragmento a un desarrollador (para informar de un error)), puedes hacerlo con un par de clics.

Si los datos de comercio electrónico mejorados fueron enviados a Google Analytics, se activará una pestaña adicional dentro de la interfaz del plugin. Muestra todos los pasos de comercio electrónico completados en el orden exacto en que se produjeron. Cada paso puede ser expandido y verificado con mayor detalle. Si el número de productos es demasiado abrumador, no dude en utilizar el campo de búsqueda.

Y si el sitio web (en el que estás trabajando) registra MUCHAS interacciones, puede ser una buena idea filtrarlas y rastrear sólo determinados tipos de coincidencias de GA.

En este momento, David está actualizando/mejorando activamente la extensión, por lo que estoy seguro de que encontrarás algunas nuevas características allí muy pronto. Todavía me sorprendo a mí mismo descubriendo algo nuevo (y agradable/conveniente) allí.

#29. Usar helpers/plugins de depuración adaptados a herramientas específicas

Me refiero a Facebook Pixel Helper, Twitter Helper, y otros plugins similares adaptados a herramientas específicas. Estas extensiones del navegador permiten depurar fácilmente qué tipo de datos se pasaron a herramientas de terceros y si esos datos fueron formateados correctamente.

Por ejemplo, una vez que instalas el Ayudante de Píxeles de Facebook y cargas una página donde el píxel está presente, notarás que el icono de esa extensión se ha activado.

Haz clic en él para ver la vista detallada de lo que fue capturado y lo que fue transferido a los servidores de Facebook.

Si hay problemas de rastreo, la extensión lo mostrará de forma legible. Una vez que solucione el problema, actualice el modo de vista previa y depuración. luego la página y vuelva a visitar el informe del plugin una vez más para comprobar si eso ayudó.

Parte IV: Otros consejos de depuración de GTM/GA

Todo lo demás que no pude encontrar un lugar para hacerlo.

#30. ¿No ves los datos en los informes en tiempo real del GA? Hay varias razones posibles

Así que estás depurando la implementación de Google Analytics, comprobando los informes en tiempo real pero, por alguna razón, no puedes ver los datos que llegan. ¿Por qué?

  • Existe la posibilidad de que tú (o alguien más) haya insertado la variable de configuración de GA en el campo de identificación de seguimiento de GA (lo cual no debería)
  • Los filtros GA están involucrados (la mayoría de las veces los filtros relacionados con la IP son los culpables)
  • Olvidó borrar los filtros rápidos en los informes en tiempo real
  • Se habilita una extensión de exclusión en su navegador
  • Los eventos se fijan en un golpe de no-interacción: cierto. Tales eventos son visibles sólo si se cambia a la opción «Últimos 30 minutos» en sus informes de eventos en tiempo real
  • Las extensiones relacionadas con la privacidad (como Ghostery) están bloqueando sus rastreadores GA o GTM
  • Estás enviando datos a la propiedad GA equivocada
  • Estás comprobando la vista del ID de usuario en GA pero no pasas el ID de usuario real con los eventos/páginas vistas a GA
  • ¿Quizás GA no está instalado en una página en absoluto?

#31. No todas las interacciones de GA son visibles en los informes en tiempo real

Los informes en tiempo real muestran las interacciones más comunes, las visitas a las páginas y los eventos. Desafortunadamente, si deseas ver datos de comercio electrónico, interacciones sociales, golpes de tiempo en GA, tendrás que esperar a que aparezcan en nuestros informes reales.

Así que si deseas depurarlos de antemano, necesitarás usar las extensiones del navegador o el modo de depuración de GA para ver qué datos se pasaron a GA y si se formatearon correctamente. Pero para comprobar si los datos han llegado realmente a su destino, no tienes otra opción que esperar.

#32. Es posible probar la implementación del GTM (web) en un dispositivo móvil

Si quieres comprobar lo que ocurre en el modo de vista previa y depuración mientras estás en un dispositivo móvil, sólo tienes que activar el modo P&D en tu escritorio/portátil, hacer clic en Compartir vista previa y copiar el enlace generado (no olvides introducir la URL de destino para facilitar el acceso).

Envíe el enlace de esa vista previa compartida a un chat/correo electrónico/lo que sea para que pueda abrirlo a través de un dispositivo móvil.

Eso es todo! Ahora verás el modo de vista previa y depuración.

Por supuesto, no será la experiencia más agradable, pero aún así es posible trabajar. Consejo profesional: considera la posibilidad de habilitar la vista de escritorio en el navegador de tu móvil para ver más de la consola de depuración.

Para salir del modo de depuración, vuelva a visitar el enlace de vista previa compartida y haga clic en Salir.

Actualización: Jean (en los comentarios de esta entrada de blog) también sugirió una solución alternativa: Es posible probar la implementación de GTM (web) en un dispositivo móvil Simplemente puede activar el modo de dispositivo de conmutación en la consola de Chrome Dev o Ctrl + Shift + M (mientras la consola está abierta). Lo uso para comprobar que mis etiquetas se disparan sólo en un móvil.

Depuración del Administrador de etiquetas de Google: Palabras finales

¡Uf! ¡Esa fue una larga! Como puedes ver hay muchas cosas que saber y/o probar cuando se trata de depurar el Google Tag Manager. Aunque algunos de estos consejos están relacionados puramente con Google Analytics, GA es la herramienta de terceros más común que se está configurando dentro de GTM. Así que supongo que es justo.

De todos modos, la clave aquí (especialmente para los principiantes) debería ser que la depuración del GTM no sólo consiste en comprobar si una etiqueta se ha disparado. Eso es sólo el comienzo. También tienes que asegurarte de eso:

  1. Los datos/peticiones fueron enviados exitosamente (por ejemplo, a través de la pestaña de Red o alguna extensión del navegador)
  2. Y se muestra correctamente en la herramienta de terceros (por ejemplo, Facebook Pixel, Google Analytics, etc.)

Y también hay un montón de diferentes herramientas de prueba/depuración que puedes elegir. Así que elige las que encuentres más adecuadas/convenientes ¡ve a cazar esos bichos!

La lista de estos consejos está definitivamente lejos de ser completa. Así que siempre que recuerde algo más (que sea útil) o si tiene algunos trucos de depuración de GTM bajo la manga, siéntase libre de compartirlo en los comentarios y probablemente lo agregaré a la guía.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies
Política de Privacidad · Aviso Legal · Política de Cookies · Contacto
Copyright © 2021 - funneldeventa.com <