Google Tag Manager es una plataforma que te permitirá implementar o integrar diversas herramientas, tags, pixeles, entre otros recursos, de una manera fácil y administrada desde una interfaz gráfica.
Integrarlo en tu sitio web es muy sencillo, y a pesar de que puede implicar meterte con el código del mismo, es algo que puedes realizar aún sin tener conocimientos de programación, lo cual podrás aprender en este artículo.
Existen básicamente dos formas de integrar Google Tag Manager en tu sitio web, la primera es directamente con código, y la segunda es a través de alguna solución para tu CMS.
Integrar Google Tag Manager a través de código
Para obtener el código que debes pegar solo deberás ingresar a y crear un contenedor. Es importante considerar que cada contenedor generará un ID único con la estructuraGTM-XXXXXXX, el cual es parte fundamental del código que deberás colocar en tu sitio.
Este código se compone de dos secciones, una de las cuales deberás incluir dentro de las etiquetas <head></head> de tu sitio web. Los códigos tienen la siguiente estructura:
El código del head:
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->El código del body:
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->Como podemos observar, en ambos códigos se incluye el ID de nuestro contenedor (GTM-XXXXXXX), el resto del código no cambia, es decir, lo único que cambia en el código cada vez que hacemos una implementación de Google Tag Manager en diferentes sitios, es el ID de nuestro contenedor, por lo que normalmente tendremos un contenedor por cada sitio en el que queramos utilizar la plataforma.
Un ejemplo de cómo se vería el código ya pegando dentro de sus respectivas etiquetas sería:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Sitio Web</title>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<h1>Bienvenido a mi sitio web</h1>
</body>
</html>Es necesario que el código esté presente en cada página de nuestro sitio, al menos en aquellas en donde queremos que nuestras etiquetas surjan efecto.
Una vez colocados ambos códigos, es suficiente para comenzar a utilizar Google Tag Manager en nuestro sitio.
Integrar Google Tag Manager a través de un plugin
Otra alternativa si utilizas un CMS con tu sitio web es utilizar un plugin, o una solución específica para el gestor de contenidos que estés usando.
Uno de los escenarios más comunes es a través de WordPress, CMS para el cual Google ha creado un plugin oficial llamado Google Site Kit.
Una ventaja importante de este Plugin es que de manera automática se desactiva cuando se encuentra en el escritorio de WordPress, lo que ayuda a que tengamos datos sucios con acciones detectadas dentro de las secciones administrativas de nuestro sitio web.