How do I manually add Google tag code to Web page in elementor? - ilustracion

Agregar código Google Tag en Elementor paso a paso

Para agregar código de Google Tag en Elementor manualmente necesitás Elementor Pro y la función Custom Code: entrás a Elementor → Custom Code → Add New, pegás el snippet que te da Google, elegís la ubicación ( o después del) y publicás con la condición «Entire Site». Google Tag Manager pide dos códigos, uno en cada ubicación, y sin la versión Pro tenés que usar un plugin gratuito aparte.

En 30 segundos

Custom Code es Pro: la función nativa para pegar el código de Google Tag Manager en Elementor viene solo con Elementor Pro (desde USD 59/año la licencia de un sitio).
Son dos snippets, no uno: GTM te da un código para el y otro para el inicio del. Si ponés uno solo, no funciona bien.
Un contenedor para todo: con un único contenedor de GTM manejás Google Analytics 4, Google Ads y Search Console sin tocar más el código del sitio.
Verificás con Tag Assistant: el modo Preview de GTM y la extensión Google Tag Assistant te dicen en segundos si las etiquetas disparan.
Sin Pro, hay plan B: plugins gratuitos como GTM4WP o Insert Headers and Footers hacen lo mismo sin pagar la licencia.

Google Tag Manager (GTM) es un sistema de gestión de etiquetas de Google que te deja instalar y administrar scripts de seguimiento (Analytics, Ads, píxeles) desde un panel web, sin editar el código del sitio cada vez. En un WordPress armado con Elementor, el desafío no es GTM en sí, es dónde meter el código para que quede en todas las páginas y en el lugar correcto del HTML.

¿Para qué agregar Google Tag Manager en vez de pegar el código de Analytics directo?

Ponele que arrancás con Google Analytics, después el cliente quiere medir conversiones de Google Ads, más tarde un píxel de remarketing y de yapa rastrear cuándo alguien envía un formulario. Si vas pegando cada script suelto en el sitio, terminás con cinco fragmentos regados que nadie sabe de dónde salieron.

Con GTM cargás un solo contenedor y desde ahí administrás todo. Según la documentación oficial de Elementor, esta es la vía recomendada cuando vas a manejar más de una herramienta de medición. Las ventajas concretas:

Cero dependencia del desarrollador: agregás o sacás etiquetas desde el panel de GTM, sin volver a tocar WordPress.
Rastreo de eventos sin código: clics en botones, envíos de formulario, scroll y descargas se configuran con disparadores visuales.
Versionado y rollback: GTM guarda cada publicación, así que si algo se rompe volvés a la versión anterior en dos clics.

Eso sí: para medición básica y nada más, GA4 tiene su propia etiqueta directa. GTM recién brilla cuando la cosa se complica.

¿Qué necesitás antes de empezar?

Antes de tocar nada, juntá estas cuatro cosas. Si te falta la primera, saltá directo a la sección del plan gratuito más abajo. Tema relacionado: como explicamos en nuestra guía.

Elementor Pro instalado y activo: Custom Code no aparece en la versión gratuita. Se compra en elementor.com desde USD 59/año para un sitio.
Cuenta de Google Tag Manager: gratis, se crea en tagmanager.google.com con tu cuenta de Google.
Un contenedor creado: dentro de GTM, «Crear cuenta» → nombre del sitio → plataforma «Web». Te devuelve un ID con formato GTM-XXXXXXX.
Los dos snippets copiados: apenas creás el contenedor, GTM te muestra el código del y el del. Dejalos a mano en un bloc de notas.

Un detalle que se pasa por alto: el código tiene que quedar en todas las páginas del sitio, no en una sola. Por eso conviene la función global de Elementor y no meterlo página por página.

¿Cómo agregar el código con Custom Code en Elementor paso a paso?

Acá viene lo bueno. Con el contenedor creado y Elementor Pro andando, el proceso lleva unos cinco minutos. Vas a repetirlo dos veces, una por cada snippet.

En el escritorio de WordPress, entrá a Elementor → Custom Code.
Hacé clic en Add New (Agregar nuevo).
Ponele un nombre descriptivo, tipo «GTM Head», para que después sepas qué es cada uno.
Pegá el primer snippet de GTM (el del) en el editor de código.
En Location elegí <head>.
Publicá y en Conditions seleccioná Entire Site → Include.
Repetí todo con el segundo snippet: nombre «GTM Body», ubicación <body> - Start, misma condición «Entire Site».

Y listo. Si te olvidás de poner «Entire Site», el código queda cargado pero no se inyecta en ninguna página, que es el error número uno de esta configuración.

¿Dónde va cada código: diferencia entre Head y Body en GTM?

Google Tag Manager entrega dos fragmentos y cada uno tiene su lugar exacto. No son intercambiables. El del carga la librería de GTM lo antes posible; el del es un respaldo <noscript> para navegadores sin JavaScript activo.

Snippet	Ubicación en Elementor	Qué hace	Si lo ponés mal
Código 1 (JavaScript)	`<head>`	Carga la librería de GTM al inicio de la página	Etiquetas disparan tarde o no cargan; podés perder eventos
Código 2 (noscript)	`<body> - Start`	Respaldo para visitantes sin JavaScript	No pasa gran cosa hoy, pero GTM lo marca como instalación incompleta

google tag en elementor diagrama explicativo

¿El del body va al principio o al final? Al principio (Start). Google lo especifica así en la pantalla de instalación del contenedor. Si lo mandás al final del body, el modo Preview te va a tirar advertencia de posición incorrecta. En especialmente si monetizas tu trabajo profundizamos sobre esto.

¿Cómo cargar Analytics, Ads y conversiones desde un solo contenedor?

Una vez que GTM está inyectado en Elementor, no volvés a tocar el código del sitio nunca más. Todo lo demás se arma adentro del panel de Tag Manager. Este es el punto donde GTM devuelve la inversión de tiempo.

Google Analytics 4

En GTM creás una etiqueta nueva del tipo «Google Analytics: configuración de GA4», pegás tu ID de medición (formato G-XXXXXXX) y le asignás el disparador «All Pages». Publicás y GA4 empieza a recibir datos, sin tocar Elementor.

Google Ads y seguimiento de conversiones

La etiqueta de conversión de Google Ads se agrega igual: nuevo tag, tipo «Google Ads Conversion Tracking», cargás el ID de conversión y la etiqueta de conversión que te da Ads, y disparás en la página de «gracias» del formulario. Todo dentro de GTM.

Search Console

Search Console no necesita etiqueta propia: si ya verificaste el sitio con GA4 o GTM, la verificación de propiedad se puede hacer con el mismo contenedor eligiendo «Google Tag Manager» como método en la pantalla de verificación de Search Console.

¿No tenés Elementor Pro? Alternativas gratuitas

Si estás con Elementor gratis, la función Custom Code no existe y no hay vuelta que darle. Pero pegar código en el de WordPress es algo que muchos plugins gratuitos resuelven sin drama: Complementá con aunque tengas dudas sobre SEO.

GTM4WP: plugin específico para Google Tag Manager, gratis, con opciones avanzadas de dataLayer para WooCommerce.
Insert Headers and Footers (WPCode): genérico, te deja pegar cualquier script en head o body en dos campos.
El archivo del tema (child theme): editás header.php a mano. Solo si sabés lo que hacés y usás un tema hijo para no perder los cambios al actualizar.

Sea cual sea el método, todo esto corre del lado del servidor donde alojás WordPress. Si vas a probar la configuración en un entorno de staging antes de mandarla a producción, un hosting WordPress como el de Donweb te deja clonar el sitio sin romper el que ya está online.

Errores comunes al implementar Google Tag en Elementor

La mayoría de los problemas no son de GTM, son de configuración. Estos son los que aparecen una y otra vez:

Olvidarse de publicar en GTM: creás la etiqueta en el panel pero no apretás «Enviar/Publicar». La etiqueta existe en modo borrador y nunca dispara en el sitio real. Revisá que el contenedor esté publicado.
No activar «Entire Site» en Elementor: el snippet queda guardado en Custom Code pero sin condición de despliegue, así que no se inyecta. Asignale siempre «Entire Site → Include».
Poner el noscript en el head: mezclás los dos snippets. Cada uno va en su ubicación, revisá antes de publicar.
Formularios de Elementor con reCAPTCHA: si medís envíos de formulario y tenés reCAPTCHA v3, a veces el disparador no captura el evento. La solución es usar la acción «Elementor Form» con el evento de dataLayer que expone GTM4WP, no un disparador de clic genérico.
Doble medición: tenés GA4 cargado por GTM y además pegado directo en otro plugin. Resultado: cuentan todo dos veces. Dejá una sola vía.

¿Cómo verificar que el código está funcionando?

Nunca des por sentado que quedó bien porque pegaste el código. Verificá siempre. Hay tres formas rápidas, de la más simple a la más completa:

Modo Preview de GTM: en el panel de Tag Manager, clic en «Vista previa», cargás la URL de tu sitio y Tag Assistant te muestra en tiempo real qué etiquetas disparan en cada página.
Google Tag Assistant: la extensión (o tagassistant.google.com) te confirma que el contenedor GTM está detectado y sin errores de instalación.
Consola del navegador: apretá F12, pestaña Network, filtrá por «collect» o «gtm.js». Si ves las peticiones, GTM está cargando.

Para confirmar que los datos llegan de verdad, entrá a GA4 → Informes → Tiempo real y navegá tu propio sitio en otra pestaña. Si te ves a vos mismo como usuario activo, la cadena completa funciona.

Preguntas Frecuentes

¿Necesito Elementor Pro para agregar Google Tag?

Sí, la función Custom Code que inyecta código en el y el viene solo con Elementor Pro (desde USD 59/año). Con la versión gratuita tenés que usar un plugin externo como GTM4WP o WPCode, que hacen lo mismo sin costo.

¿Dónde va el código, en head o en body?

Google Tag Manager entrega dos códigos: el de JavaScript va en el <head> y el de <noscript> va al inicio del <body>. Los dos son necesarios y cada uno tiene su ubicación fija, no se pueden intercambiar. Sobre eso hablamos en comparada con plataformas alternativas.

¿Cómo funciona Custom Code en Elementor?

Custom Code es una función de Elementor Pro que guarda fragmentos de código y los inyecta en la ubicación que elijas (head o body) de las páginas que definas con condiciones. Se administra desde Elementor → Custom Code, sin editar archivos del tema.

¿Puedo cargar Analytics y Ads con un solo contenedor?

Sí, ese es el objetivo de GTM. Con un único contenedor instalado en Elementor administrás Google Analytics 4, Google Ads, conversiones y píxeles desde el panel de Tag Manager, sin volver a tocar el código del sitio.

¿Cómo verifico que Google Tag está funcionando?

Usá el modo Preview de GTM y la herramienta Google Tag Assistant para ver qué etiquetas disparan en cada página. Para confirmar que los datos llegan, entrá a GA4 → Tiempo real y navegá tu propio sitio: si aparecés como usuario activo, está andando.

Conclusión

Agregar el código de Google Tag en Elementor es directo si tenés Pro: Custom Code, los dos snippets en sus ubicaciones, condición «Entire Site» y listo. Lo que cambia el juego no es pegar el código, es usar GTM como contenedor único para no volver a tocar el sitio cada vez que sumás una herramienta de medición.

Si estás con Elementor gratis, no te frenes: un plugin como GTM4WP resuelve la instalación sin la licencia Pro. En cualquier caso, verificá siempre con el modo Preview antes de dar por cerrado el trabajo. Un contenedor que quedó en borrador o un snippet sin «Entire Site» te hacen perder datos en silencio, y eso lo descubrís tarde.