Cómo añadir Google Tag Manager sin afectar el rendimiento

Google Tag Manager (GTM) es una herramienta muy potente que permite gestionar fácilmente todos tus códigos de seguimiento y marketing (Facebook Pixel, Google Analytics, Microsoft Clarity…) desde un único lugar sin necesidad de editar tu sitio cada vez que quieras añadir un código nuevo o eliminar/modificar uno que ya exista. Sin embargo, añadir GTM de forma incorrecta puede ralentizar seriamente tu web. Entonces, ¿cómo podemos añadirlo correctamente sin sacrificar el rendimiento?

Lo que vamos a hacer

En este artículo, te muestro exactamente cómo añadir Google Tag Manager manualmente a tu web WordPress usando el archivo functions.php, y cómo retrasar la carga del JavaScript de GTM para que no bloquee el renderizado de la página ni arruine tus Core Web Vitals. Sin plugins innecesarios. Sin sobrecarga de JavaScript que sea render-blocking.

Además, te enseñaré algunos trucos para mejorar el rendimiento del propio Google Tag Manager.

Para empezar, habrá que añadir dos fragmentos de código JavaScript en cada página de tu WordPress:

Un fragmento en el <head>
Otro fragmento después de la etiqueta <body> de apertura

Ambos fragmentos pueden añadirse a todas las páginas de la web editando el archivo functions.php. Suena simple (y lo es), pero hay formas correctas e incorrectas de hacerlo si te importa el rendimiento de la web.

El archivo functions.php está dentro de tu tema de WordPress y permite añadir código PHP personalizado para ampliar o modificar el comportamiento de la web. Si no estás familiarizado con él, te recomiendo revisar la guía sobre cómo acceder y editar de forma segura el archivo functions.php.

Guía paso a paso para añadir GTM a través del functions.php

Antes de empezar

Haz siempre una copia de seguridad del archivo functions.php antes de editarlo.
Si usas un tema hijo, haz las modificaciones ahí en lugar de en el tema padre.

1. Copia los fragmentos de código de GTM

Primero necesitas copiar los fragmentos de código únicos de Google Tag Manager (GTM) y tenerlos listos para pegarlos en el archivo functions.php de tu sitio.

Cómo encontrarlos:

Ve a https://tagmanager.google.com e inicia sesión.
Selecciona tu cuenta y contenedor.
Haz clic en Instalar Google Tag Manager (arriba a la derecha), o ve a Admin > Instalar Google Tag Manager.
Aparecerá una ventana emergente con dos fragmentos de código.
Ten ambos listos, los necesitarás en los siguientes pasos.

La pantalla de Google Tag Manager mostrando los fragmentos de código a copiar

2. Añade el código `<head>` de GTM usando el hook `wp_head`

Abre el archivo functions.php de tu tema y añade lo siguiente al final del archivo:

function add_gtm_head_code() {
    ?>
    [Pega el fragmento de código del head aquí, el que tiene la etiqueta <script>]
    <?php
}
add_action('wp_head', 'add_gtm_head_code');

Ahora sustituye la línea que dice [Pega el fragmento de código del head aquí, el que tiene la etiqueta <script>] por el primer fragmento que cogiste de Google Tag Manager. Por ejemplo:

3. Añade el código `<body>` de GTM usando el hook `wp_body_open` (WordPress 5.2+)

En el mismo archivo functions.php, añade este código justo después del anterior:

function add_gtm_body_code() {
    ?>
    [Pega el fragmento de código del body aquí, el que tiene la etiqueta <noscript>]
    <?php
}
add_action('wp_body_open', 'add_gtm_body_code');

Ahora sustituye la línea que dice [Pega el fragmento de código del body aquí, el que tiene la etiqueta <noscript>] por el segundo fragmento que cogiste de Google Tag Manager. Por ejemplo:

Si usas una versión antigua de WordPress que no es compatible con la acción wp_body_open, puede que tengas que modificar manualmente el archivo header.php de tu tema, lo cual no es recomendable salvo que estés trabajando sobre un tema hijo.

Retrasar el script con un plugin de optimización

Una vez que el código de GTM esté en su sitio, deberías retrasar su ejecución usando un plugin de optimización de rendimiento como Perfmatters, WP Rocket, LiteSpeed Cache o Autoptimize Pro. ¿Por qué? Porque cargar GTM lo antes posible (como recomienda Google) suele entrar en conflicto con las buenas prácticas de rendimiento como eliminar recursos que bloquean el renderizado o diferir scripts no críticos como Google Tag Manager.

