Tutorial para aprender a utilizarlo 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 pudieses sacarle más partido a Google Analytics y compendiar datos de tus usuarios que parecían imposibles de saber? Porque si te gustan los datos, Analytics se te queda corto y deseas que no se te escape nada de lo que ocurre en tu página 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 empezar a utilizar Google Tag Mánager desde ahora mismo.

En este post aprenderás a configurar Tag Mánager 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 página web.

¡Empezamos!

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

Back to top

1) Qué es Google Tag Manager y para qué sirve

Google Tag Manager es un gestor de etiquetas, creada con el objetivo 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 dentro de su suitejunto a Analytics, Data Studio, Optimize, Surveys, Display y Search Ads. Nos permite medir datos usando pixels de Google (Analytics, Ads…) o herramientas externas como Fb, Hotjar… etc.

Podemos emplearla gratis, 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, pero en el caso de Tag Manager, 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 hablan con el jefe de Sistemas, quien accede y pone a la cola de todas y cada una de las labores 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á O.K., un mes o un par de meses después de solicitarlo 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, a partir de 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, la ventaja radica en no tener que hacer desarrollos a medida o tener que añadir líneas de código en lugares concretos teniendo que abrir para esto decenas y decenas de ficheros.

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

Esta es una gran ventaja en tanto que algunosno se insertan en todas 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 empleamos 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 weblog que es un subdominio que utiliza un Content Management System distinto… la dispersión y el follón puede ser notable si el proyecto tiene cierta envergadura. Con GTM ganamos en productividad teniendo todo en el mismo sitio.

2.1.3) 3. Configuraciones reutilizables

Para aquellos que trabajan en agencias o bien tienen varios proyectos, esto es una gran ventaja. Puedes importar/exportar configuraciones de una cuenta de Tag Mánager 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. Controlador de versiones

Una de las mejores características que tiene Tag Mánager 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 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 apropiadamente.

2.1.5) 5. Modo testing para examinar el adecuado funcionamiento

Normalmente cuando utilizas Google Analytics y deseas comprobar que está registrando datos apropiadamente te diriges a la opción real time.

Primero haces la configuración (puedes tardar 1 minuto o 1 hora) y después chequeas que todo está O.K.. 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 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 eventos no es difícil mas es preciso tener unas nociones básicas de html (incluso javascript) para implementar una pequeña línea de código sin cargarnos la web.

Con Tag Mánager esto se puede realizar de manera más sencilla 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 de discusión 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 en línea, blogs, foros de discusión donde preguntar dudas y también 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 preciso unos conocimientos mínimos tanto de analítica como de desarrollo web para sacarle partido.

Desde luego si deseas 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 haremos 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 distintas opciones a través de un menú principal y un sidebar a la izquierda.

 

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

Seguiremos las indicaciones de Google, introduciendo una parte del código en la etiqueta <head> y otra parte en <body>. En el caso de que empleemos WP, tenemos múltiples 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 archivo 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 usar complementos si puedo hacer las cosas mismo puesto que la cantidad de recursos innecesarios que cargan puede suponer un inconveniente. Por esta razón suelo escoger la opción uno o la 2.

Si tu web utiliza otro CMS o bien 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 forma 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 correctamente si bien estén en otro lugar, no acostumbra a 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 correctamente aunque estén en otro lugar, no suele haber inconvenientes de trackeo.”

3.2) ¿Cómo saber si marcha?

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

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

Back to top

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

Veamos todo lo que 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 ID de seguimiento.

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

El menú primordial está compuesto por cinco elementos:

1. Espacio de trabajo:donde realizar toda la implementación de analítica.
   1. Vista previa: sirve para probar si las tag o 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 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 efectuar 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 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 bien acontecimiento que dispara la etiqueta. En este caso queremos que se activa en todas las páginas cada 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 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 2 opciones: Configurar etiqueta(que son los pasos que hemos efectuado anteriormente) 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. Por lo tanto 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 exactamente 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 anteriormente escogemos 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 utilizar el pixel y no encontramos una configuración predefinida en Tag Manager?En estos casos escogeremos la opción de insertar HTML.

Back to top

8) Cómo medir acontecimientos de llamada

Ahora vamos a ver cómo podemos medir las llamadas con Google Tag Manager. La dinámica es la misma, mas ojo, ahora no medimos páginas vistas. Ahora lo que queremos 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 queramos. En caso de que tengamos diferentes teléfonos en la página web, podemos emplear como etiqueta variables integradas de GTM.

En este caso he escogido Clic url para entonces 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 click 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 escogemos Scroll Depth Threshold.

De esta forma, cuando analicemos 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 veinticinco por ciento … etc.

Para poder compendiar 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 Mánager también podemos saber si la gente visualiza los vídeos de nuestra web, cuáles específicamente 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 a menos que en un caso así elegimos Video Title y Video Percent. De esta manera vamos a saber qué vídeos se ven y en qué porcentaje se visualizan.

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

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

Back to top

10) Cómo instalar el pixel de Facebook, VWO, Optimizely… o bien 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 ciertas herramientas/plataformas de marketing digital más esenciales como Facebook.

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

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

Como activador, escogeremos todas las páginas o sólo ciertas, según nos interese o bien según cuál sea la misión del pixel.

Por ejemplo, podemos implementar el pixel de Fb en todas las páginas de nuestra página web para conseguir diferentes datos de navegación y audiencia que nos visita, o podemos seleccionar sólo la thank you pageen el caso de que deseemos medir conversiones cuando realizan 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 quieres aprender más sobre productividad y la automatización de tareas dentro del planeta del marketing en línea te invito a que visites mi web.

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

Back to top