Google Tag Manager: Creación de cuenta, variables, etiquetas, disparadores y etiqueta de Analytics

Tag Manager

Como ya adelantamos en el post sobre conceptos básicos de Google Tag Manager, esta potente herramienta contenedora de etiquetas nos va a permitir medir todas las acciones que pasan en nuestro sitio web. También adelantamos conceptualmente, para qué servía y cuáles eran los factores en torno a los que gira el funcionamiento de Google Tag Manager: Etiquetas, activadores y variables. Te recomiendo que le eches un vistazo si aún no lo has leído. 😉

Artículo recomendado🤓: Conceptos básicos de Google Tag Manager

En este artículo vamos a ir más allá para saber cómo instalar Google Tag Manager correctamente: Crearemos una cuenta en GTM desde cero, profundizaremos en estos conceptos clave, veremos cómo podemos actuar con la información que recoge la herramienta y cómo podemos vincularlo con Google Analytics. En definitiva, un montón de posibilidades que iremos explorando y que merecen sin duda la pena. ¿Comenzamos? 🚀

Un breve repaso a Google Tag Manager

Google Tag Manager es el gestor-administrador de etiquetas de Google. Vale, y podríamos preguntarnos ¿Qué es una etiqueta? Una etiqueta, es una porción de código escrito en lenguaje Java Script que se inserta en el código HTML de un sitio web, para saber qué es lo que sucede y poder crear así audiencias segmentadas que nos permitan tomar decisiones más efectivas en nuestras mediciones.

Pero claro, a la hora de implementar acciones de analítica web, no sólo tendremos una única etiqueta, todo lo contrario, tendremos múltiples etiquetas y cada una de ellas nos devolverá información diferente del comportamiento de nuestros usuarios: Etiquetas de Facebook, Google Adwords, Google Analytics, etc.

La ventaja que tiene Google Tag Manager es que ofrece la posibilidad de agrupar en una porción de código todos los que hemos mencionado antes, y muchos más.

Tag Manager

Como vimos, las tres patas en torno a las cuales gira Google Tag Manager son: Etiquetas, Triggers o activadores y las variables.

Etiquetas: Son fragmentos de código JavaScript que envía información a terceros.

Con las etiquetas, GTM envía por ejemplo información a Google Analytics a través de eventos para leer la información, a Google Adwords o a Facebook Ads.

Triggers o activadores: Las etiquetas son activadas cuando se cumplen unas directrices predefinidas. Estas reglas son los triggers o activadores.

Variables: Las variables son todos los datos a los que tienen acceso los triggers o activadores. Estos pueden ser a su vez fijos o dinámicos (Valor de una URL, valor de una transacción…)

Vamos a poner un ejemplo: Si el valor de una URL es igual a “Home”, se activa el trigger y, al activarse el trigger, se lanza la etiqueta. Esto puede parecer muy engorroso al principio, pero es de gran utilidad y nos va a facilitar la vida mucho. ¡Ya lo veréis! 👍

Tag Manager

Como se aprecia en la figura, una cuenta puede tener un (o más de uno) contenedor, que a su vez tiene una o varias etiquetas y cada etiqueta, tiene su trigger o activador.

La mejor forma de ver todo esto más en detalle es hacerlo en la propia herramienta. Para ello, voy a ir a Google Tag Manager y voy a crear una nueva cuenta, de esta manera vamos a ir viendo paso a paso todo el proceso. ¿Me sigues? ¡Vamos allá! 👌

Cómo instalar Google Tag Manager

El primer paso que tenemos que dar es, loguearnos con nuestra cuenta de Google e ir a GTM. Allí nos aparecerá una interfaz como la que se muestra en la figura. Hacemos clic, en crear cuenta:

tag manager

La siguiente ventana que nos aparece, es la correspondiente a todos los datos a nivel de cuenta y de contenedor que Google Tag Manager nos solicita. Para nuestro ejemplo, vamos a utilizar los datos de mi sitio web, por lo que en cada campo incluiré los míos. Como es lógico, aquí cada uno tendréis que introducir los vuestros propios.

Una vez rellenados los campos de nombre de cuenta y contenedor, seleccionamos si la plataforma objetivo es: Un sitio web, una aplicación iOS, aplicación de Android o para usarlo con tecnología AMP (Accelerated Mobile Pages). En nuestro caso, seleccionamos sitio web y hacemos clic en crear.

¡Genial! Ya hemos accedido al panel de control de Google Tag Manager. Lo primero que veremos es una ventana pop-up donde GTM nos dirá que copiemos el siguiente fragmento de código JS en la sección <head> de nuestro sitio:

<!– 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-NZXSVKH’);</script>

<!– End Google Tag Manager –>

De momento no lo vamos a insertar ya que, primero vamos a familiarizarnos con la herramienta. Siempre podremos acceder a él haciendo clic en el identificador de GTM, tal y como vemos en la imagen:

tag manager

Ya en la interfaz, nos encontramos en el “espacio de trabajo”. Cuando comencemos a realizar cambios, estos quedarán reflejados en la pestaña de “versiones”. Como de momento no tenemos nada, aparece vacío:

tag manager

Cualquier modificación a nivel de cuenta o de contenedor, lo veremos accediendo a la pestaña de “Administrador”:

tag manager

Si quisiéramos compartir nuestra cuenta con otro usuario, lo podemos hacer desde la pestaña de cuenta > administrador de usuarios y hacer clic en el botón “+”:

tag manager

En mi caso yo soy el administrador único. Esto también se puede extender a nivel de contenedor, yendo a la pestaña de contenedor > administración de usuarios:

tag manager

Aquí podemos introducir las direcciones de los usuarios que queremos invitar para compartir nuestro contenedor, así como darles permiso de accesos a nivel de publicación, aprobación, edición y lectura.

Volviendo al panel de administrador, en la pestaña de “contenedor” tenemos también la opción de importar o exportar un contenedor y/o vincular con una cuenta externa, o trabajar dentro de un entorno cerrado. Esto se puede aplicar para, por ejemplo, si estamos trabajando en un entorno de pruebas y no queremos que nadie acceda a GTM. De momento, con saber que tenemos estas opciones disponibles, es suficiente.

Volviendo al “espacio de trabajo”, nos queda por ver la pestaña de “vista previa”, que nos será de gran utilidad para si estamos realizando pruebas con etiquetas, antes de publicarlas acceder a ellas con esta vista:

tag manager

En área de trabajo, si se da el caso de que queramos compartir nuestro espacio, Google Tag Manager nos da la opción de añadir hasta 3, tal y como vemos en la figura:

tag manager

Por defecto tendremos nuestro workspace creado, pero como hemos dicho, podremos añadir hasta 2 más.

Dentro del panel de control principal, tenemos a modo de lista, todas las funcionalidades que iremos utilizando para trabajar:

tag manager

Carpetas

La pestaña “carpetas” nos permitirá, como su nombre indica, crear carpetas donde iremos añadiendo todas las etiquetas que vayamos creando. Vamos a generar, por ejemplo, una carpeta que se llame “Analítica Web”, donde añadiremos todas aquellas que pertenecen a este campo del marketing digital:

tag manager

tag manager

Variables

Vamos con la pestaña de variables. Recordemos que las variables son aquellos datos que, comparadas con un valor, activarán los disparadores y estos a su vez lanzarán las etiquetas. Por defecto tenemos las variables integradas, que son aquellas que nos vienen predefinidas por Google Tag Manager y las variables definidas por el usuario:

tag manager

Si hacemos clic en configurar, dentro de las variables integradas, se nos desplegará una lista con todas aquellas que podemos incluir. Por ejemplo, vamos a añadir de esta lista, aquellas que tienen que ver con eventos de clics, ya que son de las más utilizadas, aunque existen muchas más: variables de utilidades, de errores, de formularios, de vídeos, de desplazamiento y de visibilidad. Seleccionamos todas las variables de clic y las añadimos a la caja de variables integradas, tal y como mostramos en la imagen:

tag manager

Luego tenemos las variables definidas por el usuario. Aquí podremos añadir variables personalizadas. Para el caso de nuestro post, configuraremos como variable principal definida por el usuario, la que corresponde a Google Analytics.

tag manager

Activadores

Con los activadores, como vimos podremos lanzar las etiquetas, en base a una serie de directrices marcadas por las variables. En Google Tag Manager tenemos los siguientes tipos de activadores:

De página vista (DOM preparado, página vista, ventana cargada): Son Triggers a nivel de carga de la página.

De Clics (Solo enlaces, todos los elementos): Estos activadores se utilizan para lanzar etiquetas cuando los usuarios hacen clic en enlaces o en todos los elementos de una página).

De interacción con el usuario (Envío de formulario, profundidad de desplazamiento, visbilidad del elemento, vídeo de youtube): Estos Triggers disparan etiquetas cuando un usuario realiza estas acciones en la página. Este tipo de disparadores son interesantes para hacer remarketing a tu audiencia las posibilidades son muy amplias.