Retrasar GTM asegura que no se cargue antes de que la página sea visible para el usuario, ayudando a mantener tiempos de carga rápidos y mejores puntuaciones en las Core Web Vitals.

Haz clic aquí para aprender cómo retrasar JavaScript en sitios WordPress.

¿Pero por qué no usamos un plugin para añadir GTM a WordPress y ya está?

Sí, existen docenas de plugins que prometen una integración “fácil” con GTM, pero la realidad es que la mayoría son excesivos. Suelen incluir funciones que no necesitas, y se ejecutan en cada carga de página e introducen JavaScript adicional que ralentiza tu sitio.

Si lo único que necesitas es insertar dos pequeños fragmentos de código, no hay razón para instalar y ejecutar un plugin solo para eso. Una solución manual es más ligera, rápida y te da control total, especialmente si la combinas con un sistema de retraso como Perfmatters, que es una de mis herramientas favoritas para optimizar sitios, y la que uso aquí en Asistente WordPress.

Cómo optimizar el rendimiento de Google Tag Manager

Añadir GTM correctamente es solo parte del trabajo; optimizar tu contenedor GTM es igual de importante. Un contenedor sobrecargado o mal configurado también puede perjudicar tus Core Web Vitals y el rendimiento general del sitio.

Aquí tienes un resumen de lo que puedes hacer para mantener tu configuración de GTM limpia y rápida. Te recomiendo consultar a Dumky para una explicación más detallada.

1. Reduce el desorden del contenedor

Elimina periódicamente etiquetas, activadores y variables que no uses. Para ello puedes usar GTM Export Tools para exportar el contenedor primero y limpiar elementos de forma masiva después.
Documenta el proceso de añadir y quitar etiquetas, y utiliza fechas de caducidad o programaciones personalizadas para etiquetas de campañas.

2. Evita etiquetas HTML personalizadas y variables JavaScript

Las etiquetas HTML personalizadas ralentizan la página y aumentan el riesgo de problemas de rendimiento.
En su lugar, usa plantillas integradas de etiquetas o crea plantillas personalizadas. Las plantillas se analizan una vez cuando el contenedor de GTM se carga, mientras que las etiquetas HTML se analizan y ejecutan una y otra vez.

3. Usa tablas de consulta para simplificar la lógica

Las tablas de consulta son herramientas muy potentes para sustituir la lógica compleja en variables.
En vez de múltiples etiquetas o variables para diferentes condiciones, usa una única tabla de consulta para simplificar la configuración.

4. No inyectes todo a través de GTM solo porque puedes

Evita cargar mediante GTM herramientas pesadas de terceros como chats, mapas de calor o reproductores de vídeo salvo que sea estrictamente necesario.
Estas herramientas es mejor añadirlas manualmente o condicionalmente, no en cada página por defecto

5. Retrasa la ejecución de etiquetas

No dispares todas las etiquetas al cargar la página. Retrasa las etiquetas que no son esenciales hasta el DOM Ready o incluso Window Loaded.
Con esto nos aseguramos de que las etiquetas solo se ejecutan cuando el usuario realmente ve la página.

6. Ejecuta etiquetas de forma condicional

No todas las etiquetas tienen que ejecutarse en todas las páginas.
Por ejemplo, solo dispara las etiquetas de afiliados si hay un clickId en la URL, o solo ejecuta etiquetas de conversión en páginas de agradecimiento. Cuantas menos etiquetas ejecutes, más rápido la web cargará.

7. Reduce el uso de variables (sobre todo JavaScript personalizado)

Las variables se ejecutan en todas las páginas, incluso si no se usan.
Minimiza su número y optimiza el rendimiento de cualquier JS personalizado. Cuando sea posible, usa sessionStorage o localStorage para guardar valores calculados y evitar reprocesarlos.

8. Usa únicamente scripts asíncronos

Google Tag Manager se carga de forma asíncrona, pero las etiquetas HTML personalizadas pueden introducir scripts síncronos (bloqueadores).
Evítalos siempre. Asegúrate de que todas las peticiones externas sean async, y cachea los resultados cuando sea posible.

9. Usa una CDN para cachear el contenedor de GTM

Cachea el contenedor GTM en tu CDN (ej. Cloudflare) mediante Cloudflare Workers u otras herramientas parecidas.
Así evitas solicitar el contenedor en cada visita y aceleras la carga, especialmente en visitas repetidas.

Cómo añadir Google Tag Manager sin afectar el rendimiento de WordPress

Lo que vamos a hacer