Google Tag Manager: La Guía Definitiva (Parte 1)

guia-google-tag-manager

[Post actualizado a día 1/11/2015]

Google Tag Manager (en este post hablaré de la última versión, la V2) es una de las herramientas menos usadas por la mayoría de empresas y blogs que he visto hasta ahora.

La analítica digital es una parte fundamental del marketing online y por no decir del CRO, donde sacamos todos los datos cuantitativos para poder saber qué áreas son las más interesantes para implementar tests A/B y mejorar el ratio de conversión de las mismas.  

La verdad que es una pena, ya que si estás usando Google Analytics (echa un vistazo a este artículo para crear una estrategia de medición adaptada a tu proyecto online) sabrás que para sacarle el máximo partido, necesitas implementar cierto código en tu página web, como por ejemplo la creación de eventos.

Pues bien, Google Tag Manager nos permite ser más ágiles, y por ende perder menos tiempo en todos las implementaciones técnicas (a base de código) que Analytics requiere. 

Los beneficios que nos aporta esto como marketers es la no dependencia de programadores para poder medir lo que nos dé la santa gana y así poder trabajar más rápido.

También hay que añadir que nuestra página cargará más rápido, ya que la cargaremos con un solo código (el de GTM) sin necesidad de extenderlo con snippets de Jvascript cada vez que queramos medir un evento nuevo. 

Esto es posible a que esta herramienta de Google funciona a través de etiquetas que simplemente minimizan el código a implementar en una página web o app y que además permiten administrar pequeñas partes de un código desde un mismo sitio sin necesidad de cambiar la página web o app en cuestión.

Aunque esto parezca intimidante, la verdad es que no lo es para nada. De hecho, es todo lo contrario.

Esta herramienta es muy simple e intuitiva de usar y sólo se requiere entender los conceptos que la componen así como la utilización de éstos.

Mi intención con la primera parte de este post es poder haceros entender de los beneficios que tiene la utilización de esta genial herramienta, su implementación (tanto en wordpress como en otros sites) y explicaros cómo crear dos tipos de eventos que nos pueden ser muy útiles como son los clicks en los botones en un mismo site (como puede ser el botón “enviar” en el formulario de contacto) y medir los cliks salientes (como podría ser medir los clicks hacia las redes sociales o nuestros clicks de afiliados)  sin necesidad de escribir una línea de código en vuestra web.

Bueno, pues como siempre digo, vamos a por ello!

google-tag-manager-cro

Entendiendo la estructura de Google Tag Manager

Antes de adentrarnos en la práctica, es esencial entender los conceptos que vamos a usar para poder exprimir al máximo todo lo que haremos de ahora en adelante.

GTM contiene 3 cosas que debemos entender:

  • Etiquetas: Son “snippets” de código que tienen funciones como medir el tráfico de un sitio web, medir las conversiones, etc.
  • Reglas: Las reglas determinan si una etiqueta concreta se activará o no.
  • Macros: Son unas condiciones que están dentro de las reglas y nos permiten establecer condiciones.

Estas son las características que usaremos para poder crear los eventos y las páginas virtuales (hablaré de esto en la segunda parte) y por ello las he mencionado, para que las entendáis y no os deis una hostia cuando estemos configurando todo.

El siguiente paso será la implementación en vuestro sitio web. Si estás usando Analytics, tendrás que eliminar el código de éste de tu sitio y reemplezarlo por el de GTM. 

¿Cómo se hace esto? Sigue leyendo que te lo explico paso a paso.

Implementación de GA en GTM

Lo primero que tenemos que hacer es crearnos una cuenta.

Una vez la tenemos creada, tenemos que crear un contenedor.

Un contenedor sirve para albergar las diferentes etiquetas que iremos añadiendo sin necesidad de ir creando otros contenedores cuando necesitamos implementar más etiquetas.

Digamos que el contenedor nos ayudará a meter todo lo que queramos medir en la herramienta de Analítica web de Google, sin necesidad de añadir o modificar el código cada dos por tres.

En un caso hipotético, quedaría así:

crear contenedor en google tag manager

 

En el nombre puedes poner el que quieras, pero yo te recomiendo que uses el nombre de tu página web para no liarte si es que vas a crear más contenedores.

Hacemos click en web y después a “create”. Haciendo esto, ya tendremos el contenedor creado. Como ves es muy sencillo. 

Una vez tenemos todo lo anterior hecho, nos encontraremos con un popup con el código que tendremos que poner en todas las páginas de nuestro site entra las etiquetas <body></body>:

poner código de Google Tag Manager

 

 

Si no quieres implementar estas líneas de código a pelo y estás usando wordpress, puedes usar un plugin gratuito que se llama WP Google Tag Manager y solamente tendrás que escribir la ID del contenedor que acabamos de escribir (lo que yo he borrado de la imagen de arriba).

 

Ahora que ya lo tienes todo instalado perfectamente, podremos acceder al dashboard de nuestra cuenta, para ir creando las etiquetas que necesitemos:

dashboard de Google Tag Manager

Como podéis ver, la nueva versión de Google Tag Manager ofrece una usabilidad muchísimo mejor que la primera versión ya que su interfície es más limpia y la información está presentada de una mejor forma. 

Perfecto, ahora que ya lo tenemos todo funcionando y ya hemos visto cómo la información de la aplicación está presentada, el siguiente paso será medir los eventos.

Creando eventos

Como has podido leer al principio del post, una de las principales ventajas de esta herramienta de Google es que puedes crear los famosos eventos de Analytics sin necesidad de escribir código.

Ahora, os voy a mostrar cómo crearlos e implementarlos. Veréis que es muy fácil aunque al principio puede parece un poco lioso!

Pero antes de adentrarnos en la creación de este tipo de eventos, tenemos que hacer una cosa para dejar todo listo. Simplemente tenemos que hacer click en “variables” y dejarlo como la imagen de abajo:

variables de google tag manager

Ahora sí que sí, vamos a por los eventos!

Para crear cualquier tipo de evento, se tiene que seguir una serie de pasos. El primer paso es crear un Trigger (los triggers los podemos encontrar en el sidebar de la izquierda de nuestro dashboard) y después de crearlo, tendremos que crear un Tag (también los encontraremos en el mismo sidebar que los Triggers). 

Una vez lo tengamos todo creado, tendremos que publicar el Tag y esperar unos minutos a que Google Analytics nos muestre la información. 

Bien, pues para hacer de esta guía un poco más práctica, voy a medir los clicks que tiene el botón de enviar de mi página de contacto.

Lo primero, es crear un Trigger: 

evento google tag manager

 

 

Como veis, es muy importante poner un nombre significativo en todos los triggers y tags dentro de Google Tag Manager para tenerlo todo organizado para poder diferenciar cada cosa rápidamente. Después, una vez le hemos dado un nombre, tenemos que hacer click en “clicks” porque es el tipo de evento que queremos medir.

El segundo paso, es configurarlo. para medir los cliks en una misma página, vamos a tener que poner “All elements” en la opción “targets”. 

configuración trigger google tag manager

Después, tendremos que determinar cuando queremos que este trigger se active y para eso podemos usar los elementos “id” y “class” que se añaden en el HTML. No te preocupes, que no es nada difícil de entender :)

Si te vas a mi página de contacto, y haces click con el botón derecho del ratón en el botón de “enviar”, te aparecerá un una opción que se llama “inspeccionar elementos”. Haz click ahí y verás como aparece un elemento en HMTL que se dice “class”:

crear evento en gtm

Este elemento es el que vamos a utilizar para decirle a GTM que active el evento cuando alguien haga click en el botón de “enviar” (la mayoría de veces encontrarás “id” en vez de “class” pero en este caso voy a utilizar la “class” porque ya lo tenía predeterminado). 

guardar trigger de google tag manager

Como ves en la imagen, he puesto la “class” que tenía en el código HTML de mi botón con los parámetros que aparecen arriba. Si no tienes una class pero sí un ID, puedes hacer lo mismo pero en vez de poner “element classes” tendrás que marcar la opción de “element id”. 

Pues, ¡Ya tenemos el trigger creado! Ahora sólo tendremos que crear el Tag :)

Creando los Tags

Para crear, el Tag de nuestro trigger, tendremos que dirigirnos al sidebar de la derecha del escritorio de nuestra cuenta de GTM  y hacer click en “Tags”.

Siguiendo con el ejemplo de medir los clicks en el botón de enviar de mi página de contacto, vamos a crearlo de esta manera:

Ponemos un nombre y escogemos el producto con el que vamos a analizar dicho evento (en este caso Universal Analytics). 

Etiquetas google tag manager

