Tutorial para aprender a usarlo Google Tag Manager desde cero

Tutorial para aprender a usarlo Google Tag Manager desde cero

15 Jul 2020 in

Con Google Tag Manager podrás decir adiós a meterte en cada una de las webs a instalar el script de turno. Se acabó perder horas configurando eventos 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? Por el hecho de que si te gustan los datos, Analytics se te queda corto y quieres que no se te escape nada de lo que sucede en tu web, ésta es tu herramienta.

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

En este post vas a aprender a configurar Tag Mánager desde cero, step by step. Además, veremos a configurar ciertas implementaciones básicas a fin de que seas capaz de configurar el código de Analytics o medir el scroll de los usuarios de tu página 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 Manager es un gestor de etiquetas, creada con el propósito de hacerte la vida más fácil en el momento 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 herramientas externas como Facebook, Hotjar… etc.

Podemos utilizarla gratuitamente, si bien 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, pero 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. Rapidez para incorporar nuevas configuraciones o editar cambios

Situación frecuente en cualquier empresa mediana (de las grandes ni hablemos). 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 dos meses después de pedirlo el equipo de marketing ya tiene lo que quería.

Esto es lo habitual y como puedes comprender, 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, desde ahí cualquier cambio podrán ejecutarlo 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 medida o tener que añadir líneas de código en lugares concretos debiendo abrir para ello decenas y decenas de archivos.

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

Esta es una gran 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 deseamos que se active cuando un usuario llega a la thank you page.

Si no usamos Tag Manager 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 blog que es un subdominio que emplea 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 enorme 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 Mánager es su controlador de versiones.

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

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

2.1.5) 5. Modo testing para chequear el adecuado funcionamiento

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

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

En Tag Manager el proceso es inmediato, puedes examinar cualquier implementación antes de publicarla y en tiempo real.

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

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

Con Tag Mánager esto se puede efectuar 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 resolver 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 on-line, weblogs, foros donde preguntar 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 planeta mas sí es necesario 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 precisar conocimientos técnicos y muchas horas de aprendizaje.

Back to top

3) Cómo instalar Google Tag Mánager paso a paso

Lo primero que debemos hacer es.

3.1) Panel primordial 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 vamos a ir introduciendo los datos que nos solicitan y finalmente pulsaremos Crear.

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

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

 

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

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

  1. Instalarlo a través de nuestro Theme:cada vez más plantillas dejan insertar código en áreas específicas de nuestro html.
  2. Directamente en el fichero header.php: esta opción sólo es conveniente 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 escoger la opción uno o la 2.

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

“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 suele haber inconvenientes de trackeo.”

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

3.2) ¿Cómo saber si marcha?

De instante no hemos tocado nada a nivel de Analytics, asi que lo único que debemos revisar 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á O.K..

Back to top

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

Veamos todo cuanto puedes hacer una vez dentro de 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 múltiples contenedores. Cada contenedor tiene su propio ID de seguimiento.

Por ejemplo, si un proyecto tiene una web y una app, 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 testar si las tag o acontecimientos se están disparando.
    2. Enviar: opción para guardar los cambios que hayamos hecho.
  2. Versiones:controlador de versiones donde quedan registrados todos y cada uno de los cambios. Muy útil para trabajar en equipo y a nivel de backup.
  3. Administrador:donde realizar configuraciones a nivel de cuenta o de contenedor.
  1. Vista previa: sirve para probar si las tag o bien acontecimientos 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 realizar las configuraciones a nivel analítica.

Lo fundamental 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. Dentro de exactamente la misma definiremos el activador y la variable.
  • Activador: es la acción o evento que dispara la etiqueta. En el caso que nos ocupa deseamos que se activa en todas y cada una de las páginas toda vez que se carga una página.
  • Variable: aquí detallamos el ID de seguimiento, UA-xxxxxxxxx-x

Conoce todas 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. Elegimos la opción predefinida de Google Analytics Universal
  2. Configurar la variable. Vamos a crear 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 efectuado previamente) y Activación.

En el caso de GA, nos interesa que la tag se active en todas y cada una de las páginas para poder registrar todo el tráfico de nuestra página web. En consecuencia elegiremos 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 exactamente la misma, configuramos etiqueta, variable y activador.

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

Estos datos los sacaremos de Google Ads.

 

Si previamente escogemos que el activador brincase en todas y cada una de 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 adquisición o bien lead.

Back to top

7) Cómo instalar otros pixeles

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

Pero, ¿qué ocurre si deseamos utilizar el pixel y no hallamos una configuración predefinida en Tag Mánager?En estos casos elegiremos la opción de introducir 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 la misma, mas ojo, ahora no estamos midiendo páginas vistas. Ahora lo que deseamos medir es cuando un usuario hace clic 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 deseemos. En el caso de que tengamos diferentes teléfonos en la página web, podemos emplear como etiqueta variables integradas de GTM.

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

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

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

De esta forma, cuando examinemos el acontecimiento scroll en Analytics, vamos a poder ver cuántos eventos se han disparado de usuarios que han llegado al 50 por cien de la página, al 25 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 deseamos 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 en concreto y a lo largo de cuántos segundos o bien porcentaje del vídeo han visualizado.

Volvemos a reiterar exactamente la misma configuración que en acontecimientos precedentes salvo que en un caso así escogemos Vídeo Title y Vídeo Percent. Así sabremos qué vídeos se ven y en qué porcentaje se visualizan.

En cuanto al activador, escogemos 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 sigue trabajando y creando conectores de diferentes herramientas a fin de que la instalación sea más fácil. No obstante aún faltan algunas de las herramientas/plataformas de marketing digital más importantes como Facebook.

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

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

Como activador, seleccionaremos 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 Facebook en todas las páginas de nuestra web para obtener diferentes datos de navegación y audiencia que nos visita, o bien podemos escoger sólo la thank you pageen el en el caso de que deseemos medir conversiones cuando efectúan una adquiere.

Y hasta aquí esta completa guía de Google Tag Mánager.

Back to top

11) Conclusiones

Como hemos visto las posibilidades que ofrece la herramienta son enormes. 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 tareas dentro del mundo del marketing en línea te invito a que visites mi web.

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

Back to top
Share icon

ESTOS EXCLUSIVOS INFORMES GRATUITO REVELAN

7 SECRETOS DE EXPERTOS SEO QUE TE LLEVÁN AL 1#
7 SECRETOS DE EXPERTOS SEO QUE TE LLEVÁN AL 1# EN GOOGLE PARA GANAR 10.000s DE TRÁFICO DE CALIDAD GRATUITO - EN SÓLO 2 MESES
 

Los 7 pasos más poderosos para disparar tu ranking orgánico para ALCANZAR Y MANTENER un impresionante tráfico orgánico es TUYO.

Consigue gratis lo que el 1% de los expertos en SEO venden por miles de euros... y el otro 99% ni siquiera sabe que existe.


OBTEN MI INFORME GRATUITO
5 errores que debes evitar en tu sitio web de Drupal
Ebook - 5 errores que debes evitar en tu sitio web de Drupal (¡podrían costarte miles de euros!)
 

Este Ebook cubre 5 terribles errores que probablemente estés cometiendo ahora mismo con tu sitio web de Drupal.

¡Nº3 TE SORPRENDERÁ! Esta lectura de 10 minutos te ahorrará miles de euros.



OBTEN MI INFORME GRATUITO