Google Tag Manager: Todo lo que necesitas saber

Google Tag Manager
Share on facebook
Share on twitter
Share on whatsapp

Primero que todo, comencemos con lo básico:

¿Qué es Google Tag Manager?

Pues es muy fácil, es un administrador de etiquetas…

¿Qué etiquetas? te preguntarás.

Etiquetas les llamamos a todos los scripts o pixels que tienes que implementar en tu sitio web para añadir funcionalidades (pop-ups, formularios, chat widgets, etc.) o para medir los esfuerzos que haces en marketing digital, por ejemplo, saber cuántas personas entraron a tu sitio web, cuántos de esos vinieron desde tus campañas en Facebook o Instagra, e incluso, para tener información para re-impactarlos luego. Los usos y tipos de etiquetas son infinitos, y la realidad es que hoy en día la mayoría de aplicaciones para marketing requieren que implementes una en tu sitio para que puedan funcionar bien, ya sea un servicio de Email Marketing como Mailchimp o el mismísimo Facebook para que puedas optimizar tus campañas por conversiones.

Este es un ejemplo de la etiqueta de Facebook / Instagram:

<!-- Facebook Pixel Code -->
<script>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', 'xxxxx');
  fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
  src="https://www.facebook.com/tr?id=xxxxx&amp;ev=PageView&amp;noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

Esta es la definición de Facebook sobre su pixel:

El píxel de Facebook es una herramienta de análisis con la que podrás medir la eficacia de tu publicidad al entender las acciones que las personas realizan en tu sitio web.

Aunque lo anterior es sólo sobre Facebook, esa misma definición aplica para cualquier pixel que se encargue de recopilar datos como Google Analytics y Drip.Como puedes ver, las etiquetas son muy importantes para medir y optimizar tus esfuerzos digitales, ya sean pagos o no, y por lo tanto, tienes que mantenerlas organizadas para asegurarte de que estén a mano en caso de que tengas que hacer cambios o correcciones.

¿Cuál es el mayor beneficio de Google Tag Manager?

Según Google es:

El Administrador de etiquetas de Google te proporciona la potencia que necesitas para crear y actualizar etiquetas en tu sitio web y en tus aplicaciones para móviles, en el momento que quieras y a la velocidad de tu negocio.

Esa afirmación me parece bastante correcta, y le agregaría los siguientes beneficios:

  1. Te permite trabajar en equipo: Google Tag Manager cuenta con áreas de trabajo, control de versiones, acceso a múltiples usuario, y muchas características más que te van a ayudar a trabajar en conjunto con tu equipo de una manera prolija.
  2. No necesitas molestar al equipo de IT o pagar extra a tu webmaster para que haga cambios en el sitio: con GTM sólo necesitas intervenir el sitio una sola vez (si se hace bien), ya que toda la implementación y modificación de las etiquetas se hace desde la plataforma web de Google Tag Manager.
  3. Carga asíncrona: esto significa que las etiquetas van a dejar de hacer que tu sitio web cargue lento, lo cual es muy importante hoy en día.
  4. Modo de prueba: puedes probar las etiquetas antes de lanzarlo al sitio en vivo, todo desde la plataforma web de Google Tag Manager. Esto es imposible si haces los cambios desde el código del sitio, y ya te podrás imaginar las consecuencias desastrosas que puede traer insertar una etiqueta de manera errada (hacer inaccesible el sitio entero).
  5. Muchos más.

La lista de beneficios y cosas que se pueden hacer con Google Tag Manager es infinita, pero creo que los anteriores son los que vas a experimentar más a menudo.OK, ya sabemos qué es, por qué tenemos que usarlo y ahora falta saber cómo implementarlo:

¿Cómo implementamos Google Tag Manager en nuestro sitio web?

En la plataforma, Google nos dice que tenemos que pegar dos códigos, uno va lo más arriba del <head> y el segundo lo más arriba del <body>.

Y aunque el código de todos los sitios tiene ambas etiquetas HTML, les voy a mostrar cómo implementarlo en WordPress y de forma manual.

Implementación de Google Tag Manager en WordPress

Primero, te voy a mostrar como hacerlo de la forma más fácil, por medio de un plugin.

El plugin se llama Insert Headers and Footers, y puedes conocer más sobre él haciendo clic aquí.

Básicamente, lo que hace este plugin es permitirnos insertar código en el <head> y en el final del <body>.

Su configuración se ve así:

Screenshot del plugin Insert Headers and Footers de WordPress
Screenshot del plugin Insert Headers and Footers de WordPress

Acá, vamos a insertar el primer código de GTM en el que dice Scripts in the Header, ya que lo que pongas ahí se va a insertar en el <head> que es justo lo que queremos.

El código lo consigues haciendo clic acá:

Pantalla principal de Google Tag Manager
Pantalla principal de Google Tag Manager

El que va en el <head> debe lucir así:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&amp;l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

y el que va en el <body> así:

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Este lo tienes que poner donde dice Scripts in Footer, ya que lo inserta al final del <body>, lo cual no es lo ideal pero es lo mejor ya que utiliza hooks de WordPress, así que no importa el tema o page builder que utilices para tu sitio.

Una vez que hagas esto cliqueas en guardar y tu Google Tag Manager estará implementado en todo el sitio.

Muy fácil, ¿no?

Si utilizaste esta opción te invito a que me cuentes si te funcionó bien.

Implementación de Google Tag Manager via functions.php

Esto solo funciona si instalaste un Child Theme en tu sitio web, si no lo hiciste o no sabes lo que es no intentes esta opción

