Normalmente, cuando oímos hablar de Google Tag Manager se nos ponen los pelos de punta. Creemos que todo es más complicado con Google Tag Manager y preferimos sumergirnos en una compleja configuración de Google Analytics de manera manual, lo que muchas veces está condenada a fallos continuos, revisiones, tests y un proceso que puede que nunca termine. Como siempre, todo es mucho más sencillo de lo que parece, por lo menos configurar Google Tag Manager en una web básica en WordPress donde tenemos que lanzar algunos píxeles y eventos personalizados. Aquí te demuestro lo sencillo que resulta empezar a utilizar Google Tag Manager sin tener conocimientos previos.

¿Qué es el Google Tag Manager?

El Google Tag Manager es una herramienta gratuita de Google que simplifica el proceso de instalación y depuración de cualquier tipo de etiqueta que quieras instalar en un proyecto digital. Es gratis, sencilla, buena y bonita jur jur jur…

La definición más común de Google Tag Manager (que seguramente has oído en el pasado) es que el Google Tag Manager es un contenedor de etiquetas. Si esa definición no te dice nada (como a mí me dijo bien poco cuando empecé) puedes imaginar el Tag Manager por ahora como un cubo o una caja donde guardas etiquetas. ¿Qué etiquetas guardas? puedes meter píxeles, códigos de Analytics, de Twitter Ads…

¿Por qué necesito usar Google Tag Manager?

Vale! no necesitas obligatoriamente empezar a utilizar Google Tag Manager pero te va a facilitar la vida, de verdad, créeme que lo hará. Sólo necesitarás instalar un código en todas las páginas de la Web y a partir de ahí podrás instalar píxeles y cualquier código de Google , Facebook, Twitter, personalizado…y de cualquier herramienta con sólo unos clicks a través de la interfaz de Google Tag Manager. Hazme caso y deja de instalar los códigos de Analítica Web de manera manual y de uno en uno. Con Tag Manager tu vida será más fácil y serás más feliz.

 

Tu vida sin Google Tag Manager

Tu vida sin Google Tag Manager

Tu vida CON Google Tag Manager

Tu vida CON Google Tag Manager

 

Además, podrás testear que esta todo instalado correctamente sin necesidad de “molestar” al desarrollador que está hasta el cu** de ti y de tus peticiones (aunque te reciba con una sonrisa mañanera). ¿Convencido? Pues entonces nos ponemos manos a la obra. Vamos a eeeeeeeeeellooo……

Dos conceptos básicos sobre el Google Tag Manager

Nada más entrar a Google Tag Manager veremos que es una herramienta sencilla sin demasiadas opciones.

Google Tag Manager

Aspecto básico del Google Tag Manager

Tranquil@ que es sencillo. No te vuelvas loc@ por la nomenclatura utilizada. Los elementos principales que vamos a entender ahora mismo son dos y aparecen en el menú de la izquierda. Son las etiquetas y los activadores.

Activadores – Definen el CUÁNDO

Los activadores o más fácilmente entendible los disparadores (del inglés Triggers) son las acciones del visitante web que al producirse activan etiquetas. Por ejemplo, la típica página de confirmación de envío de formulario donde pones “Gracias por enviarnos tu mensaje. Nos pondremos en contacto contigo a la mayor brevedad posible”  será un activador muy utilizado. Es decir, cuando se produzca una carga de esta página, lo que es lo mismo a decir cuando cualquier persona llegue a esta página, me activas la etiqueta de Facebook, el evento de Google Analytics o la etiqueta que se quiera.

La variedad de activadores que podemos configurar es prácticamente infinita pero algunos ejemplo comunes son activadores para cuando se produzcan click sobre cualquier elemento, envío de formulario o carga de cualquier página.

Etiquetas – Definen el QUÉ

Las etiquetas son normalmente las piezas de código, snnipets, píxeles, código javascript…y aquello que queremos activar o lanzar cuando los activadores nos lo indiquen. Algunos ejemplos de etiquetas son:


<script>
ga('send', 'event', 'Videos', 'play', 'Fall Campaign');
</script>

Instalando Google Tag Manager en Web Corporativa con WordPress

Ahora que conocemos los elementos básicos es hora de llevarlos a la práctica en una Web sencilla, por ejemplo en WordPress. Pongamos como ejemplo que queremos realizar el seguimiento de una Web en WordPress a través de Google Analytics, lanzando un evento de Google Analytics cuando se produzca el alta en la Newsletter. Este evento podemos usarlo dentro de Google Analytics para crear un objetivo.