Otros (Cambio en el historial, error de JavaScript, evento personalizado, grupo de actividades y temporizador).

Etiquetas

En la pestaña de “etiquetas” añadiremos todas aquellas que vayamos a configurar, así como los disparadores que las activan. Hay que reseñar que se pueden realizar excepciones o restricciones a nivel de disparadores, para, en el caso de que nos interese activar o no las mismas.

tag manager

Pasos para instalar Google Tag Manager

Ya hemos dado un repaso general a toda la interfaz de la herramienta de Google Tag Manager. El siguiente paso, será incluir el código de Tag Manager en nuestro sitio web. Para ello existen varias formas de realizarlo. Nosotros, para ejemplificar el artículo y no complicarnos con tema de código fuente, utilizaremos un Plugin para WordPress que nos va a ser de muchísima utilidad.

Como vimos el código de GTM, tiene el siguiente aspecto:

tag manager

Consta de dos partes: Una que se incluirá en la etiqueta <head> de nuestro sitio web. Otra que (Aunque no es tan importante), llamada <noscript> y que habrá que incluir después de la etiqueta <body>. Reseñar que este fragmento de código es para aquellos sitios que no tienen activado el código java script.

Si queremos insertar el código a mano, habrá que realizarlo a través del archivo Functions.php

Dependiendo del tema de WordPress que utilices en tu sitio, existen plugins como por ejemplo el de “Genesis Simple Hook” que permite insertar la primera parte del código en el hook genesis_doctype y la segunda en el hook genesis_before.

NOTA: Esto funciona únicamente para aquellos que tengáis el Child Theme de Génesis.

Instalar Google Tag Manager con plugin para WordPress

Como cada WordPress es un mundo y cada uno utilizamos un tema diferente, y exclusivo para nuestro sitio web, como dijimos la manera más sencilla de instalar el código es a través de un plugin.

El plugin que vamos a utilizar se llama “Google Tag Manager For WordPress”. Para ello, vamos al repositorio de WordPress dentro de nuestro CMS. (Plugins > Añadir nuevo):

tag manager

Este plugin, tiene la ventaja de que podemos añadir una capa de datos (Data Layer), para enviar los datos a las diferentes herramientas de analítica web (Analytics, Adwords, Facebook Ads…)

Instalamos y activamos. Una vez dentro del plugin, lo primero que nos pedirá es el ID de Tag Manager. Para copiarlo, vamos a la interfaz de la herramienta y cogemos el código que tenemos en la parte superior derecha y lo insertamos en el plugin, tal y como vemos en la imagen a continuación, tras esto guardamos cambios:

tag manager

Antes de seguir es recomendable que instalemos una extensión de Chrome para verificar que el código se ha instalado correctamente. Esta extensión se llama “Tag Assistant”

Os dejo el enlace a la extensión:

👉Enlace a extensión Tag Assistant

Para que todo funcione a la perfección, es necesario que desde Google Tag Manager, enviemos una “versión” de los cambios realizados. Iremos a la interfaz principal de GTM y haremos clic en “enviar”, en la parte superior derecha.

Allí se nos abrirá una ventana donde tendremos que dar un nombre a la versión (En mi caso yo ya he realizado este paso, la he llamado “Versión 1.0) y enviarla. Después de esto, nos aparecerá en nuestra pantalla de panel de control, la versión publicada:

tag manager

Hecho este paso, y con la extensión de “Tag Assistant” de Google Chrome instalada, nos vamos a nuestro sitio web. Refrescamos la página y veremos cómo el icono de la extensión se vuelve de color verde. Esto quiere decir que nuestro código de Tag Manager está instalado y funcionando correctamente.

tag manager

Con el código ya funcionando, el siguiente paso que vamos a ver es cómo crear una etiqueta de Google Analytics para que Google Tag Manager realice un trackeo de las páginas vistas de mi sitio web. ¡Vamos a por ello! 💪

Creación de etiqueta de Google Tag Manager

En mi caso, yo ya tenía instalado el píxel de Google Analytics previamente, como puedes ver en la siguiente figura:

tag manager

Para que Google Tag Manager no registre duplicidades en las visitas, lo que tendremos que hacer antes de crear la etiqueta en el contenedor de Google Analytics, será una migración de código. No os preocupéis, es un paso muy sencillo. Vamos a ver como se hace.