Esta es un poco más compleja, y te recomiendo que hagas una copia de seguridad antes de implementarla, sin embargo, no necesitas instalar un plugin adicional para hacer algo tan sencillo como la implementación de Google Tag Manager, y por eso es mi método preferido.

Para esto vamos a tener que acceder a nuestro archivo de functions.php:

Editor de temas de WordPress
Editor de temas de WordPress

Sigue estos pasos:

  1. Posa el cursor sobre / haz clic en Apariencia.
  2. Clic en Editor o Editor de Tema.
  3. Clic en Funciones del Tema o Functions.php
Functions.php en WordPress
Functions.php en WordPress

Ahí vamos a poner dos scripts, uno para insertar GTM en el <head> y otro en el <body>.

El primero es el del head:

// Añade scripts al wp_head()
function gtm_head() { ?>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&amp;l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->

<?php }
add_action( 'wp_head', 'gtm_head' );

Segundo, para el del <body>:

// Añade scripts al wp_footer()
function gtm_body() { ?>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<?php }
add_action( 'wp_footer', 'gtm_body' );

Recuerda que todo el código de Google Tag Manager tienes que reemplazarlo por el tuyo, o puedes cambiar el GTM-XXX por el ID de tu contenedor, lo que te resulte más sencillo.

Luego solo haces clic en actualizar archivo y listo, ya tienes Google Tag Manager implementado en tu sitio web de WordPress.

Verificando la implementación de Google Tag Manager

La verificación la podemos hacer de dos formas, una manual y la otra por medio de la extensión oficial de Chrome.

Yo recomiendo la extensión, ya que manualmente nos podemos equivocar.

Para instalar la extensión tienes que hacer clic aquí.

Tag Assistant en Chrome Web Store
Tag Assistant en Chrome Web Store

Después de instalarlo, tenemos que navegar a cualquier página del sitio web y activar la verificación, y luego re-cargar la página presionando F5.

De esta manera:

Cómo verificar la implementación de Google Tag Manager
Cómo verificar la implementación de Google Tag Manager

Si ves el símbolo de la etiqueta en verde significa que todo está OK.

Verificación del tag de Google Tag Manager

¡Felicitaciones! lograste implementar Google Tag Manager en tu sitio de WordPress.

¿Qué sigue?

Pues te voy a mostrar cómo implementar las etiquetas o pixel de marketing más comunes, la de Fcebook y la de Google Analytics.

Implementando el pixel de Facebook con Google Tag Manager

Es bastante sencillo, pero creo que mostrarlo de una forma visual es muchísimo más fácil, así que les dejo el tutorial en este Fleeq:

Estos son los pasos:

  1. Creamos un tag.
  2. Seleccionamos Custom HTML como el tipo de tag.
  3. Pegamos el pixel de Facebook sin hacer cambios, simple CTRL+C y CTRL+V.
  4. Seleccionamos ALL PAGES como disparador o trigger, ya que este es el de página vista y queremos medir TODAS las páginas del sitio web.
  5. Le ponemos un nombre y hacemos clic en guardar.
  6. Hacemos clic en submit o enviar (no estoy seguro si es así en español).
  7. Le damos un nombre y descripción a los cambios que vamos a enviar a producción (sitio en vivo). Esto es importante y recomiendo que lo hagas a conciencia ya que te va a ayudar muchísimo en caso de que algo salga mal o si trabajas con otras personas, ya que hacer que sea mucho más fácil entender todos los cambios que se hacen.
  8. ¡LISTO!

Verificando la implementación del pixel de Facebook

Es bastante sencillo, sólo tienes que instalar la extensión de Chrome haciendo clic acá.

Facebook Pixel Helper

Luego vamos hasta alguna página del sitio o presionas F5, y haces clic en el ícono de la extensión.

Si todo está bien, deberías ver una marca verde al lado de pageview, así:

Verificación del pixel de Facebook

Si el tuyo está así, ¡FELICITACIONES! lograste implementar el pixel sin problemas

Implementando Google Analytics con Google Tag Manager

Al igual que con el de Facebook, te dejo un Fleeq para que puedas ver el paso a paso de una forma más clara:

Ahora tenemos que verificarlo, lo cual es MUY sencillo.

Verificando la implementación del tag de Google Analytics

Para esto volvemos a utilizar la extensión Tag Assistant de Google al igual que con Google Tag Manager, sin embargo, la implementación de Google Analytics va a aparecer en azul, pero no te preocupes que es normal cuando se implementa por medio de GTM.

Deberías ver algo así:

Verificación de Google Analytics

Si el tuyo está así, ¡FELICITACIONES! lograste implementar el tag sin problemas

Conclusión

Como pudiste ver Google Tag Manager es una herramienta gratuita y muy fácil de utilizar que sin dudas te va a facilitar muchísimo la vida de ahora en adelante, ¿no?

Según mis estimaciones la implementación de todos los tags de este tutorial no debería llevarte más de 10 minutos, y todos los puedes hacer tu sin tener que recurrir a un desarrollador, y lo mejor de todo, es que 2 de 3 etiquetas las implementaste sin tener que intervenir el sitio web.

Espero que este post te sirve mucho, y si al seguirlo pudiste implementar todo sin problemas te invito a que me dejes un comentario haciendomelo saber.

¡Saludos!

Subscríbete a nuestro newsletter

Sólo te enviaremos contenido relevante y que está muy bueno, nada de spam, te lo prometemos.

Compártelo con tus amigos

Share on facebook
Share on linkedin
Share on twitter
Share on whatsapp
Share on reddit
Share on telegram