Actualizado en octubre de 2023
¿Está Google Tag Manager ralentizando su sitio? GTM es útil para fines de seguimiento de código, pero no si está haciendo su sitio web lento.
Si no está familiarizado con las mejores prácticas de optimización del rendimiento de GTM, puede afectar negativamente al rendimiento de su página.
En este artículo, compartiré nueve consejos para optimizar la configuración de GTM y mejorar la velocidad de tu sitio web, garantizando una experiencia de usuario fluida y eficiente. También cubriré los errores comunes que debes evitar.
👉 Para un repaso sobre la configuración de etiquetas, disparadores, eventos y variables (macros) en GTM, haz clic aquí para saltar hasta el final. 👈
9 Consejos GTM para una mayor velocidad del sitio
No hace falta que le digamos que la velocidad de un sitio web es fundamental para ofrecer una experiencia de usuario óptima y mejorar la clasificación en los motores de búsqueda. Google Tag Manager ofrece una gran cantidad de funciones que se pueden aprovechar para mejorar el rendimiento del sitio web.
Repasemos 9 consejos esenciales de optimización de GTM que pueden reducir significativamente los tiempos de carga y hacer que su sitio funcione de forma más eficiente.
1) Minimizar el número de etiquetas
Uno de los factores clave para mejorar la velocidad del sitio web con Google Tag Manager es minimizar el número de etiquetas. Cada etiqueta añadida a su sitio incluye su propio código y recursos, lo que puede contribuir a aumentar los tiempos de carga de la página.
Si revisa detenidamente su inventario de etiquetas y elimina las que sean innecesarias o redundantes, podrá reducir significativamente el peso total de su sitio web y mejorar su velocidad.
Para minimizar el número de etiquetas:
- Comience por realizar una auditoría exhaustiva de su contenedor GTM.
- Identifique las etiquetas que ya no sean necesarias o que sirvan para fines redundantes.
- Considere si alguna etiqueta puede consolidarse o combinarse en una sola etiqueta para reducir el número de solicitudes de red.
Al racionalizar la implementación de etiquetas y mantener sólo las esenciales, puede crear una configuración GTM sencilla y eficiente que optimice el rendimiento del sitio web. Recuerda, menos etiquetas significan tiempos de carga más rápidos y una experiencia de usuario más fluida.
Contenido relacionado: Por qué comercializar vídeos en tu página de inicio puede no ser acertado
2) Optimizar los disparadores de etiquetas
En Google Tag Manager, la etiqueta se activa en función de un evento personalizado, como la carga de la página u otros comportamientos del usuario, como los clics en determinados elementos. Revisar y optimizar la forma en que se disparan las etiquetas es importante para asegurarse de que están configuradas de manera eficiente.
Algunos de los principales tipos de activadores son:
- Activadores de vista de página
- Activadores de clics
- Activadores de eventos personalizados
- Activadores de cambios en el historial
- Activadores de errores de JavaScript
Opciones de disparo de etiquetas
Puede encontrar las opciones de activación de etiquetas en la Configuración avanzada de cualquier definición de etiqueta dentro de un contenedor web.
Estas son las tres opciones de activación de etiquetas:
- Ilimitado: Esta opción se utiliza junto con la secuencia de etiquetas. Las etiquetas se disparan siempre que los disparadores lo indiquen, sin ninguna limitación.
- Una vez por evento: Con esta opción, la etiqueta se dispara una sola vez cuando se produce un evento específico.
- Una vezpor página: Con esta opción, la etiqueta se disparará sólo una vez cuando se cargue la página.
Creación de un activador
Puede crear un disparador GTM siguiendo los siguientes pasos:
- Haga clic en Etiquetas > Nuevo.
- Haga clic en Configuración del activador.
- Seleccione el tipo de activador que desea crear.
- Complete la configuración del activador seleccionado.
3) Utilizar la secuencia de etiquetas
Algunas etiquetas que dependen unas de otras pueden afectar a la velocidad de su sitio web si no se secuencian correctamente.
La buena noticia es que GTM proporciona una práctica función de secuenciación de etiquetas que le permite controlar el orden en que se ejecutan estas etiquetas dependientes.
Con la secuenciación de etiquetas, puedes disparar etiquetas inmediatamente antes o después de una etiqueta “principal” designada. Esta funcionalidad está disponible en los contenedores web y puede aplicarse a cualquier configuración de etiquetas desde Configuración avanzada > Opciones de secuenciación de etiquetas.
4) Habilitar variables incorporadas
Google Tag Manager ofrece una serie de variables integradas que proporcionan datos valiosos sin necesidad de etiquetas adicionales. Estas variables le permiten acceder a información importante sobre el contexto de navegación del usuario y el propio sitio web.
Por ejemplo, la variable {{Page URL}} proporciona la URL de la página que se está viendo en ese momento. Esto puede ser útil para rastrear el comportamiento del usuario o para pasar la URL de la página como parámetro a otras etiquetas.
Del mismo modo, la variable {{Referrer}} captura la URL de la fuente de referencia, que indica la página o fuente anterior que dirigió al usuario a la página actual.
Por ejemplo, si desea realizar un seguimiento de la URL de la página y pasarla como parámetro a una etiqueta específica, en lugar de extraerla manualmente mediante bibliotecas JavaScript, puede utilizar la variable incorporada {{Page URL}} proporcionada por GTM.
El uso de la variable incorporada {{Page URL}} elimina la necesidad de escribir código JavaScript para extraer manualmente la URL de la página.
Debe utilizar estas variables siempre que sea posible, ya que eliminan la necesidad de etiquetas adicionales, reduciendo el número total en su sitio web.
5) Aplicar la política de seguridad de contenidos (CSP)
La Política de Seguridad de Contenidos es un mecanismo de seguridad implementado en los servidores web para proteger los sitios web de diversas amenazas de seguridad.
Mediante la implementación de una CSP bien definida, se establece una barrera sólida que impide la carga de scripts innecesarios de terceros en su sitio web. Esto mejora la seguridad de su sitio web y puede tener un impacto positivo en el rendimiento.
Al reducir el riesgo de scripts externos maliciosos y código no autorizado, su sitio web puede funcionar con mayor eficacia, lo que se traduce en una mayor velocidad y una experiencia de navegación más segura para el usuario.
Contenido relacionado: Cómo una seguridad deficiente del sitio web afecta negativamente a las clasificaciones SEO
6) Evite las manipulaciones pesadas del DOM (como solución a largo plazo)
La manipulación del DOM implica realizar cambios en la estructura o el contenido de una página web mediante JavaScript. Aunque puede ser útil en ciertas funcionalidades dinámicas, una manipulación excesiva puede causar retrasos en la renderización y afectar al rendimiento general del sitio web.
Considere la posibilidad de utilizar métodos alternativos para lograr el mismo objetivo. Esto podría implicar utilizar otras funciones nativas del navegador o trabajar con el equipo de desarrollo para encontrar soluciones optimizadas.
Colaborar con el equipo de desarrollo es muy útil para aplicar estrategias a largo plazo que mejoren la velocidad del sitio web. Pueden ayudar a identificar las áreas en las que se manipula mucho el DOM y sugerir técnicas alternativas u optimizaciones.
7) Explore el etiquetado del lado del servidor con Google Tag Manager
Considere la posibilidad de implementar el etiquetado del lado del servidor con Google Tag Manager, especialmente para las etiquetas que no requieren la ejecución del lado del cliente. Esta implementación puede tener un impacto positivo sustancial en el rendimiento del sitio web.
La siguiente figura muestra el funcionamiento del seguimiento del lado del servidor con GTM:
Esto descarga el procesamiento de etiquetas del dispositivo del usuario a un servidor, que tiene más recursos y puede manejar las tareas de manera más eficiente. El sitio web puede cargarse más rápido al minimizar la cantidad de código JavaScript que se ejecuta en el lado del cliente, lo que mejora el rendimiento.
Cuando se decide implantar el etiquetado del lado del servidor con GTM, es esencial identificar las etiquetas que no dependen de la interacción del lado del cliente ni de datos específicos del usuario. Estas etiquetas, como las relacionadas con análisis internos o eventos del lado del servidor, pueden transferirse sin problemas al lado del servidor.
8) Mantenga siempre el contenedor de Google Tag Manager limpio
Las etiquetas, variables o activadores no utilizados que permanecen en el contenedor de GTM contribuyen a un procesamiento innecesario y pueden ralentizar su sitio web. Si dedica un tiempo a revisar su contenedor con regularidad, podrá identificar y eliminar estos componentes innecesarios. Este mantenimiento garantiza que sólo estén presentes los elementos esenciales, agilizando el funcionamiento general de la configuración de GTM.
El mantenimiento regular de su cuenta GTM debe ser una práctica continua. Reserva tiempo periódicamente para evaluar y limpiar cualquier elemento redundante o que no utilices. Este enfoque proactivo ayuda a garantizar que la implementación de GTM siga siendo eficiente, actualizada y alineada con las necesidades de tu sitio web.
9) Utilice un proxy de caché para cargar GTM
El uso de un proxy de almacenamiento en caché para cargar Google Tag Manager implica la utilización de un mecanismo de almacenamiento en caché del lado del servidor para mejorar la entrega y la carga de los recursos de GTM en un sitio web. Cuando un usuario visita una página web con GTM implementado, su navegador envía una solicitud para obtener el contenedor GTM y sus secuencias de comandos asociadas desde el servidor.
Sin embargo, este proceso puede introducir latencia y afectar a los tiempos iniciales de carga de la página, especialmente si el servidor está geográficamente alejado o experimenta un tráfico elevado.
Para mitigar estos problemas, se puede implementar un proxy de almacenamiento en caché entre el navegador del usuario y el servidor GTM. El proxy de caché actúa como intermediario, interceptando las solicitudes de recursos GTM y sirviendo versiones en caché de esos recursos en lugar de obtenerlos cada vez del servidor GTM.
Contenido relacionado: Estrategias de Google Ads que aumentarán las conversiones y mejorarán tu ROI
Consejos para optimizar el rendimiento de Google Tag Manager
Aquí tienes una tabla rápida con todos los consejos de optimización de GTM que cubrimos aquí:
3 Errores a evitar para limitar el impacto de GTM en el rendimiento de la velocidad de página
A pesar de lo útil y eficaz que puede ser Google Tag Manager, no es raro que los recién llegados a la plataforma se dejen llevar y lo utilicen de tal forma que afecte negativamente al rendimiento de su sitio web.
Para evitar que esto te ocurra, a continuación te mostramos algunos de los errores más comunes que cometen los usuarios de Tag Manager y que deberías evitar:
1) Uso excesivo de etiquetas
Cuantas más etiquetas añada, más probabilidades tendrá de encontrar problemas de rendimiento en su sitio web.
Para evitar la saturación y los tiempos de carga lentos, considere cuidadosamente su uso de etiquetas. Dé prioridad a las etiquetas esenciales que más se ajusten a sus metas y objetivos y elimine las que ya no sean relevantes.
2) Carga sincrónica
Una de las principales causas de los problemas de rendimiento de Google Tag Manager es el uso de la carga sincrónica.
Permitir que las etiquetas se carguen de forma sincrónica, una tras otra, supone una carga para los recursos del servidor, lo que a menudo se traduce en un aumento significativo del tiempo de carga de la página.
Por eso es tan importante cargar las etiquetas de forma asíncrona siempre que sea posible. De este modo, varios recursos pueden cargarse simultáneamente, lo que significa que la página tarda menos tiempo en cargarse por completo.
3) Falta de pruebas
No probar a fondo las etiquetas y su implementación puede dar lugar a errores que ralenticen su sitio web o afecten negativamente a la experiencia del usuario.
Por lo tanto, vale la pena implementar pruebas rigurosas y un proceso de depuración para detectar y corregir cualquier problema de rendimiento causado por las etiquetas.
Repaso: Configuración de etiquetas, disparadores, eventos y macros
Para aquellos de ustedes que son nuevos en GTM y les gustaría un repaso, he aquí un rápido desglose de la configuración de etiquetas, disparadores, etc.
1) ¿Qué son las etiquetas en Google Tag Manager?
Las etiquetas de Google son pequeños fragmentos de código que facilitan la adición de etiquetas de seguimiento de conversiones, análisis, remarketing y mucho más. Estas etiquetas no sólo se utilizan para productos de Google como Google Analytics y Search Console, sino también para herramientas de terceros como Facebook Pixel.
Este es un ejemplo de una etiqueta que utilizamos para rastrear quién hace clic en nuestra página de “Servicios” para nuestra agencia de marketing digital:
Cómo configurar una etiqueta
Para configurar una etiqueta, inicie sesión en Tag Manager, asegúrese de que se encuentra en el panel Información general y haga clic en Nueva etiqueta:
A continuación, sustituya Etiqueta sin título por el nombre fácilmente identificable de su nueva etiqueta:
A continuación, haga clic en la pestaña Configuración de etiquetas para elegir el tipo de etiqueta que desea utilizar:
Para simplificar las cosas, vamos a configurar una etiqueta de Google Analytics, aunque hay docenas de opciones para elegir y, si no ves la etiqueta que necesitas en la lista, siempre puedes crear una utilizando la etiqueta HTML personalizada:
Existen varias etiquetas de análisis que podemos utilizar. Para este tutorial, seleccionaremos ‘Evento GA4’.
Esto abre la ventana de configuración de la etiqueta, donde su primera tarea es añadir el ID de seguimiento correspondiente en el campo ID de medición:
A continuación, especifique un Nombre de evento:
Para mejorar los resultados, puede hacer clic en el icono situado junto a este campo para que aparezca una lista de nombres de etiqueta preestablecidos. Simplemente haga clic en el que desee seleccionar:
Una vez hecho esto, haz clic en la pestaña Activación:
A continuación, seleccione Todas las páginas:
Por último, pulse Guardar y ¡voilá! Acabas de crear tu primera etiqueta.
Esta es una implementación muy simple de una etiqueta. Sin duda puede añadir complejidades más adelante para lo que usted está tratando de hacer.
Mira este video para empezar con etiquetas personalizadas en GTM:
2) ¿Qué son los disparadores en Google Tag Manager?
Los disparadores determinarán si una etiqueta se dispara o no. En pocas palabras, son “reglas”. Este es el aspecto de uno de nuestros desencadenantes. Para los Triggers, existe la opción de seleccionar diferentes eventos. En nuestro caso, elegimos buscar a las personas que hacen clic en un texto específico (“Marketing de contenidos”):
Cómo configurar un activador
Una vez más, asegúrese de que ha iniciado sesión en Tag Manager y en el panel de información general y, a continuación, en la barra lateral izquierda, haga clic en Activadores.
Para este ejemplo, vamos a rastrear a alguien que hizo clic en un enlace específico, así que seleccione Clic:
Seleccionar sólo enlaces en Objetivos, anule la selección de “Esperar etiquetas” y “Comprobar validación” y, a continuación, pulse Continuar:
En la sección Activar, seleccione Algunos clics y seleccione Texto del clic:
Introduzca un texto ficticio por ahora y guarde el Activador. Volveremos a él en un segundo.
Ahora es el momento de ver qué aspecto tiene el “Texto del clic”. Primero, necesitamos pulsar el menú desplegable del botón Publicar cerca de la esquina superior derecha de la pantalla. Luego seleccionaremos el modo Vista Previa y Depuración:
Aquí tienes una explicación detallada sobre cómo usar la Consola de Depuración:
3) ¿Qué son los eventos en Google Tag Manager?
Un evento es una acción. Por ejemplo, si alguien hace clic en su número de teléfono, puede etiquetarlo como evento y hacer que se active en Google Analytics. De este modo, podrá medir sistemáticamente las acciones que considere importantes.
Cómo configurar un evento:
Una vez más, ve a Disparadores en la parte izquierda del panel de información general en GTM.
Haga clic en el botón rojo Nuevo.
A continuación, seleccione Evento personalizado:
Para este evento, estamos tratando de rastrear a todas las personas que terminaron en nuestra “Página de Agradecimiento”. Usamos la consola “Preview & Debug” para encontrar un evento específico y obtuvimos el siguiente resultado:
Después de guardar este activador, iré a Etiquetas y crearé una etiqueta específica para el seguimiento de una conversión de Facebook en esta página:
¿Qué son las variables en Google Tag Manager?
A medida que continúe añadiendo a GTM, irá añadiendo tareas repetitivas. ¿Qué pasaría si tuviera la posibilidad de crear accesos directos para estas tareas? Eso es lo que son las variables.
Nota: Las variables solían llamarse“Macros“.
Esto es un poco más detallado, por lo que le señalaremos un gran video explicativo:
¿Cuáles son algunos casos prácticos de uso de GTM?
Algunos de los casos prácticos de uso de GTM incluyen:
- Consolidación de todas sus etiquetas web (como análisis y seguimiento de conversiones)
- Seguimiento de eventos en secciones específicas de su sitio web (como números de teléfono o rellenar un formulario de clientes potenciales)
- Seguimiento dedimensiones multicanal (múltiples fuentes desde las que procede un usuario)
- Seguimiento decomportamientos específicos de los usuarios (como el tiempo de permanencia en la página, la profundidad de desplazamiento o el porcentaje de clics).
- Seguimiento de eventos de comercio electrónico (como vistas de productos, añadir al carrito, pago)
- Seguimiento de la eficacia de sus campañas de marketing (de diversas fuentes, como la búsqueda de pago, las redes sociales o el marketing por correo electrónico).
- Personalización de la experiencia del usuario (en función de su ubicación, intereses u otros factores).
- Seguimiento de formularios de origen de clientes potenciales (por ejemplo, un usuario que procede de un anuncio de pago y luego ha rellenado un formulario de contacto).
- Filtrar el tráfico interno (por ejemplo, excluyendo las visitas procedentes de las direcciones IP de su propia organización).
- Eliminación del spam de referencia (bloqueo o filtrado del tráfico de referencia falso)
- Seguimiento de vídeos de YouTube (interacciones del usuario como reproducción, pausa o duración de la visualización)
Bonificación: Asistente de etiquetas de Google
Google tiene una extensión del navegador llamada Google Tag Assistant que permite a los usuarios ver las etiquetas específicas que se encuentran en cada página. Esto ayuda con las pruebas/implementación.
Para una formación más detallada sobre la configuración de Google Tag Manager, recomiendo encarecidamente ver los vídeos de GTM Training en YouTube.
Última palabra sobre Google Tag Manager y el rendimiento del sitio web
Google Tag Manager ofrece una solución práctica para gestionar varias etiquetas y códigos de seguimiento, pero la optimización de su implementación es crucial para maximizar el rendimiento del sitio web. Tómese el tiempo necesario para ajustar la configuración de GTM y obtenga los beneficios de un sitio web más rápido y eficaz.
Si estálisto para optimizar su configuración de GTM, los expertosde Google Tag Managerde Single Grain pueden ayudarle.
Contenido adicional aportado por David Borgogni.
Google Tag Manager Performance Optimization FAQs
-
Does GTM Slow Down My Website?
Google Tag Manager does not inherently slow down your website. However, if improperly configured or too many tags are added, it can impact your website’s performance.
-
How Can I Improve the Page Speed of My Website?
Start by using fewer tags in Google Tag Manager and optimizing tag-firing triggers. Utilize GTM’s tag sequencing feature and enable built-in variables to streamline the operation. Implement Content Security Policy to enhance security and prevent unnecessary script execution.
Avoid heavy DOM manipulations, explore server-side tagging with GTM, keep your GTM container lean, and consider using a caching proxy to load GTM resources.
-
How Do GTM's Custom JavaScript Variables Impact Page Performance?
Custom JavaScript variables in GTM significantly impact page performance depending on how they are implemented. Poorly optimized or complex JavaScript code within custom variables can slow the page load. It’s important to carefully review and optimize custom JavaScript variables to ensure they execute efficiently and do not have a negative performance impact.
-
Can Using Custom HTML Tags Impact GTM Performance?
Yes, using too many HTML codes can negatively impact performance. Avoid using too many marketing tags. Also, you should use a custom HTML tag that is optimized, efficient, and does not introduce unnecessary complexity or delays.
-
What Is the Role of Google Analytics Tags in GTM and How Do They Affect Website’s Performance?
A Google Analytics tag in GTM collects and sends data to the GA platform. These universal analytics tags are crucial for tracking and analyzing user interactions, conversions, and other important metrics on your website. When implemented and configured correctly, Google Analytics tags in GTM can provide valuable insights.
However, improper tag configuration, excessive use of tags, or inefficient firing rules can cause performance issues, leading to slower page load times and potential disruptions to the user experience.
-
How Can I Ensure That GTM Tags Are Firing in the Desired Order?
GTM offers the tag sequencing feature that allows you to specify the order of tag fires. By configuring to fire tags before or after a primary tag, you can ensure they execute in the desired sequence, considering dependencies or specific order requirements.
-
Are There Any Tools or Techniques to Measure the Impact of GTM on Website Performance?
Yes, there are various tools and techniques to measure the impact of GTM on website performance. Performance monitoring tools like Google Lighthouse, PageSpeed Insights, or web browser developer tools (e.g., Chrome DevTools) can help evaluate page load times, network requests and identify potential bottlenecks caused by GTM or other factors.
Additionally, conducting manual testing and comparing page load times with and without GTM can provide insights into its impact on performance. Leverage these tools and apply minor improvements to boost your marketing efforts.
-
Is Google Tag Manager Good for SEO?
Google Tag Manager itself does not have a direct impact on SEO. However, it can benefit SEO efforts by providing a centralized platform for managing various tracking codes and tags. It allows for easy implementation of tracking and analytics tools, which can provide valuable data for SEO analysis and optimization.
Additionally, GTM’s flexibility and ease of use can streamline adding and managing SEO-related tags, making it a valuable tool in an SEO strategy.