Vamos a Google Analytics, (en mi caso he desactivado el filtro de exclusión de tráfico interno para ejemplificar mejor el post) y veremos cómo se está recogiendo mi visita desde la pestaña de “En tiempo real” > “Visión general”:

tag manager

Este seguimiento se está realizando a través del píxel de analytics, no con Google Tag Manager. Lo que vamos a hacer es, crear en Tag Manager dentro de nuestro contenedor la etiqueta, las variables y el disparador para medir las visitas de Analytics y una vez lanzada la etiqueta lo que haremos será borrar el ID de analytics (En mi caso a través de un plugin) y comprobar que todo funciona correctamente.

Lo primero será copiar nuestro ID de seguimiento de Google Analytics para el cual crearemos una variable en Tag Manager (Esto lo hacemos desde Administración > Configuración de la propiedad > ID de seguimiento:

tag manager

Ahora en Google Tag Manager, dentro de la interfaz principal, nos dirigimos a Variables> nueva variable definida por el usuario.

Le damos un nombre, en mi caso he elegido “GA-id”, y seleccionamos la variable de configuración de Google Analytics.

tag manager

En la siguiente pantalla añadimos el ID de Google Analytics, y en “configurar más opciones” añadiremos el campo «anonymizeIp» y le damos valor “true”. Esto es para cumplir con la RGDP (Ley de protección de datos)

Guardamos, y ya la tenemos reflejada en nuestro espacio de trabajo de Google Tag Manager:

tag manager

tag manager

Ahora nos disponemos a crear una nueva etiqueta. Vamos a Etiquetas >Nueva etiqueta y le damos de nuevo un nombre. Llegados a este punto, es importante que el nombre de la etiqueta lleve una coherencia para que no nos armemos mucho lío cuando tengamos un número considerable de ellas. Para nuestro caso he seleccionado como nombre: “GA –páginas vistas – todas las páginas (Es decir: Google Analytics, evento: páginas vistas, ocurrencia del evento: todas las páginas).

tag manager

Hacemos clic en “Configuración de la etiqueta” y seleccionamos: Google Analytics – Universal Analytics, tal y como se muestra en la imagen:

tag manager

En la siguiente ventana, marcaremos “Tipo de seguimiento”: Página vista y “Configuración de Google Analytics”: La variable que acabamos de crear “GA-id”:

tag manager

En disparadores, seleccionaremos “All Pages”. Con esta directriz, le diremos a Google Tag Manager que active la etiqueta para todas las páginas vistas de nuestra web. Guardamos la configuración:

tag manager

Bien, ya tenemos todo configurado, ahora lo que tenemos que hacer es volver a la interfaz y activar la “Vista previa”. Esta acción nos desplegará una ventana en modo Debugger en nuestro navegador y podremos así ver qué etiquetas están activadas:

tag manager

Observamos con el modo Debugger, como efectivamente se ha disparado la etiqueta que hemos configurado en Tag Manager. Si navegamos a otras páginas y comprobamos:

tag manager

Vemos que funciona perfectamente.

En la interfaz principal vamos a publicar nuestros cambios realizados para que efectivamente, Google Analytics recoja los datos de las visitas.

Antes tendremos que borrar el ID de Analytics que tengamos en nuestro WordPress (Para evitar duplicidades en las visitas).

Si en la extensión de Chrome de Tag Assistant, vemos que la etiqueta de GA tiene color naranja, es que está duplicando el código del ID en dos píxeles distintos, el de Google Analytics y el de Google Tag Manager, por lo que te recomiendo que lo desactives, llegados a este punto. En la imagen te enseño como tendría que quedar:

tag manager

Volvemos a nuestro panel “En tiempo real” en Google Analytics y vemos si la visita se ha registrado correctamente:

tag manager

¡¡Y ya está!! 😎  Ya hemos aprendido cómo configurar desde la herramienta de GTM la etiqueta de Google Analytics. Esto se puede replicar para Adwords, Facebook Ads, Instagram Ads…y en general todas aquellas plataformas que tengan su píxel de seguimiento propio, ya que podremos incluirlo en Tag Manager para trabajar sólo con ella. ¿Fácil no? Espero que te haya sido de utilidad.

Si te ha gustado el artículo, compártelo en tus redes sociales ✅ y, si quieres recibir más contenido como este, suscríbete al boletín de Newsletter. 📝

Para ver todos los artículos de Analítica Web, pulsa 👉aquí👈

SUSCRÍBETE AL BOLETÍN DE NEWSLETTER

¿Te ha gustado el artículo?
Votos: 1 Promedio: 5
¡Comparte en tus redes sociales!