12 octubre, 2016

Google Tag Manager (GTM) es el gestor de etiquetas de Google. GTM es una herramienta con una potencia y prestaciones increíbles pero muy infravalorada. Por la complejidad aparente del uso y la falta de entendimiento del concepto “gestor de etiquetas” es una de las herramientas más útiles y, lamentablemente, más desaprovechadas del marketing digital.

La principal ventaja de Google Tag Manager es generar una independencia entre marketing y tecnología, resolviendo el gap que había con los largos ciclos de desarrollo de software y la necesidad de depender de un equipo técnico para la implementación de herramientas de marketing digital. Con GTM el equipo de marketing puede funcionar de forma totalmente autónoma e independiente.

¿Cómo funciona Google Tag Manager?

Técnicamente, centrándonos en la versión web, GTM es un contenedor de código javascript. El contenedor es una pequeña pieza de código javascript que se inserta una única vez en nuestras páginas. La pieza de código instalada contiene el resto de código javascript que necesitan nuestras herramientas de marketing para funcionar. Éste es capaz de actualizarse a tiempo real y se configura mediante el panel de administración de GTM.

Google Tag Manager paso a paso. Crear una cuenta

En primer lugar y como ocurre para cualquier servicio de Google que queramos utilizar, necesitaremos disponer de una cuenta de Google. A continuación, vamos a la herramienta y nos registramos. Una vez dentro de la herramienta, Google nos pide que creemos nuestra primera cuenta, esta vez de GTM. Es importante distinguir entre nuestra cuenta de Google, con la cual manejamos servicios del gigante de Mountain View y las cuentas de Google Tag Manager, que se usa para englobar contenedores. Si estás familiarizado con Google Analytics se trata del mismo paradigma de uso.

Estructura Google Tag Manager

Por tanto el primer paso será hacer clic sobre el botón “Create account” para crear una nueva cuenta.

Captura cuentas google tag manager

A continuación rellenamos la información que se nos pide. El primer paso es nombrar nuestra cuenta, pudiendo ser el nombre de nuestra página web o cualquier otro. También tenemos que rellenar cual será nuestra web, es importante indicar que habrá que hacerlo sin “http:// o https://”, a continuación le indicamos que será un proyecto WEB y hacemos clic sobre “Create”.

captura creación cuentas google tag manager

Implementación técnica en nuestra web

Ahora, necesitamos copiar el código que Google nos proporciona en nuestra página web. Recuerda que ésta será la única instalación que tendrás que hacer, una vez instalado, no necesitarás agregar más código en tu web ya que cuando quieras añadir una nueva herramienta éstas serán agregadas a través del Tag Manager. La instalación se compone de dos piezas de código, la primera habrá que pegarla justo después de la cabecera , y la segunda justo después del cuerpo de HTML .

La razón por la cual hay que instalar dos piezas de código es que, desde la última versión de GTM, se ha añadido la opción de disparar nuestras etiquetas antes o después de la carga de la página, es decir, se ha añadido la opción de disparo síncrono y asíncrono. Esto nos da un mayor control sobre la carga de las etiquetas en nuestra página, herramientas como Optimizely (test AB) necesitan una carga síncrona debido a que necesitan ejecutarse en el momento en el que la página es cargada para evitar el “flickering”. En cambio, herramientas como Google Analytics pueden esperar a que el usuario haya cargado la página en su navegador para, de forma asíncrona y transparente a nuestros visitantes,  hacer la llamada a Analytics y guardar los datos, evitando demoras en los tiempos de carga de las páginas.

Si usas WordPress existen multitud de plugins que te ayudarán en tu instalación, mi recomendación es hacerla de forma manual ya que no conlleva demasiado esfuerzo y asegura mejores resultados. Ve al menú lateral Apariencia > Editor, selecciona la plantilla “Cabecera del tema (Header.php)” y busca las etiquetas HTML y , posteriormente pega ambos códigos en sus respectivas posiciones.

Captura instalación google tag manager en wordpress

instalacion2-google-tag-manager

Posteriormente Guarda la plantilla.

Enhorabuena, ¡ya tienes el código de Google Tag Manager instalado en tu WordPress!

Definición de las etiquetas

Ya hemos creado una cuenta y hemos realizado la instalación, ahora solo queda instalar nuestras etiquetas. Desde el punto de vista técnico, una etiqueta es un fragmento de código javascript que va a ser insertado dentro de nuestro contenedor. Desde el punto de vista de negocio, una etiqueta es cada una de las herramientas que instalemos en nuestra web: Google Analytics, Adwords, Optimizely, Hotjar…

Aunque esto formará parte de un segundo tutorial, más avanzado, sobre Google Tag Manager, hay que conocer que cada etiqueta se conforma de triggers (disparadores) y variables. Para acercar el concepto de tirgger y variable podemos suponer que queremos guardar un evento en Google Analytics, este evento se ha de ejecutar cuando se hace clic en un enlace y queremos que guarde la url del enlace. Para este caso el disparador que habría que configurar sería “clics en enlaces” y la variable la “url” del enlace.

