Posted on by MariaJose

Google Tag Manager: Qué es, para qué sirve y cómo usarlo (5 mins)

google tag manager

Google Tag Manager: Guía de inicio

Google Tag Manager es una herramienta gratuita que le permite administrar e implementar etiquetas de marketing (fragmentos de código o píxeles de seguimiento) en su sitio web (o aplicación móvil) sin tener que modificar el código.

Ok, todavia no entiendo. Cuando tienes un sitio web, necesitas entender cuantas visitas tienes, instalar el píxel de facebook (para luego hacer remarketing a la gente que visito tu sitio) etc. 

Generalmente antes necesitabas que un programador hiciera dicha instalación generalmente “retrasando” los procesos de mercado ya que los desarrolladores tienen muchísimo trabajo.

Google hizo esta herramienta que te termine a ti como marquetero instalar cualquier integración en tu sitio para cualquier prueba o integración sin la necesidad de una persona técnica. 

El tag manager también es una herramienta sencilla para hacer eventos, por ejemplo cuanta gente hizo clic en descargar algún contenido en tu sitio, o que porcentaje del video vieron mientras estaban navegando etc. 

Con este artículo aprenderá cómo comenzar rápidamente con Google Tag Manager. Siga el paso a paso para crear su cuenta y contenedor. Estará listo y funcionando en poco tiempo, así que ¡comencemos!

Crear una cuenta de administrador de etiquetas de Google

Para comenzar, primero creemos una cuenta Google Tag Manager. Vaya al sitio web oficial y haga clic en el botón Crear cuenta nueva de GTM.

google tag manager

Al igual que con cualquier otro producto de Google, usará la misma cuenta de Google para Tag Manager. Entonces, si ya está en Gmail (Google Ads, Google Analytics, etc.), iniciará sesión automáticamente en Google Tag Manager. Si no es así, cree primero una cuenta de Google (no mostraré ese procedimiento, así que estará solo aquí 🙂).

Una vez que inicie sesión, se le pedirá que cree una nueva cuenta Google Tag Manager y un nuevo contenedor.

google tag manager

Entonces queda atender la configuración del contenedor, donde también deberá asignar un nombre, seleccionar una plataforma objetivo.

google tag manager

La cuenta de Google Tag Manager funciona igual que la cuenta de Google Analytics, por lo general, es para una empresa / negocio / cliente, mientras que un contenedor suele ser para un sitio web o aplicación. Un solo contenedor puede contener muchas etiquetas, disparadores y variables.

Sin embargo, si hay varios sitios web que pertenecen a una sola empresa y su estructura es muy similar (además, su implementación de seguimiento es similar), siéntase libre de usar un contenedor en varios sitios web.

¿Dónde puedo encontrar el código del Google Tag Manager?

Google Tag Manager le proporciona el código exacto y las instrucciones para agregarlo a su sitio web. Hay dos lugares donde puedes encontrarlo:

  • Al hacer clic en el enlace ID del contenedor (ubicado junto a los botones Vista previa y Enviar)

  •  O vaya a Admin> Cuenta> Contenedor> Instalar Google Tag Manager

Cualquiera de estas opciones abrirá las instrucciones sobre cómo instalar el código del Administrador de etiquetas de Google en su sitio web.

google tag manager

Agregue el código del contenedor de Google Tag Manager al sitio web

Siga las instrucciones y coloque el primer código (que está rodeado de etiquetas <script>) en algún lugar entre las etiquetas <head> de su sitio web. Este código es la parte clave. Le dice a su página que cargue su contenedor GTM de forma asíncrona, lo que significa que el resto de la página puede continuar cargándose mientras Google está haciendo su magia.

Aquí hay un ejemplo de <head> del sitio web donde puede agregar el código <script> de GTM.

El segundo código del Administrador de etiquetas de Google (noscript) debe colocarse inmediatamente después de la apertura de la etiqueta <body>. Esto funciona como una copia de seguridad, lo que le permite rastrear usuarios sin Javascript. La etiqueta <noscript> le dice al navegador si el usuario no tiene JavaScript habilitado, luego muestra una versión de iframe del Contenedor GTM en la página.

Importante: Si bien puede colocar ambos códigos en <body> solamente, no debe agregarlos en <head>. Como se mencionó anteriormente, la parte <noscript> representa un iframe, que no está permitido en <head>, de lo contrario, el HTML del sitio web no será válido.

Entonces las posibles opciones son:

  • El código <script> se agrega a <head> y <noscript> a <body>
  • los códigos <script> y <noscript> se agregan a <body>

Otra cosa a mencionar es que no se requiere la parte <noscript> del código GTM. Solo lo necesitará si desea realizar un seguimiento de los visitantes sin JavaScript habilitado (que es una fracción muy pequeña del tráfico web con muchas limitaciones) o si desea verificar la propiedad de la Propiedad de la Consola de búsqueda.

Compruebe si los complementos de Google Tag Manager están disponibles

Si está utilizando un sistema de gestión de contenido (CMS) popular que permite el uso de complementos, es probable que ya haya un complemento que instale el Administrador de etiquetas de Google. Todo lo que necesita hacer es agregar su ID de contenedor de Google Tag Manager.

Aquí hay varios ejemplos de tales complementos:

  • Para WordPress: siempre recomiendo GTM4WP (sin dudas)
  • Vi que Magento también ofrece un montón de complementos GTM
  • en Shopify, también encontrarás varios buenos, por ejemplo, esto.

Eso debería ahorrarle algo de tiempo. Además, algunas plataformas ofrecen integración GTM incorporada (por ejemplo, WIX).

Sin embargo, si decidió mudarse con la instalación manual (con o sin el aporte de un desarrollador), esto es lo que necesita saber (continúe leyendo)

¿Por qué debo colocar el código del Google Tag Manager en <head>?

Si bien esto no es 100% obligatorio, se recomienda encarecidamente que coloque <script> parte del código GTM en <head> de su sitio web.

¿Por qué? Es mejor para el seguimiento. Cuanto más arriba en la página esté el fragmento, más rápido se cargará. En la versión anterior del Administrador de etiquetas de Google, se recomendaba colocar el fragmento en la etiqueta del cuerpo, pero esto podría extrañar a los usuarios que abandonaron su página antes de que se cargara la etiqueta del cuerpo (debido a la velocidad lenta de la página).

Si su sitio web es bastante pesado, GTM puede tardar más de unos segundos en comenzar a cargarse en <body>, pero en <head> se iniciaría mucho más rápido, por lo que podría atrapar más visitantes y ver cómo se comportan.

Esto podría ayudarlo a identificar el porcentaje de tráfico que rebota incluso antes de que la página se cargue por completo.

Recuerde, cuanto más bajos se coloquen sus códigos de seguimiento en el código del sitio web, más tarde se lanzarán.

Publica el contenedor

Cuando coloque el código en su sitio web, diríjase a la cuenta de Google Tag Manager y publique el contenedor. Especialmente si está vacío.

¿Por qué? Debido a que el contenedor GTM no publicado causará un error (visible en la consola del navegador).

Su navegador solicita datos de los servidores de Google, aunque ese contenedor aún no está publicado, por lo que no se devolverán datos.

Este no es un gran problema, pero si sus desarrolladores están rastreando errores de Javascript con herramientas particulares (por ejemplo, TrackJS), verán esos errores 404 en los informes. Esto creará un ruido no deseado para ellos.

Compruebe si el Administrador de etiquetas de Google funciona

Después de implementar el código GTM en una página, debe asegurarse de si realmente se instaló correctamente. Hay varias opciones entre las que puede elegir (todas se explican en detalle aquí):

  • Haga clic derecho en el fondo de su sitio web -> elija Ver fuente de la página y busque ese código (buscando gtm.js)
  • Habilite el modo de vista previa y depuración y vea si aparece en la pantalla. Haga clic en el botón Vista previa en la esquina superior derecha de la interfaz de GTM, luego vaya al sitio web (actualícelo) y verifique si apareció un panel de vista previa y depuración de GTM en la parte inferior de la pantalla.
  • Use la extensión Tag Assistant y verifique si se muestra GTM una vez que lo habilite.

En resumen: Cómo configurar e instalar Google Tag Manager

El consejo aquí es simple: solo siga las instrucciones de Google.

La forma más recomendada de cómo instalar el código del Google Tag Manager es colocar la parte <script> en <head> de su sitio web, y la parte <noscript> debe colocarse en algún lugar de <body> (preferiblemente justo después de la etiqueta <body>).

Esto garantiza que sus etiquetas de marketing en GTM se activarán lo antes posible sin gran pérdida de datos.

Cuanto menor sea la ubicación del código del Administrador de etiquetas de Google, más tarde se activarán sus etiquetas. Como resultado, puede perder una parte de sus datos.

Si está utilizando un sistema de administración de contenido popular para ejecutar su sitio web (por ejemplo, WordPress), busque complementos listos para usar que ayudarán a instalar Google Tag Manager con un par de clics.

Recent Post