Además, cuando se produzcan la suscripción a esta Newsletter vamos a lanzar el píxel de Google AdWords así como el evento de conversión de Facebook ya que tenemos campañas en Google AdWords y en Facebook para aumentar nuestra base de datos de suscriptores a la Newsletter. Empeeeeeeeeeeeeecemos pueeeeeeeeeeeeeess.

Empecemos por lo primero

Antes de hablar de activadores o etiquetas debemos instalar el único código que nos hará falta para nuestra configuración básica de Google Tag Manager. Para ello, vamos a la página oficial de Google Tag Manager (ojo con la cuenta de gmail con la que estás logeado) hacemos click sobre el botón CREAR CUENTA y llamamos como queramos a nuestra cuenta (yo siempre suelo utilizar el nombre de la web sin minúsculas si www) una vez hecho esto se nos mostrará un popup con el código que debemos instalar:

código de Google Tag Manager a instalar en la Web

¿Cómo instalar el código de Google Tag Manager en WordPress?

Puedes hacerlo de muchas formas diferentes, como copiando y pegando el código directamente en el archivo header.php del template, aunque nosotros utilizaremos un plugin que facilitará muchas funciones y posibles nuevas funcionalidades futuras (en caso de hacerte falta). Además, no te recomiendo editar los códigos de los templates directamente ya que cuando actualices el mismo perderás toda la configuración.

El plugin que vamos a utilizar es el GTM Plugin for WordPress by DuracellTomi. Con tan sólo instalarlo y poner nuestro ID de Google Tag Manager tendremos instalado lo necesario para poder avanzar. Por si no lo sabes, el ID del Google Tag Manager lo podrás ver en el propio código anterior o en la parte alta a la derecha de la interfaz, tiene un formato de GTM-XXXXXXX.

¿Configurando nuestros disparadores dentro del Google Tag Manager?

Ya sabemos que los activadores o disparadores son las acciones que realiza el usuario que son importantes para poder lanzar etiquetas. En nuestro caso práctico, tenemos que nuestro único disparador será cuando alguien rellena correctamente el formulario de suscripción a la Newsletter. Sabemos que cuando alguien rellena el formulario de suscripción a la Newsletter en WordPress termina en una página de agradecimiento. Entonces tendremos que definir el siguiente disparador:

  • Disparador de carga de la página de confirmación de suscripción. Tan sólo necesitamos saber la URL de la página y nada más para poder configurar este disparador.Para configurar este disparador hacemos click en la opción de la barra lateral izquierda donde pone Activadores (Triggers) y seleccionamos crear nuevo disparador. Veremos una ventana donde tendremos que poner el nombre del activador, aquí podemos poner algo del tipo “Disparador – Carga de página de confirmación de suscripción a la Newsletter” (a medida que vayamos cogiendo soltura con el Google Tag Manager podemos simplificar nombres) Hacemos click en la configuración del activador y seleccionamos el tipo de “Página Vista” y “Algunas páginas vistas”. Aquí debemos poner la URL de nuestra página de confirmación, en nuestro caso /confirm-subscription/. Quedará de la siguiente forma:
Google Tag Manager Disparador de Suscripcion Newsletter

Google Tag Manager Disparador de Suscripción Newsletter

 

  • Disparador de carga de cualquier página. Este es un tipo de activador que estará siempre en todas las instalaciones de Google Tag Manager. Hay etiquetas que tenemos que lanzar en todas las páginas, cierto? por ejemplo la etiqueta de Google Analytics y también el píxel de seguimiento de Facebook son etiquetas que deberán estar en todas las páginas. Para configurar un disparador de este tipo en Google Tag Manager no debemos hacer absolutamente nada ya que existen activadores que se encuentran programados por defecto, como este.

Asociando las etiquetas a los activadores

Ya hemos instalado el código del Google Tag Manager en la Web así como hemos definido los activadores que vamos a utilizar. Es hora de definir las etiquetas que vamos a usar en nuestro ejemplo. Estas son las siguientes:

 

  • Código de seguimiento de Google Analytics: seleccionamos la opción etiquetas y hacemos click sobre NUEVA etiqueta, la podemos llamar “Etiqueta – ID de seguimiento de Google Analytics”. Se trata de una etiqueta de tipo Universal Analytics (estamos usando la versión universal), el tipo de seguimiento será “Página Vista” y en la opción de “Configuración de Google Analytics” seleccionamos “nueva variable”. Las variables nos permiten definir valores que podemos utilizar en otras etiquetas. Por ejemplo, el número de ID de Google Analytics (UA-123456789-1) la debemos definir en una nueva variable. Estos son los valores que hemos utilizado:

 