Para facilitarnos aún más la tarea de la instalación, Google nos proporciona instalaciones “fáciles” y preconfiguradas, de forma que, con un par de clics, podemos tener nuestra etiqueta configurada.

Instalar la etiqueta de Google Analytics mediante Tag Manager

El tener una herramienta de analítica web es básico para cualquier marketero que se precie. Google Analytics, es líder de mercado y nos ofrece una gran potencia, además de ser gratuita. Por supuesto, como ocurre con el resto de productos de Google, GTM incluye la instalación de Analytics de forma predeterminada.

Para agregar esta etiqueta (o cualquier otra) hacemos clic en “New Tag”.

agregar nueva etiqueta google tag manager

A continuación hacemos clic en “Tag Configuration” y seleccionamos “Universal Analytics”. Lo único que queda por hacer es añadir el código de seguimiento de nuestra propiedad de Analytics. Para encontrarlo vamos a Google Analytics > Administración > Propiedad > Código de seguimiento. El código de seguimiento es fácilmente identificable, es el que empieza por “UA-“.

instalación google analytics mediante google tag manager

El resto de opciones las dejamos por defecto. Posteriormente guardamos y ya tenemos nuestra primera etiqueta creada.

Instalar una etiqueta personalizada

Aunque la mayoría de herramientas de uso común vienen preconfiguradas por defecto, no se encuentran disponibles en el instalador de GTM todas las herramientas del mercado. En ocasiones es necesario hacer uso de código personalizado para realizar la instalación.

Pero no hay que asustarse, el proceso es igual de simple que la anterior instalación. Hay que recordar que GTM es una herramienta pensada para gente de marketing con ínfimos conocimientos técnicos y Google ha puesto mucho empeño para que resulte lo más sencilla posible.

Para este ejemplo usaré la aplicación Hotjar. Hotjar es una herramienta 100% recomendable de análisis cualitativo y feedback. Entre otras funciones, es capaz de hacer un replay de las sesiones del usuario como si fuera un vídeo, poniéndonos en el punto de vista de nuestros usuarios para entender sus problemas de navegación.

Cuando nos registramos en Hotjar, se nos da un código que tendremos que implementar en nuestra página web. Para hacerlo a través de GTM tenemos que ir a crear una nueva etiqueta (como ya se hizo en el proceso anterior), pero esta vez seleccionaremos la opción de “HTML Personalizado”. Dentro del campo HTML que nos aparece, agregaremos el fragmento de código que nos proporcionó Hotjar. A continuación, seleccionamos el modo de activación que será “All pages” para que éste se ejecute en todas nuestras páginas.

Etiqueta personalizada google tag manager

Con esto ya tendremos nuestra etiqueta personalizada configurada.

Previsualización y debug

Para asegurar el correcto funcionamiento de nuestras etiquetas, GTM cuenta con un sistema de debugger bastante sencillo el cual nos ayudará a asegurar la calidad de nuestras implantaciones. El acceso al debugger se encuentra ubicado en el desplegable junto al botón “Publish”.

debugger tag manager

Una vez clicado en “Preview” en la página principal de GTM aparecerá un mensaje alertándonos de que el debugger ha sido activado.

Debugger alerta

Ya activo, vamos a la página web del contenedor que estamos editando. Al entrar nos cargará un panel, en donde podremos observar qué etiquetas se están disparando y cuales no lo están haciendo. Podremos navegar con normalidad para seguir viendo en qué momento se están disparando nuestras etiquetas y de la forma que lo están haciendo.

Debugger de likeinspector

Para salir del debugger tendremos que volver a GTM y hacer clic, en “Leave Preview Mode” justo en el mensaje de color naranja que nos informaba de que el modo de debug estaba activo.

Publicar nuestro contenedor

GTM cuenta con un control de versiones, esto nos proporciona un mayor control sobre nuestras etiquetas y la posibilidad de restaurar a versiones anteriores en el caso de que cometamos algún error en la implementación.

Una vez creadas las etiquetas, toca pasar a producción. Para ello lo único que tenemos que hacer es crear una nueva versión clicando en “Publish” nos aparecerán las opciones de versionado del contenedor.

Control de versiones google tag manager

Lo último que queda por hacer es guardar la versión. ¡Ya tenemos Google Analytics funcionando en nuestra página web!

Conclusión

Google Tag Manager es una herramienta con un potencial increíble que independizará la labor de marketing de la de tecnología. Además previene errores de código gracias a su instalación única, su modo debug y a su control de versiones. Aunque es una herramienta que pocos conocen se está haciendo un gran hueco en el mercado por su versatilidad y sus virtudes.

En este tutorial de Google Tag Manager se ha tratado la instalación básica de la herramienta y la generación de la etiqueta para Google Analytics. Te animo a que pruebes e indagues en la herramienta para ampliar tu conocimiento. También tienes a tu disposición la documentación oficial de GTM.

Si tienes preguntas, tienes a tu disposición mi formulario de contacto y los comentarios del post, estaré encantado de resolver cualquier duda que te surja.

Deja un comentario

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