Instalar Google Tag Manager (GTM) puede parecer una tarea sencilla, pero hay matices importantes que no deben pasarse por alto. En este artículo, exploraremos las distintas maneras de implementar GTM en tu sitio web, analizando los pros y contras de cada opción para asegurarnos de que tu implementación sea exitosa.
Antes de comenzar, asegúrate de haber creado una cuenta en Google Tag Manager y de tener tu contenedor listo para usar.
Creación de una cuenta de Google Tag Manager
Lo primero que debes hacer es crear una cuenta de GTM. Visita el sitio oficial de Google Tag Manager y haz clic en el botón para crear una nueva cuenta. Utilizarás tu cuenta de Google existente, así que si ya estás conectado a Gmail, Google Ads o Google Analytics, accederás automáticamente a GTM.
Una vez dentro, serás guiado para crear tu cuenta de Google Tag Manager y un contenedor. Recuerda que un contenedor es específico para un sitio web o aplicación, y puede contener múltiples etiquetas, activadores y variables. Si gestionas varios sitios web con estructuras y necesidades similares, puedes optar por utilizar un solo contenedor para todos ellos.
¿Dónde encontrar el código de Google Tag Manager?
Google Tag Manager te proporciona el código exacto que necesitas para añadir a tu sitio web. Este código se puede encontrar de dos maneras:
Haciendo clic en el ID del contenedor, que se encuentra junto a los botones de Publicar y Vista previa.
Accediendo a Admin > Cuenta > Contenedor > Instalar Google Tag Manager.
Ambas opciones te ofrecerán instrucciones sobre cómo instalar el código de GTM en tu sitio, además de los fragmentos de código que deberás añadir.
Agregar el código del contenedor de Google Tag Manager a tu sitio web
De acuerdo con las instrucciones, deberás colocar el primer fragmento de código, que está rodeado por etiquetas <script>, entre las etiquetas <head> de tu sitio. Este código es fundamental, ya que indica a tu página que cargue el contenedor de Google Tag Manager de manera asíncrona, permitiendo que el resto de la página continúe cargándose mientras GTM realiza su trabajo.
El segundo fragmento de código, que corresponde a <noscript>, debe colocarse inmediatamente después de la etiqueta de apertura <body>. Este código actúa como respaldo, permitiendo el seguimiento de usuarios que no tienen habilitado JavaScript. Si el navegador detecta que JavaScript está deshabilitado, se renderizará una versión iframe del contenedor de Google Tag Manager en la página.
Importante: Aunque puedes colocar ambos códigos en <body>, no debes añadirlos ambos en <head>, ya que esto haría que el HTML de tu sitio fuera inválido.
El código <script> debe ir en <head> y el código <noscript> en <body>.
Ambos códigos pueden ir en <body>.
Recuerda que la parte <noscript> no es obligatoria. Solo es necesaria si deseas realizar seguimiento a visitantes sin JavaScript habilitado, o si necesitas verificar la propiedad en Google Search Console.
Verificar si hay plugins de GTM disponibles
Si utilizas un sistema de gestión de contenido (CMS) popular, es probable que ya exista un plugin que facilite la instalación de Google Tag Manager. Solo tendrás que añadir tu ID de contenedor de Google Tag Manager. Aquí algunos ejemplos:
Para WordPress, recomiendo encarecidamente el plugin GTM4WP.
En Shopify, existen varias buenas opciones, como este plugin.
Utilizar plugins puede ahorrarte tiempo. Algunas plataformas, como WIX, ofrecen integración incorporada con Google Tag Manager.
Importancia de ubicar el código de Google Tag Manager en el head
Aunque no es estrictamente necesario, se recomienda encarecidamente que coloques el código <script> de GTM en la sección <head> de tu sitio web. Esto se debe a que, cuanto más arriba se encuentre el fragmento en la página, más rápido se cargará.
Si tu sitio es pesado, puede que tarde varios segundos en cargar el código en <body>. Sin embargo, si está en <head>, se iniciará mucho más rápido, lo que te permitirá captar más visitantes y evaluar su comportamiento.
Esta estrategia puede ayudarte a determinar el porcentaje de tráfico que abandona el sitio antes de que la página se cargue completamente.
Comprobación del funcionamiento de Google Tag Manager
Después de implementar el código de GTM en tu página, es crucial verificar que se haya instalado correctamente. Hay varias formas de hacerlo:
Haz clic derecho en el fondo de tu sitio y selecciona Ver código fuente, luego busca el código (puedes buscar gtm.js).
Activa el modo de vista previa y depuración para comprobar si aparece en la pantalla. Haz clic en el botón Vista previa en la esquina superior derecha de la interfaz de GTM, luego visita tu sitio y verifica si aparece el panel de vista previa y depuración de Google Tag Manager en la parte inferior de la pantalla.
Estos son algunos de los métodos más efectivos para asegurarte de que GTM esté funcionando correctamente. Si necesitas una guía más detallada, hay recursos adicionales disponibles en línea.
Uso de la capa de datos para información personalizada
Al añadir el código de Google Tag Manager a tu sitio, se crea automáticamente una capa de datos. Esta capa actúa como un espacio virtual que contiene diversos puntos de datos relevantes.
Con la capa de datos, GTM puede leer, enviar y transferir información entre tu sitio y otras herramientas de seguimiento. Si deseas empujar datos a la capa de datos cuando se carga la página, debes colocar esa información antes del código de Google Tag Manager.
<head>
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'customerType': 'vip',
'registrationCountry': 'United States'
});
</script>
<script>
<!-- Google Tag Manager -->
...
<!-- Fin de Google Tag Manager -->
</script>
</head>
Si no tienes habilidades de programación, un desarrollador deberá encargarse de esta tarea, ya que no basta con copiar y pegar. Debe haber lógica que añada información dinámica a la capa de datos.
La capa de datos puede resultar confusa para principiantes, así que aquí tienes algunos recursos adicionales para familiarizarte con el concepto:
Errores comunes en la instalación de Google Tag Manager
A pesar de que la instalación de Google Tag Manager suele ser un proceso sencillo, hay errores comunes que pueden causar frustración y evitar el correcto funcionamiento de GTM. Estos son algunos de los errores más frecuentes:
#1. Alterar las comillas. Al enviar el código del contenedor a los desarrolladores, muchas veces se hace a través de editores de texto enriquecidos, como Microsoft Word, que pueden modificar las comillas del código, rompiéndolo. Es recomendable enviar el código a través de editores de texto simples o repositorios de código.
#2. No añadir el snippet del contenedor en todas las páginas. No es suficiente con instalar GTM solo en la página de inicio; debe estar presente en todas las páginas del sitio. La mayoría de los sitios modernos gestionan esto automáticamente, pero siempre es bueno verificar.
Preguntas frecuentes sobre Google Tag Manager
He descrito el escenario ideal para la instalación de Google Tag Manager:
El código <script> debe ir en <head> (generalmente antes de cerrar </head>).
El código <noscript> debe ir después de la etiqueta de apertura <body>.
Sin embargo, en la práctica, pueden surgir circunstancias limitadas. Examinemos algunas preguntas frecuentes y sus respuestas:
¿Puedo colocar el código noscript en otro lugar que no sea justo después de la etiqueta body?
Sí, puedes. Esto puede suceder cuando trabajas con sistemas de gestión de contenido limitados que no permiten el acceso directo al código fuente y solo ofrecen un campo para pegar códigos de seguimiento.
Aunque no es lo más recomendable, es posible colocar ambos códigos en la sección <body>. Sin embargo, si planeas realizar pruebas A/B, debes asegurarte de colocar el código en <head> para que tus experimentos funcionen correctamente.
¿Puedo eliminar la parte noscript y usar solo script?
Sí. Si no te importa no realizar seguimiento a aquellos que tienen JavaScript deshabilitado, puedes prescindir de la parte noscript. Sin embargo, recuerda que colocarla en <head> crearía un HTML no conforme, ya que un iframe no debería estar ahí.
Instalé GTM hace un par de años; ambos códigos están en body. ¿Es un problema?
No. Hasta finales de 2016, Google recomendaba colocar el código de GTM completo en <body>. Aunque puedes seguir funcionando, podrías perder algunos datos de seguimiento, ya que GTM en <body> carga más tarde que en <head>.
Si tienes la oportunidad, considera mover el código <script> a <head> para mejorar la eficiencia del seguimiento.
Cómo configurar e instalar Google Tag Manager
Sigue las instrucciones proporcionadas por Google para instalar el código de Google Tag Manager. Lo más recomendable es colocar el código <script> en <head> de tu sitio, y el código <noscript> en el cuerpo, preferiblemente justo después de la etiqueta <body>.
Esta estrategia garantiza que tus etiquetas de marketing en GTM se activen lo más rápido posible, minimizando la pérdida de datos. Recuerda que cuanto más bajo esté el código de Google Tag Manager en el código de tu sitio, más tarde se activarán tus etiquetas, lo que podría resultar en la pérdida de información valiosa.
Si utilizas un CMS popular como WordPress, busca plugins listos para usar que faciliten la instalación de Google Tag Manager con solo unos clics.
Para ofrecer las mejores experiencias, utilizamos tecnologías como las cookies para almacenar y/o acceder a la información del dispositivo. El consentimiento de estas tecnologías nos permitirá procesar datos como el comportamiento de navegación o las identificaciones únicas en este sitio. No consentir o retirar el consentimiento, puede afectar negativamente a ciertas características y funciones.
Funcional
Siempre activo
El almacenamiento o acceso técnico es estrictamente necesario para el propósito legítimo de permitir el uso de un servicio específico explícitamente solicitado por el abonado o usuario, o con el único propósito de llevar a cabo la transmisión de una comunicación a través de una red de comunicaciones electrónicas.
Preferencias
El almacenamiento o acceso técnico es necesario para la finalidad legítima de almacenar preferencias no solicitadas por el abonado o usuario.
Estadísticas
El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos.El almacenamiento o acceso técnico que se utiliza exclusivamente con fines estadísticos anónimos. Sin un requerimiento, el cumplimiento voluntario por parte de tu Proveedor de servicios de Internet, o los registros adicionales de un tercero, la información almacenada o recuperada sólo para este propósito no se puede utilizar para identificarte.
Marketing
El almacenamiento o acceso técnico es necesario para crear perfiles de usuario para enviar publicidad, o para rastrear al usuario en una web o en varias web con fines de marketing similares.