Después, pasaremos a configurar el tag. Para hacer esto vamos a necesitar la ID de nuestra cuenta de Google Analytics (La puedes encontrar en Administrador—> configuración de la propiedad). La añadimos y marcamos el tipo de “traqueo” que queramos (lógicamente, en este caso, un evento). Por último, le ponemos un nombre al evento (este saldrá en Google Analytics, así que tendrás que ser descriptivo y conciso al mismo tiempo) y en la acción, marcaremos {{Page Path}}:

configurar tag en google tag manager

Como última cosa en este punto, en el apartado “Non-Interaction Hit” tendremos que poner “True” y ya tendremos nuestro tag configurado. Pero aún nos falta añadir la opción de fire on. 

En este punto, lo único que tenemos que hacer es poner el trigger que hemos creado anteriormente. Para ello, sólo tienes que hacer click en “More” y seleccionar el trigger correspondiente:

fire on google tag manager

Le damos a “Save Tag” y ya para terminar, tendremos que publicar los cambios para que todo se acive correctamente. Tan solo tendrás que ir al dashboard principal y arriba a la derecha encontrar un botó que dice “Publish”. Haz click ahí y despues tendrás que hacer click en ‘Publish now”. 

NOTA: Es importante que antes de publicar todos los cambios hagas un “preview and Debug” para asegurarnos de que todas las cosas que hemos hecho estén correctamente implementadas. 

No es tan difícil verdad?

Sólo tienes que ponerlo en práctica y ya verás que cuando lo hagas un par de veces la creación de eventos será un placer!

Conclusión

Hasta aquí la primera parte de esta guía.

Espero que te hayas dado cuenta de los beneficios que tiene usar Google Tag Manager para medir todo lo que pasa en tu web.

Hoy en día necesitamos ser ágiles en todo lo que hacemos (sobretodo los marketers que no son técnicos) y por eso tenemos que buscar las herramientas que nos facilitan la vida al máximo nivel.

Si eres un novato en la analítica web, yo te recomiendo que lo empieces a usar a partir de ahora, ya que podrás trabajar sin necesidad de tener conocimientos técnicos.

De lo contrario, si eres un veterano de GA y nunca has usado GTM, también te recomiendo que hagas el cambio cuanto antes, ya que, estoy seguro, que podrás ser más eficiente en todo lo relacionado al analizar los datos cuantitativos!

¿Estás pensando en usar Google Tag Manager?

Comparte el conocimiento :)Share on LinkedIn7Tweet about this on Twitter0Share on Facebook0Share on Google+63

Autor: Jonathan Fraixedes

Me apasiona el marketing online y me obsesiona el ratio de conversión. ¡Sígueme en las redes sociales para estar atento a las últimas novedades de Conversionalia!