variable de google analytics - google tag manager

variable de google analytics – google tag manager

Hemos habilitado la opción de Publicidad -> “Habilitar las funciones de la publicidad de display” para poder recoger datos de para listas de remarketing. Nuestro código de seguimiento de Universal Analytics dentro del Google Tag Manager queda de la siguiente forma:

etiqueta de universal google analytics - google tag manager

etiqueta de universal google analytics – google tag manager

 

  • Código de seguimiento de Facebook Ads (píxel de seguimiento): siguiendo los mismos pasos anteriores tendremos que el píxel de seguimiento de Facebook ads tendrá los siguiente valores dentro del Google Tag Manager:

 

etiqueta de pixel de Facebook Ads - google tag manager

etiqueta de pixel de Facebook Ads – google tag manager

 

Para finalizar tenemos las 3 etiquetas que se activan una vez que se produce nuestro objetivo o conversión. Estas etiquetas son las necesarias para medir una conversión en Analytics (evento), Google AdWords y Facebook.

  • Eventos de Google Analytics. La etiqueta de evento de Google Analytics ya está definida dentro del Google Tag Manager. Para ello simplemente vamos a etiquetas y seleccionamos Google Analytics. Eligiendo el tipo de seguimiento a “Evento” veremos que tan sólo tendremos que darle valor a los parámetros de Categoría, Acción, Etiqueta y Valor del evento de Google Analytics. Aquí vemos como hacemos uso nuevamente de la variable que hemos definido anteriormente para el ID de Seguimiento de Google Analytics.
evento de google analytics - google tag manager

evento de google analytics – google tag manager

  • Eventos estándar de Facebook Ads. Los eventos estándar, al igual que el píxel de seguimiento de Facebook, son etiquetas que NO están definidas por defecto en el Tag Manager. Por ello, debemos seleccionar HTML personalizado y poner el código del evento estándar de Facebook en este apartado. Entonces tenemos que en función del evento de Facebook que queramos ejecutar (Puedes verlos todos aquí) este evento quedará de la siguiente forma:

 

  • Píxel de conversión de Google AdWords. Esta etiqueta sí que está definida por defecto dentro del Tag Manager. Tan sólo tenemos que crear nueva etiqueta, elegir Seguimiento de conversiones de AdWords, rellenar nuestro ID de conversión y nuestra etiqueta de conversión (podrás encontrar estos valores dentro del código de AdWords):

 

pixel de conversiones de google adwords - google tag manager

píxel de conversiones de Google Adwords – Google Tag Manager

Ya hemos realizado toda la configuración de nuestro ejemplo, Si hacemos click sobre el apartado etiquetas veremos un resumen bastante ilustrativo:

 

resumen etiquetas google tag manager

resumen etiquetas google tag manager

Aquí podemos ver rápidamente que las etiquetas que se lanzan en todas las páginas (All Pages) son las etiquetas de seguimiento de Google Analytics así como el píxel de seguimiento de Facebook Ads. Por otro lado, las etiquetas que se activan para registrar la conversión son el evento de Google Analytics, el de Facebook Ads así como el píxel de conversiones de Google AdWords.

Verificando que todo funciona correctamente

Ahora es el momento de realizar una prueba de que todo está funcionando correctamente y aquí es donde el Google Tag Manager tiene aún más valor. Para realizar una prueba de toda la configuración anterior debemos hacer Click sobre el botón de VISTA PREVIA (PREVIEW) en la esquina superior derecha de la herramienta y entramos en el modo de depuración del Google Tag Manager. Una vez dentro de este modo al cargar la Web veremos que aparece una ventana horizontal sobre la Web:

modo depuracion google tag manager

modo depuracion google tag manager

 

google tag manager - modo depuracion

Ejemplo de como se ve el modo depuración en el google tag manager

Llegados a este punto es bastante sencillo entender que nos viene a decir el Google Tag Manager en este caso. Con la carga de cualquier página de la Web veremos las etiquetas que SÍ se están lanzando y las que NO. Debemos realizar la acción de conversión, en nuestro caso, suscripción a la Newsletter y comprobar que las etiquetas se lanzan correctamente.

Una vez que realicemos todas las pruebas que queramos tan sólo tenemos que pulsar sobre el botón de ENVIAR (SUBMIT) en la esquina superior derecha de la herramienta y voilà, ya hemos llegado al final de nuestra configuración básica de Google Tag Manager en una Web básica. Cualquier consulta o duda realiza un comentario y veremos qué podemos hacer.

.