La escalera podcast
#24: Google Tag Manager
October 29, 2019
En el episodio de hoy, siguiendo con el hilo temático que abrimos en el capítulo anterior, hablaremos sobre cómo recoger datos usando la famosa herramienta de Google: Tag manager. También dentro del ámbito personal comentaremos largos viajes, reformas sorpresa, y el lanzamiento de CUMA.
En el episodio de hoy, siguiendo con el hilo temático que abrimos en el capítulo anterior, hablaremos sobre cómo recoger datos usando la famosa herramienta de Google: Tag manager.


También dentro del ámbito personal comentaremos largos viajes, reformas sorpresa, y el lanzamiento de CUMA.

¿Qué es Google Tag Manager?

Para los que sois nuevos en este mundillo del marketing online, un tag manager es un contenedor que te permite inyectar código en tu página web sin necesidad de saber programar.

Está herramienta nos permite gestionar desde un mismo sitio externo a nuestra web todas las etiquetas y scripts, fragmentos de códigos, pixeles de remarketing, etc. 

Esto se hace de forma remota, sin necesidad de modificar el código de nuestra web, sin necesidad de contratar a un programador ni de tener que aprender código.

¿Ventajas del Tag Manager de Google?

Antes era el único gratuito, ya que el de Matomo se compraba como un plugin, pero recientemente lo han integrado en la propia herramienta. Así que la ventaja del de Google  es que esté dentro del mismo ecosistema que analytics, adwords, floodlight, optimize, etc.

¿Desventajas de usar un Tag Manager?

Que los bloqueadores de anuncios impiden la carga diferida de scripts si viene del tag manager, por lo que no podremos ser exhaustivos con la inyección de código. 

¿Cómo instalar en tu web Google Tag Manager?

Requiere de una primera integración en el código, esto sí que debéis de pedírselo al desarrollador o poneros vosotros manos a la obra. Si me lo pedís puedo dejar en la notas del programa el snippet que uso yo para WordPress que valdría para todas las webs, independientemente del theme usado.

Si os da miedito añadirlo al functions de vuestro tema, también podéis añadir el código mediante plugins como Google Tag Manager for WordPress de Thomas Geiger o “Duracell Tomi” o Metronet Tag Manager de Ronald Huereca.

De pago encontramos Google Marketing Tools de Devman, cuesta $99 y te permite añadir todo tipo de pixeles y trackeadores a tu web, no solo GTM. Es como si fuera un tag manager pero ya integrado en tu WordPress.

Para prestashop está el módulo de “Premium Google Tag Manager” que cuesta 80€ + IVA

¿De qué partes se compone?

Google Tag manager es una especie de Zapier, IFTTT o Integromat pero menos visual. Se compone de etiquetas (el código), de activadores y de variables.

Las etiquetas son el “QUÉ”, los snippets de código que queremos que se ejecuten, los activadores son el “CUÁNDO” queremos que se ejecuten y las variables son elementos repetitivos dentro de las etiquetas, o elementos de “captura” dentro de la web. Lo explicaremos mejor más adelante.

Las etiquetas de Google Tag Manager

Por defecto encontramos muchas etiquetas prediseñadas, sobre todo del entorno de Google, como puede ser la etiqueta de analytics, de google ads, de Floodlight u Optimize, aunque también tenemos otras tantas, entre las más famosas destacar la de criteo, hotjar, bing ads, pinterest, placed, quantcast, quora, shareaholic o twitter.

Por si acaso, Tag Manager se guarda un AS bajo la manga y es que permite añadir etiquetas en HTML por lo que literalmente se puede integrar con cualquier script.

Salvo está última, la etiquetas se suelen configurar mediante variables.


¿Para qué son las variables?

La variables de GTM sirven para no tener que estar repitiendo la introducción de códigos que son siempre los mismos o que los puede extraer Tag manager directamente de nuestra web, por ejemplo una variable puede ser el código de Universal Analytics o el ID de contenedor de Optimize, pero también podemos meter cosas como eventos personalizados, el nombre del dominio, la ruta de la página o incluso el referrer.

Si vamos un poco más allá podemos crear variables que capturan desde el ID del elemento que se ha pinchado, qué porcentaje de scroll se ha hecho, elementos de un formulario hasta cuántos segundo ha visto de un video…

Por defecto estas variables están ocultas, pero los podemos activar desde “Variables integradas”. Si hay algo que queramos medir que no esté en la lista pues ya tendremos que tirar de programador y que nos emita un evento que capturaremos con la variable de “Evento”. Un ejemplo sería enviar mediante un evento la localización del usuario.


Tipos de datos que puede capturar

Como hemos mencionado en la parte de Variables, se puede capturar absolutamente toda interacción con la web. Si no queremos complicarnos la vida lo más sencillo es integrar Hotjar, Yandex métrica, LiveSession o Smartlook, grabar a los usuarios y luego ver esos vídeos. Es lo más sencillo de implementar pero lo más difícil de medir de forma global.

Así que en mi opinión al principio sí que puedes grabar a los usuarios pero luego merece la pena que paramétricas la recepción de información. Por ejemplo puedes medir qué porcentaje de scroll hacen, cuantos campos rellenan de un formulario, en que CTA hacen clic para ir a la siguiente página, desde qué enlace nos llega más tráfico a una página de producto, cuánto tiempo pasan reproduciendo un vídeo o si interactúan con un Canvas.

Ya os digo que se puede medir todo desde las variables de tag manager, pero si no podéis crear vosotros (con la ayuda de un programador) un evento personalizado. Buscad antes porque hay plugins para estos casos, por ejemplo hay un plugin que te emite eventos cuando se interactúa con Gravity Forms, con contact form 7 o con ninja forms.

Y me arriesgo a decir que seguro que hay algún listado de eventos de WooCommerce desde los que capturar acciones como añadir al carrito, añadir unidades, o cambiar las opciones en un producto variable.

Los activadores por defecto del Tag Manager

Por defecto y el que más usaréis será el activador de “todas las páginas”. Esto hará que la etiqueta que habéis añadido se ejecute en todos los sitios de tu web, cómo puede ser la etiqueta de remarketing o de universal analytics.

Pero hay de todo tipo de activadores. Hay que tener bien claro la diferencia entre un activador y una variable (de captura). Un activador ejecuta la etiqueta, una variable recoge información.

Encontramos todo tipo de activadores, desde los de página vista, hacer click, envío de formularios, porcentaje de scroll en página, cuando un elemento de la web entra en la parte visible, la visualización de un video de youtube. Incluso un evento personalizado. En este caso igual que en la parte de variables, deberéis tirar de un programador que os haga estos eventos mediante JavaScript.

Testeo de la Google Tag Manager

Antes de publicar los cambios realizados, se puede testear y ver si se ejecutan como queremos los eventos, las etiquetas y los activadores. Para ello tenemos el modo “Vista Previa” que se activa desde el botón que se encuentra arriba a la derecha, al lado de “Enviar”.

Una vez activado este modo, iremos a nuestra página web y ahí veremos que nos sale una sección fija en la parte inferior de la pantalla. Según vayamos nosotros mismos ejecutando pasos se verán en esta nueva parte las etiquetas que s e están ejecutando y los datos que se están recogiendo. De esta manera podemos debuggear de forma sencilla nuestra labor en tag manager.

El potencial de usar esta herramienta

Desde controlar el rebote por ejemplo. Podemos definir un tiempo de rebote en analytics, ya que por defecto Analytics cuenta como rebote si no hacen click en nada, osea que si no van a otra página. El problema es si tenemos una página que responde a la intención de búsqueda, entonces no sería un rebote.

Otra cosa que podemos controlar:

Buenas prácticas

Usar un mismo activador para varias etiquetas, por ejemplo registrar un envío de formulario con Facebook, con Google Analytics y con Google Ads.

Me dejo en el tintero hablar sobre el nuevo panel de administración de WooCommerce, ya que no ha sido muy votado, pero si queréis que lo comentemos dejadlo en las notas del programa.

La semana del vecino Enric Cortiñas

  1. La fundación que nos pidió presupuesto al final se ha quedado con la opción de https://asociacioneswp.com.
  2. Me he apuntado al https://crowddays.com y al https://genesisbcn.com.
  3. Y he estado una semana de vacaciones por Madrid, Valladolid, Avila, Salamanca…
Locas historias de Antonio Sánchez

  1. Lanzamiento de CUMA.es, yujuuuuuuuuuuu.
  2. Hemos tenido reforma sorpresa a las 3 y media de la tarde. Hemos hecho un cambio en el salón, hemos sustituido la bombilla central por 6 ojos de buey repartidos, con luz cálida regulable controlada por voz y wifi.
  3. He estado preparando un presupuesto super detallado para una web de reservas de apartamentos vacacionales (en la que claramente se veía una mejoría de ingresos), con todos los detalles de las características y ventajas… y me lo han rechazado por precio, con la alusión de que la anterior web (que no funciona actualmente y no cumple su cometido) le costó una tercera parte del presupuesto. He preguntado a otros profesionales por si podía derivar el lead y lo que he conseguido es que me digan que el presupuesto que yo pasé era barato… 
  4. Nahuai Badiola, junto con Ester Solá y David Perálvarez (y Celi Garoe) organizan un evento de Génesis en Barcelona, lástima que me sea imposible esa clase de desplazamientos por cuestiones económicas…
  5. Jueves pasado Meetup de SEO en Cartagena, cómo realizar una auditoría.
  6. Vamos a comprar una impresora para imprimir todas las fotos del peque, vamos a optar por la HP tango https://amzn.to/2Jrp7JM que permite el primer año imprimir de forma muy económica si contratas intant ink, como una suscripción en el que sólo tienes que comprar el papel, la tinta te la mandan ellos.
  7. Visita de una amiga de Denia, así que finde distendido y tranquilote. Haciendo el disfraz de halloween para el peque y decorando calabazas.
La comunidad ha hablado

El ganador del sorteo ha sido David Vaquero, del podcast República Web y formador de IT y desarrollo, y ha escogido el libro de Rework!! Enhorabuena

En la comunidad de telegram han entrado tres fichajes potentes, por un lado Bruno de Miranda Santos que es ingeniero industrial y tiene el proyecto de ingenierosindustriales.com,por otro Mario Barceló, implementador WordPress de Barcelona pero por amor vive en Argentina, y por último Miguel de Castellón.

No hay que decir que estamos contentisimos del crecimiento orgánico que está teniendo el grupo, están dándose lugar conversaciones super interesantes, esta semana ha sido copada por el lanzamiento de cuma y todo el feedback, gracias chicos! Los vecinos han estado super atentos a todos los posibles fallos que tenían lugar en la web.

Próxima convocatoria

Nos podéis dejar vuestros comentarios, sugerencias y dudas en LaEscalera.pro. También podéis buscar nuestro grupo de Telegram en el que vamos definiendo entre todos los vecinos el futuro de este podcast.

Nos escuchamos el martes de la semana que viene a las 6, que pueden ser de la mañana o de la tarde, todo depende del nivel de procrastinación.