Tutorial para aprender a emplearlo Google Tag Manager desde cero

Con Google Tag Mánager podrás decir adiós a meterte en todas y cada una de las webs a instalar el script de turno. Se acabó perder horas configurando acontecimientos uno a uno, proyecto por proyecto.

Espera, que eso no es todo…

¿Y si además pudieras sacarle más partido a Google Analytics y recopilar datos de tus usuarios que parecían imposibles de saber? Porque si te agradan los datos, Analytics se te queda corto y deseas que no se te escape nada de lo que sucede en tu web, ésta es tu herramienta.

Ya sabes lo que afirman, el tiempo es oro, y el valor de los datos también. De ahí que tienes que comenzar a usar Google Tag Manager desde ya mismo.

En este post aprenderás a configurar Tag Manager desde cero, step by step. Además, veremos a configurar algunas de las implementaciones básicas a fin de que seas capaz de configurar el código de Analytics o bien medir el scroll de los usuarios de tu web.

¡Empezamos!

¿Que me voy a encontrar en este artículo?

Back to top

1) Qué es Google Tag Mánager y para qué sirve

Google Tag Mánager es un gestor de etiquetas, creada con el propósito de hacerte la vida más fácil a la hora de administrar la analítica de tu web/app.

Es una de lasque nos ofrece en su suitejunto a Analytics, Data Studio, Optimize, Surveys, Display y Search Ads. Nos deja medir datos utilizando pixels de Google (Analytics, Ads…) o bien herramientas externas como Fb, Hotjar… etc.

Podemos emplearla gratuitamente, aunque si te sobra el dinero por sólo ciento cincuenta mil dólares anuales puedes tener la versión de pago, la suite trescientos sesenta.

Back to top

2) Ventajas y desventajas de usarlo

Todo en esta vida tiene inconvenientes y ventajas, mas en el caso de Tag Mánager, los pros superan sobradamente a las desventajasque pueda tener, veamos:

2.1) Principales ventajas:

2.1.1) 1. Velocidad para implementar nuevas configuraciones o editar cambios

Situación habitual en cualquier empresa mediana (de las grandes ni charlemos). El departamento de marketing quiere saber si los usuarios hacen o no hacen scroll y en qué porcentaje.

Para ello charlan con el jefe de Sistemas, quien accede y pone a la cola de todas y cada una de las tareas pendientes la implementación del seguimiento de scroll de los usuarios.

Antes de publicarse, por precaución, se publica la configuración en la versión de testing. Al ver que todo está ok, un mes o un par de meses después de pedirlo el equipo de marketing ya tiene lo que quería.

Esto es lo común y como puedes entender, ante cualquier cambio, las cosas tardan muuuucho en ejecutarse.

Con Google Tag Mánager el proceso es más rápido en tanto que sólo necesitarán al equipo de Sistemas para la instalación, a partir de ahí cualquier cambio podrán ejecutarlo ellos mismos.

En el caso de un proyecto personal donde la tónica es hacer las cosas a lo Juan Palomo, el beneficio reside en no tener que hacer desarrollos a la medida o tener que añadir líneas de código en lugares específicos debiendo abrir para ello decenas de ficheros.

2.1.2) 2. Todas las tags gestionadas desde el mismo sitio

Esta es una enorme ventaja ya que algunosno se introducen en todas y cada una de las páginas.

Un ejemplo sería el píxel de conversión de Google Ads el cuál sólo queremos que se active en el momento en que un usuario llega a la thank you page.

Si no usamos Tag Mánager podemos tener unas tags en el header.php, otras en el footer.php, otras en una página gracias para el formulario, otras en el weblog que es un subdominio que usa un CMS distinto… la dispersión y el follón puede ser considerable si el proyecto tiene cierta envergadura. Con GTM ganamos en productividad teniendo todo en exactamente el mismo lugar.

2.1.3) 3. Configuraciones reutilizables

Para aquellos que trabajan en agencias o tienen varios proyectos, esto es una gran ventaja. Puedes importar/exportar configuraciones de una cuenta de Tag Manager a otra, de un proyecto a otro, lo que facilita las cosas enormemente.

Configuramos una vez y replicamos en otras webs.

2.1.4) 4. Supervisor de versiones

Una de las mejores características que tiene Tag Manager es su supervisor de versiones.

Si trabajáis en equipo es fácil que la información a veces se pierda y uno no sepa lo que se ha hecho o bien dejado de hacer. En el supervisor de versiones podemos anotar cada vez que publicamos un cambio una descripción de lo que hemos hecho. Algo realmente útil para el que venga después.

Además, si nos equivocamos, ¡que no cunda el pánico! Podemos restablecer alguna de las versiones anteriores que funcionaban adecuadamente.

2.1.5) 5. Modo testing para chequear el adecuado funcionamiento

Normalmente cuando utilizas Analytics y quieres revisar que está registrando datos adecuadamente te diriges a la opción real time.

Primero haces la configuración (puedes tardar 1 minuto o bien 1 hora) y luego chequeas que todo está ok. Imagínate el proceso en una mediana empresa, solicitas un cambio al equipo de IT, lo ejecutan semanas después, verificas que está mal, lo vuelves a solicitar… una tortura.

En Tag Mánager el proceso es inmediato, puedes chequear cualquier implementación antes de publicarla y en tiempo real.

2.1.6) 6. Configuración de eventos fácilmente

La configuración de eventos no es difícil mas es preciso tener unas nociones básicas de html (incluso javascript) para incorporar una pequeña línea de código sin cargarnos la web.

Con Tag Mánager esto se puede realizar de forma más fácil y sobre todo sin el riesgo de que un mal cierre de etiqueta rompa el diseño de la web.

2.1.7) 7. Recursos y foros para aprender y solucionar dudas

GTM no tiene un equipo de soporte como tal como puede ser el de Google Ads. No obstante es una herramienta con mucha documentación online, blogs, foros de discusión donde consultar dudas e ir aprendiendo.

2.2) Principales desventajas:

2.2.1) 1. Curva de aprendizaje

Google Tag Mánager no es la herramienta más difícil del mundo mas sí es preciso unos conocimientos mínimos tanto de analítica como de desarrollo web para sacarle partido.

Desde entonces si quieres dominarla como el crack deentonces vas a necesitar conocimientos técnicos y muchas horas de aprendizaje.

Back to top

3) Cómo instalar Google Tag Manager paso a paso

Lo primero que tenemos que hacer es.

3.1) Panel principal y panel de cuenta

Cada vez que accedamos a GTM, lo vamos a hacer a su panel primordial, donde nos aparecerán las cuentas a las que tenemos acceso.

Una vez dentro, clicamos en Crear cuentay se nos abrirás una ventana donde iremos introduciendo los datos que nos solicitan y por último pulsaremos Crear.

El proceso es bastante intuitivo y no tiene pérdida.

Dentro de la cuenta que terminamos de crear, navegaremos entre las diferentes opciones a través de un menú primordial y un sidebar a la izquierda.

 

El código que precisamos introducir en nuestra web, lo encontraremos en el menú principal: Administrador > Instalar Google Tag Manager

Seguiremos las indicaciones de Google, insertando una parte del código en la etiqueta <head> y otra parte en <body>. Caso de que usemos Wordpress, tenemos varias opciones:

1. Instalarlo a través de nuestro Theme:cada vez más plantillas permiten introducir código en áreas específicas de nuestro html.
2. Directamente en el fichero header.php: esta opción sólo es recomendable si tienes nociones de php.
3. A través de complementos específicos.

Personalmente no soy amigo de utilizar plugins si puedo hacer las cosas mismo ya que la cantidad de recursos innecesarios que cargan puede suponer un problema. Por este motivo suelo elegir la opción uno o bien la dos.

Si tu web utiliza otro Content Management System o es un desarrollo a medida el resultado final no cambia, una de las tag tiene que estar en <head> y la otra en <body>, mientras que esto se cumpla la manera de implementación queda en un segundo plano.

“Consejo: Si tienes dificultad para instalar justo las etiquetas en head y body no te obsesiones y pierdas horas de trabajo, prueba si funciona apropiadamente aunque estén en otro lugar, no suele haber inconvenientes de trackeo.”

“Consejo: Si tienes complicad para instalar justo las etiquetas en head y body no te obsesiones y pierdas horas de trabajo, prueba si funciona apropiadamente si bien estén en otro lugar, no acostumbra a haber inconvenientes de trackeo.”

3.2) ¿Cómo saber si funciona?

De momento no hemos tocado nada a nivel de Analytics, asi que lo único que debemos comprobar es si efectivamente el script se está “pintando” en el código fuente (CTRL + U).

Más adelante, cuando hayamos configurado nuestras primeras tag, utilizaremos la opciónpara comprobar que todo está ok.

Back to top

4) Cómo emplear Google Tag Manager: conceptos y funciones de la herramienta

Veamos todo cuanto puedes hacer una vez en la herramienta.

4.1) Cuentas

En GTM podemos organizar nuestros diferentes proyectos/clientes en cuentas.

4.2) Contenedores

Cada cuenta por su parte puede estar compuesta por uno o bien varios contenedores. Cada contenedor tiene su propio ID de seguimiento.

Por ejemplo, si un proyecto tiene una web y una aplicación, vamos a crear una cuenta con 2 contenedores, uno para la web y otro para la app.

El menú principal está compuesto por cinco elementos:

1. Espacio de trabajo:donde realizar toda la implementación de analítica.
   1. Vista previa: sirve para testear si las tag o bien eventos se están disparando.
   2. Enviar: opción para guardar los cambios que hayamos hecho.
2. Versiones:controlador de versiones donde quedan registrados todos los cambios. Muy útil para trabajar en equipo y a nivel de backup.
3. Administrador:donde efectuar configuraciones a nivel de cuenta o de contenedor.

1. Vista previa: sirve para testear si las tag o eventos se están disparando.
2. Enviar: opción para guardar los cambios que hayamos hecho.

El sidebar izquierdo se despliega cuando estamos en la opción del menú Espacio de trabajo. Es donde vamos a efectuar las configuraciones a nivel analítica.

Lo esencial es saber para qué sirven estas tres: Etiquetas, Activadoresy Variables. Para explicarlo me serviré del ejemplo del pixel de seguimiento de Google Analytics.

• Etiqueta: es lo que va a entender el código de seguimiento. En exactamente la misma definiremos el activador y la variable.
• Activador: es la acción o evento que dispara la etiqueta. En este caso deseamos que se activa en todas las páginas toda vez que se carga una página.
• Variable: aquí especificamos el ID de seguimiento, UA-xxxxxxxxx-x

Conoce todas y cada una de las funciones que ofrece GTM aquí:

Back to top

5) Cómo instalar el pixel de Google Analytics

Seleccionamos la opción Etiquetas del sidebar izquierdo y pulsamos en Nueva. Los pasos que vamos a proseguirse son:

1. Configurar la etiqueta. Escogemos la opción predefinida de Google Analytics Universal
2. Configurar la variable. Crearemos una nueva variable con nuestro UA.
   
3. Configurar el activador. Cuando le hemos dado a Nueva etiqueta, nos aparecían dos opciones: Configurar etiqueta(que son los pasos que hemos realizado anteriormente) y Activación.

En el caso de GA, nos interesa que la tag se active en todas las páginas para poder registrar todo el tráfico de nuestra web. En consecuencia escogeremos página vistay más tarde todas las páginas.

Back to top

6) Cómo instalar el pixel de Google Ads

La dinámica es la misma, configuramos etiqueta, variable y activador.

Tenemos que rellenar como mínimo los datos de ID y etiqueta.

Estos datos los vamos a sacar de Google Ads.

 

Si previamente elegimos que el activador saltase en todas las páginas, ahora nos interesa que sólo lo haga cuando el usuario llega a la thank you page para poder medir la conversión de la compra o lead.

Back to top

7) Cómo instalar otros pixeles

Hemos visto que tanto Google Analytics como Google Ads tienen sus configuraciones predefinidas. Lo mismo ocurre con muchas de las herramientas más conocidas del mercado.

Pero, ¿qué ocurre si queremos emplear el pixel y no encontramos una configuración predefinida en Tag Mánager?En estos casos elegiremos la opción de insertar HTML.

Back to top

8) Cómo medir eventos de llamada

Ahora veremos cómo podemos medir las llamadas con Google Tag Manager. La dinámica es exactamente la misma, pero ojo, ahora no estamos midiendo páginas vistas. Ahora lo que queremos medir es en el momento en que un usuario hace click en el botón de llamar.

Por ello escogemos Acontecimiento como género de seguimiento. Tanto la categoría como la acción podemos editarla como queramos. Caso de que tengamos diferentes teléfonos en la web, podemos usar como etiqueta variables integradas de GTM.

En este caso he escogido Clic url para luego en Analytics ver cuántas veces han clicado en cada uno de ellos de los teléfonos.

En cuanto a la activación, escogemos los click que se hagan en número de teléfono. En este artículo puedes ver cómo se.

Otro evento, en un caso así para medir hasta dónde llegan los usuarios haciendo scroll en la web. Misma configuración que para el trackeo de llamadas, la diferencia está en que en un caso así como etiqueta escogemos Scroll Depth Threshold.

De esta forma, cuando examinemos el evento scroll en Analytics, podremos ver cuántos eventos se han disparado de usuarios que han llegado al 50 por ciento de la página, al veinticinco por cien … etc.

Para poder compilar los datos de esos porcentajes, nos vamos a la configuración del activador.

Seleccionamos la opción Profundidad de desplazamiento, y en porcentajes ponemos, separados por comas, los porcentajes de scroll que queremos medir.

Back to top

9) Cómo medir acontecimientos de Youtube

Con Tag Manager también podemos saber si la gente visualiza los vídeos de nuestra web, cuáles específicamente y durante cuántos segundos o bien porcentaje del vídeo han visualizado.

Volvemos a reiterar la misma configuración que en acontecimientos anteriores a menos que en este caso elegimos Video Title y Video Percent. De esta forma sabremos qué vídeos se ven y en qué porcentaje se visualizan.

En cuanto al activador, elegimos el que está ya creado para Youtube:

Y lo configuramos marcando los porcentajes que creamos recomendables separándolos por una coma.

Back to top

10) Cómo instalar el pixel de Fb, VWO, Optimizely… o cualquier herramienta que te propongas

Google prosigue trabajando y creando conectores de diferentes herramientas para que la instalación sea más fácil. No obstante aún faltan algunas de las herramientas/plataformas de marketing digital más esenciales como Fb.

En estos casos, escogemos la opción HTML personalizado:

Introducimos nuestro pixel de Fb (o la herramienta que vayamos a utilizar).

Como activador, escogeremos todas y cada una de las páginas o sólo algunas, según nos interese o según cuál sea la misión del pixel.

Por ejemplo, podemos implementar el pixel de Fb en todas y cada una de las páginas de nuestra web para obtener diferentes datos de navegación y audiencia que nos visita, o podemos seleccionar sólo la thank you pageen el en caso de que queramos medir conversiones cuando efectúan una compra.

Y hasta aquí esta completa guía de Google Tag Manager.

Back to top

11) Conclusiones

Como hemos visto las posibilidades que ofrece la herramienta son inmensas. Sin tener conocimientos avanzados de programación podemos llegar a medir acciones de los usuarios que no vienen configuradas nativamente en Analytics como los acontecimientos de scroll.

Al final es una herramienta para hacer más en menos tiempo. Si deseas aprender más sobre productividad y la automatización de labores dentro del planeta del marketing on line te recomiendo que visites mi web.

Si te ha gustado el artículo, te invitamos a que dejestus impresiones o dudas en los comentarios para que podamos saber tu opinión.

Back to top