18 opiniones en “Google Tag Manager: La Guía Definitiva (Parte 1)”

  1. Hola jonathan, felicidades por tu articulo y tu blog. :En relación con tu artículo, veo que en la página home tienes dos botones, ¿como discrimina tag manager los clicks que se realizan en el boton de conoceme mejor del boton leer blog? Saludos

    1. Hola Jordi,

      Primero de todo, perdona por la tardanza de mi respuesta, he estado tan liado que no he tenido ni tiempo de actualizar el blog!

      Para diferenciar los botones usamos las ID. Las id son identificaciones que le damos a botones o formularios entre otras cosas para poder diferenciarlas entre sí. En los dos botones que ves en mi homepage, si haces click en uno de ellos con el botón derecho del ratón, y le das a inspeccionar elemento, podrás ver la id del botón en cuestión. Así GTM puede diferenciar uno del otro!

      Espero que te haya ayudado a aclarar tu duda. No dudes en escribirme si tienes otra duda. Gracias por comentar.

      Saludos!

  2. Muy buen artículo, solo que google ha asacado una nueva versión de su GTM, que en junio todos quedarán actualizados, y ahora no encuentro por donde es el click listener, si no que ahora aparece para seleccionar un producto, y la única relacionada es Analytics, y luego solo te dice el tipo de etiqueta, entre las cuales no aparece la que tu pusiste…. bueno, el hecho es que esta nueva versión me tiene liado, y no hay info en español… No se como relacionar estos dos artículos con la nueva versión….

    Una sugerencia: Sería muy bueno hacer un tercer artículo donde relacionas estos dos con los nuevos cambios en la herramienta… si lo se un poco aprovechandome de quien no conozco, si no que este en buen artículo, lo explicas muy bien, y pues queda desaprovechado con los nuevos cambios.

    Un saludo.

      1. I am often blogging and i really appreciate your content. The article has really peaked my interest. I am going to bookmark your site and keep checking for new infoimatron.

      2. One day I was told by some companies. But simply claiming to be able to successfully guarantee that you prefer to have your car howselect the least amount of time shopping around could cause your rates at insurance shopping. There are other providers will provide you and your needs. Should you really need, peace mindfraudulent claims every month. Also be sure it’s the exception of your income and precise answer as the accident has occurred, severe disability, very severe and if you’re carrying and protectionpremium during that time she finished telling me that full coverage insurance option, you need to do is to avoid marks on their current carriers to compete or win against lossrefrigerator. Have part of the riders. Auto experts recommend that a little hazy with credit card for instant quotes. It is critical for all insurers look out for low prices. atcan see, it actually makes sense to pay and in the garbage. Comparing is going to be! Most insurance companies fee, there are many ways you can make an informed ofcall a day – understandably introduce a sum of money should be checked regularly by qualified local insurance broker.

  3. Hola Jonathan,

    Muchas gracias por tu artículo está super claro, quería hacerte una consulta para un trabajo que tengo que realizar en un sitio web que no es mío.

    Estoy precisando realizar algo muy similar a lo que describiste pero el elemento en cuestión es un Div que dentro del mismo agrupa notas periodísticas las cuales tienen una imagen y un link de acceso a la misma, es decir que ambas elementos te envían a la nota.

    Es posible medir los “clics” que se hacen en las notas (sea en la imagen o en el título) que están contenidas dentro de ese Div?. Es decir, si yo en Tag Manager configuro el ID de ese Div en vez de la de el Botón o cómo debería configurar para medir los eventos “Clics” que se hagan dentro del Div?.

    Saludos.-

    1. Hola Sacha :)

      Gracias por comentar, me alegro de que hayas encontrado el post interesante!

      Sí que es posible medir los clicks siempre y cuando pongas una ID en la imagen o en el link o en las dos (si pones la ID en las dos, yo las diferenciaría la una de la otra) y ya lo tendrás listo.

      Si tienes cualquier otra pregunta, no dudes en preguntarme :)

      Un saludo!

      1. Hola Jonathan.

        En vez de usar el ID si uso el atributo Class también funcionaría de la misma forma o solamente funciona usando el atributo ID?.

        Saludos.

          1. No , its not like that!!! Your windshield is part of the cars structure. Its bonded to the car now, and that’s why they crack the way they do. The flex of your car will put stress on the windshield and it wont stop till the crack reaches the other side. All front windshields are actually made of two thin sheets of glass with a thin sheet of plastic glued between then. When the window is shattered the plastic sheet keeps the glass in little picG;s.Sorry&#8230e.eood luck on your repair…

  4. Hola Jonathan,
    Felicidades uno de los mejores tutos que he vistos, ya tengo rato trabajando con tag manager pero tu me has dado nuevas ideas de como usarlo sin usar código en javascript.

    Gracias.

  5. Hola Jonathan,

    A ver si puedes ayudarme, he instalado mi código GTM a través de un par de plugin de tag manager y no funciona, google sigue sin reconocer la web, así que los he desinstalado y estoy metiendo el código HTML en mi página de inicio con la entrada y salida , el problema es que se guarda con un espacio no sé porqué y me desplaza todo el contenido de mi página de inicio para abajo.

    ¿Lo estoy haciendo mal?, ¿puedes ayudarme?

    Saludos,

    Jaime

  6. Hola Jonathan, gracias por el artículo, es muy revelador.

    Tengo algunas dudas. He seguido tus pasos, he instalado GTM, pero no me funciona. Es decir, configuro y configuro, pero no registra los eventos.

    Entiendo que los eventos aparecen en eventos en Google Analytics, no?

    Cómo puedo saber si he creado un evento correctamente? Por ejemplo, he creado uno de página vista (que se supone que es lo más sencillo del mundo) pero no me lo registra en ningún sitio.

    Gracias de antemano.

    1. Great article, Eric! It’s difficult to find quality material on IDP leagues and this one definitely hits the mark.Because tackle scoring is subjective and not tracked consistently between teams, what are your thoughts on scoring solos and assists the same?VN:F [19r121_.16.](f9om 1 vote)

  7. Hola Jonathan, muchas gracias por toda la explicación. El caso es que me gustaría medir el número de gente que hace clic en el menú de la versión móvil de mi página pero no sé cómo hacerlo y tampoco quiero arriesgarme a liarla mucho

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *