Cómo instalar Google Tag Manager en su sitio
Publicado: 2022-04-12Google Tag Manager (GTM) es un servicio gratuito que simplifica enormemente el trabajo con etiquetas en sitios web y aplicaciones móviles. Con GTM, puede cambiar fácilmente el código de las páginas, agregar nuevos fragmentos e integrar su sitio con sistemas analíticos, publicidad y otros servicios.
Para comenzar, deberá instalar el código de Tag Manager en su sitio. Después de eso, todas las demás configuraciones se pueden ajustar en la interfaz de servicio sin involucrar a los programadores. Puede obtener más información sobre Google Tag Manager y cómo funciona junto con Google Analytics en nuestro artículo. Si ya está familiarizado con esto, no perdamos tiempo y procedamos a instalar GTM.
En resumen, para instalar Google Tag Manager necesitarás:
- crear una cuenta y un contenedor en Google Tag Manager;
- instale el código de Google Tag Manager en su sitio;
- publicar el contenedor;
- verifique el Administrador de etiquetas de Google.
1. Cree una cuenta y un contenedor en Google Tag Manager
En la página de inicio de Tag Manager, haga clic en el botón Registrarse e inicie sesión con su dirección de Gmail o cualquier otra cuenta de Google:
Ahora necesita crear una cuenta directamente en Tag Manager. Para hacer esto, haga clic en Iniciar sesión en Tag Manager :
A continuación, haga clic en Crear cuenta :
Piense en un nombre para su cuenta; es más conveniente usar el nombre de su empresa. Luego seleccione el país, marque la casilla junto a Compartir datos de forma anónima con Google y otros servicios (opcional) y haga clic en Continuar :
Ahora necesita configurar el contenedor. Si compara la estructura de Google Tag Manager con la estructura de Google Analytics, entonces el contenedor es el equivalente a un recurso en GA. Almacena etiquetas, disparadores y variables para todo el sitio. Puede haber varios contenedores en una cuenta de GTM: para el sitio web, para la aplicación móvil, para las páginas de AMP, etc. Para que sea conveniente, es mejor nombrar el contenedor según el recurso para el que se creó. Por ejemplo, esta puede ser la dirección de su sitio.
Una vez que haya ingresado el nombre del contenedor, seleccione dónde se usará (en nuestro ejemplo, esto es Web ) y haga clic en Crear :
Lea las reglas para usar Tag Manager. Marque la casilla en la parte inferior de la página para confirmar que está de acuerdo con las condiciones de procesamiento de datos de acuerdo con el RGPD, luego haga clic en Sí :
Después de esto, verá una ventana con el fragmento de código GTM que debe instalarse en su sitio web:
Puede copiar inmediatamente el código e instalarlo en todas las páginas del sitio que desea monitorear, o hacer clic en Aceptar y hacerlo más tarde cuando agregue las primeras etiquetas al contenedor. Puede ver y copiar el código en cualquier momento en Administración → Instalar Google Tag Manager :
2. Instale el código de Google Tag Manager en su sitio
Si está familiarizado con el desarrollo de sitios web y tiene acceso al panel de administración, es fácil agregar el código de Tag Manager. Aquí hay un ejemplo de cómo hacer esto a través de WordPress. De lo contrario, aún tendrá que pedir ayuda a los programadores; de lo contrario, existe el riesgo de romper el código fuente de la página.
El código de Google Tag Manager consta de dos fragmentos y se carga de forma asíncrona. Es decir, la parte principal de la página continúa cargándose sin esperar a que se cargue el contenedor GTM. La primera parte del código debe colocarse en el encabezado de la página, lo más cerca posible de la etiqueta de apertura <head>:
Esto se debe a que cuanto más alta sea la posición del primer fragmento, más rápido se cargará. Si lo inserta en la etiqueta <body>, corre el riesgo de perder datos sobre los usuarios que abandonan la página antes de cargar esta etiqueta.
La segunda parte del código funciona como respaldo y ayuda a rastrear las acciones de los usuarios que han deshabilitado JavaScript. Debe colocarse inmediatamente después de la etiqueta de apertura <body>:
¡Importante!
El código GTM debe colocarse directamente en la página que vas a rastrear, en otras palabras, en todo tu sitio. Colocar código en un iframe oculto o implementarlo en otro sistema de administración de etiquetas no permitirá rastrear las etiquetas en la página principal correctamente.
Instalación de Google Tag Manager en una página AMP
Si utiliza la tecnología AMP para cargar y adaptar rápidamente páginas para dispositivos móviles, la primera parte del código debe colocarse antes de la etiqueta de cierre < /head>:
Y la segunda parte del código debe insertarse inmediatamente después de la etiqueta de apertura <body>:
3. Publicar el contenedor
Incluso si no ha agregado una sola etiqueta al contenedor, le recomendamos publicarlo inmediatamente después de instalar el código GTM en su sitio. De lo contrario, el contenedor generará un error 404. Esto no es crítico, sin embargo. Si está rastreando errores de JavaScript usando ciertos servicios como TrackJS, entonces los errores 404 ensuciarán sus informes. Para no causar estrés innecesario a los desarrolladores, es mejor publicar un contenedor vacío, no daña a nadie.
Para publicar un contenedor, vaya a la pestaña Espacio de trabajo en Tag Manager y haga clic en el botón Enviar en la esquina superior derecha:
Seleccione Publicar y Crear versión . Dado que esta es la primera versión de su contenedor, el campo Descripción de la versión se puede dejar en blanco. A continuación, haga clic en Publicar :
Hecho. El contenedor ha sido publicado.
4. Consulte el Administrador de etiquetas de Google
Después de agregar el código de Tag Manager a su sitio, puede verificar si los datos se transfieren correctamente utilizando la extensión especial Google Tag Assistant. Esta es una adición al navegador Chrome que muestra qué etiquetas de productos de Google están instaladas en su sitio y cómo funcionan.
Después de descargar e instalar el complemento, verá este icono en la barra de herramientas de Chrome
. Haga clic en él y seleccione qué etiquetas del sistema desea verificar y en qué páginas. Haga clic en Listo .
Luego vaya a la página que desea verificar y haga clic en el icono de Tag Assistant. Para activar la extensión, haga clic en Habilitar :
Actualice la página actual y Tag Assistant le mostrará qué etiquetas están instaladas en la página y cómo funcionan. Un icono verde indica que los datos se transmiten sin quejas, el azul indica que no hay problemas críticos y el rojo indica problemas graves:
Si hace clic en una etiqueta específica, verá las posibles causas del error y consejos sobre cómo solucionarlo:
Puede encontrar más información sobre Tag Assistant en la Ayuda de Google.
Un par de consejos más
Al instalar el código GTM en su sitio, solicite a su desarrollador que agregue el fragmento de Google Optimize al mismo tiempo. Esta es una buena idea incluso si no va a experimentar con el contenido de su sitio en este momento. Siempre que quieras realizar una prueba A/B, todo estará listo.
Este fragmento de código es necesario para cargar el contenedor de Google Optimize de forma asíncrona y no mostrar la página original hasta que se cargue el contenedor. Con el fragmento de Optimize, los usuarios no verán el contenido original de la página hasta que se cargue la página con los cambios en su prueba.
Cuando transfiera etiquetas que inyectó manualmente en Google Tag Manager, no olvide eliminarlas del código en el sitio para que los datos no se dupliquen. Éste es un punto importante.
Que sigue
Después de instalar el código en su sitio, debe agregar y configurar etiquetas y variables en la interfaz del Administrador de etiquetas. Para saber cómo hacerlo, consulte el artículo Qué es Google Tag Manager y cómo configurar Google Analytics con él o el seminario web Un paso adelante: técnicas y sutilezas para trabajar con Google Tag Manager.
PS Hemos preparado una lista de verificación de 20 pasos que deben realizar los analistas de marketing para tomar decisiones basadas en datos correctos y completos. Complete el formulario y le enviaremos la lista de verificación por correo electrónico.