Porque por tus venas corre sangre de SEO y marketero digital confeso, seguro que en m√°s de una ocasi√≥n has o√≠do hablar de Google Tag Manager. Pero, ¬Ņtienes claro qu√© es y, sobre todo, c√≥mo se aplica?

Nuestros compa√Īeros V√≠ctor Campuzano (@vicampuzano) y David Navarro (@d7anace) te dan las respuestas en los dos v√≠deos incluidos en este post, para que descubras ese gestor de etiquetas web tan vers√°til y f√°cil de utilizar, como potente y eficiente de administrar.

Como dicen en el v√≠deo, ante ti cuentas con una ¬ęnavaja suiza¬Ľ que te permitir√° ser m√°s r√°pido y aut√≥nomo al implementar herramientas esenciales para el seguimiento de tu proyecto web.

Con esta escena lo ver√°s m√°s claro. Has instalado el c√≥digo de Google Analytics para contabilizar las visitas de tu web. Hace apenas unos d√≠as incluiste en tu web el tag de Facebook a ra√≠z del lanzamiento de una campa√Īa en esta red social.

Hoy necesitas introducir otra etiqueta clave para medir correctamente un A/B testing y, claro, otra vez tienes que recurrir al departamento de programación para que lo instalen y ya te han comunicado que tardarán horas.

¬ŅImaginas qu√© maravilloso ser√≠a tu trabajo como profesional digital si t√ļ mismo pudieras implementar estas herramientas desde una interfaz sencilla y sin tener que instalar cada etiqueta una a una?

En ocasiones, la vida nos regala sorpresas y hoy est√°s de suerte.

Google Tag Manager viene a simplificar al máximo tu labor en la optimización y gestión de tu web.

Est√°s ante lo que se conoce como un Tag Management System (TMS) o administrador de etiquetas para un sitio web, esos peque√Īos fragmentos de c√≥digo que necesitamos implementar en nuestra p√°gina para que funcionen ciertas herramientas externas que recogen informaci√≥n, como Google Analytics o Facebook Ads.

En estos v√≠deos, nuestros compa√Īeros te introducen en esta incre√≠ble herramienta que va mucho m√°s all√° de la gesti√≥n de tags.

Ahora sin disponer de los conocimientos técnicos de un programador, podrás realizar tareas más complejas de forma autónoma y más rápida.

El potencial de Google Tag Manager es tremendo y ellos quieren que empieces a exprimir al m√°ximo todo su jugo.

¬ŅQu√© es Google Tag Manager?

Google Tag Manager es un sistema gratuito basado en etiquetas que permite a√Īadir a cualquier sitio web o aplicaci√≥n m√≥vil c√≥digos de seguimiento, anal√≠tica web y etiquetas de medici√≥n desde una interfaz sencilla, sin tener que editar c√≥digo.

Las etiquetas de Google Tag Manager se aglutinan dentro de su ¬ęcontenedor¬Ľ, el espacio creado en la plataforma para lanzar desde all√≠ las tags desde la que mandaremos la informaci√≥n.

Cada contenedor tiene asociada una ID concreta e incluirá etiquetas de seguimiento, activadores que pondrán en marcha sus tags al producirse ciertos eventos, y variables que ayudan a automatizar opciones de configuración de esas etiquetas.

Al crear un contenedor, dispondr√°s de un c√≥digo html/Javascript que ser√° lo √ļnico que deber√°s a√Īadir a tu site, ya que el container tiene la funci√≥n de meter autom√°ticamente el c√≥digo que sea necesario para el √≥ptimo funcionamiento de todas las etiquetas.

¬ŅPara qu√© sirve Google Tag Manager?

Podríamos decir que el Administrador de Etiquetas de Google ha venido para salvarnos la vida o al menos para simplificar las tareas de los profesionales digitales.

Su funci√≥n no es otra que servir de punto de conexi√≥n entre una web, un blog o una aplicaci√≥n m√≥vil con multitud de herramientas de anal√≠tica web, A/B testing, medici√≥n de campa√Īas de PPC o experiencia de usuario, por citar solo algunas de ellas.

Y lo más importante de todo: te olvidas del engorro de estar metiendo código, una tarea que tal vez no controlas del todo y ante la que debes acabar recurriendo a programadores especializados.

Gracias a Google Tag Manager, t√ļ solo podr√°s a√Īadir el c√≥digo del contenedor en tu web sin depender de nadie, lo que supone ahorro de tiempo, autonom√≠a y un poquito de felicidad extra.

Componentes b√°sicos de Google Tag Manager que debes conocer

Si es tu primera vez trasteando Google Tag Manager, te informamos que debes conocer una serie de elementos que la herramienta utiliza para la configuración y activación de las etiquetas.

  • Etiquetas: c√≥digos que env√≠an datos de una web a ciertos sistemas como es el caso de Google Analytics.
  • Activadores: este elemento act√ļa detectando ciertos eventos como clics en una p√°gina o env√≠os de formularios y otros muchos, adem√°s de especificar cu√°ndo deben activarse las etiquetas.
  • Variables son marcadores de posici√≥n con un nombre que corresponde a un valor espec√≠fico. Es el caso de fechas, precios o el nombre de un producto.
  • Capas de datos: su funci√≥n es retener ciertos datos de forma temporal para el √≥ptimo funcionamiento de las etiquetas, activadores y variables.

¬ŅC√≥mo usar Google Tag Manager en tu web? Tutorial en v√≠deo 100% pr√°ctico

Con estos conceptos más claros, ahora llegó el momento de introducirnos de lleno en la interfaz de Google Tag Manager y preparar tu web para que ambas plataformas queden conectadas.

David te cuenta en este vídeo los aspectos más importantes para sacar el máximo rendimiento a esta poderosa herramienta. ¡20 minutos en un tutorial sobre GTM sin desperdicio!

¬ŅPor d√≥nde empiezo? Primeros pasos en Google Tag Manager

1 ‚Äď Crea tu cuenta en Google Tag Manager

Dir√≠gete a la web de Google Tag Manager y clica sobre ¬ęComenzar gratis¬Ľ. A continuaci√≥n, sigue los pasos para abrir tu cuenta en la plataforma:

  • Pon un nombre descriptivo a tu cuenta
  • Elige el pa√≠s
  • Escoge un nombre para el contenedor, por ejemplo, tu dominio web
  • Selecciona la plataforma objetivo: sitio web, aplicaciones iOS, aplicaciones Android o AMP (Accelerated Mobile Pages).

crear cuenta google tag manager

Una vez creada, la cuenta aparecerá así:

Creación de cuenta en GTM

2 ‚Äď Entra en la interfaz de tu cuenta en Google Tag Manager

¬°Primer paso hecho! Ahora debes empezar a familiarizarte con la interfaz de Tag Manager.

En el men√ļ de la izquierda podr√°s gestionar las etiquetas, activadores y variables de ese contenedor al que, como hemos mencionado antes, la plataforma le ha asignado su propia ID. La ver√°s en el margen superior derecho de la interfaz.

interfaz Google Tag Manager

3 ‚Äď Implementa las etiquetas de Google Tag Manager en tu proyecto web

Dirígete a tu web para poner en marcha el siguiente paso: unir Google Tag Manager con tu site.

Como gran parte de las webs son en WordPress, David recomienda en el vídeo instalar Google Tag Manager en tu web mediante el plugin Google Tag Manager for WordPress.

Una vez instalado, solo tendrás que ir a Ajustes >> Google Tag Manager e introducir tu ID (recuerda que el código aparece en la parte superior derecha de la interfaz de la plataforma).

Instalar Google Tag Manager en WordPress

¬ŅNo tienes una web en WordPress y prefieres instalar Google Tag Manager a mano? Hazlo as√≠.

En este caso, dirígete a la interfaz de GTM y clica sobre tu código ID. De inmediato, aparecerá una ventana similar a esta:

Instala el primero de los códigos facilitados en lo más alto de la etiqueta head y el siguiente justo después de la etiqueta body de apertura. Dichos códigos deben figurar en todas las páginas de tu web.

Instalar GTM sin plugin

4 ‚Äď Comprueba que Google Tag Manager est√° instalado correctamente en tu web

¬ŅLo habr√°s hecho bien o crees que tu falta de experiencia te ha podido jugar una mala pasada?

Deja de alarmarte porque con la extensión SEO de Google Chrome Tag Assistant podrás comprobar en segundos si la implementación es correcta.

Solo tendrás que instalar la extensión, clicar sobre ella y detectará las etiquetas. Como puedes ver en la imagen, el color verde significa que el proceso ha sido un éxito.

extension-seo-google-tag-assistant

3 usos frecuentes de Google Tag Manager que debes comenzar a aprovechar hoy mismo

Entre las numerosas aplicaciones de esta herramienta, te contamos 3 implementaciones que te ayudarán a gestionar el seguimiento de tu web de una forma más rápida, sencilla e integral. ¡Vamos al lío!

1 ‚Äď Inserci√≥n del c√≥digo de Google Analytics

Medir, medir y medir otra vez. Google Analytics ha revolucionado la analítica web con un sistema gratuito y potente que recoge infinidad de datos sobre el estado y evolución de tu proyecto web.

Gracias a la conexión de Tag Manager y Google Analytics, te olvidarás de introducir a mano su código de seguimiento en las páginas de tu web para pasar a hacer esta operación en segundos desde la interfaz del ya imprescindibles administrador de tags.

Aplica los siguientes pasos:

  • Dentro de Google Tag Manager, clica en Variables >> Variables definidas por el usuarios >> Nueva.
  • Asigna un nombre descriptivo a esa variable.

Variables Google Tag Manager

  • Clica dentro del cuadro Configuraci√≥n de la variable y selecciona el tipo de variable Constante, porque el c√≥digo de Google Analytics no va a variar, y en Valor a√Īade el UA o c√≥digo de seguimiento de Google Analytics. Guarda este paso.
    • ¬ŅD√≥nde est√© este c√≥digo? Dir√≠gete a Google Analytics >> Administrar >> Informaci√≥n de seguimiento >> C√≥digo de seguimiento.

Configuración variable Google Analytics

  • Crea una nueva etiqueta que ser√° el tracking de Google Analytics, encargado de avisar a nuestra cuenta de Analytics cada vez que se carga una p√°gina para informar de una nueva visita.
    • A√Īade un nombre a esa etiqueta, clica sobre Configuraci√≥n de la etiqueta, escoge Google Analytics: Universal Analytics.
    • En Tipo de Seguimiento escoge entre P√°gina Vista, Evento, Transacci√≥n, Social, Tiempos, Decorar enlace o Decorar Formulario. Si queremos conocer las personas que visitan nuestra web, elegiremos P√°gina Vista.
    • En Configuraci√≥n de Google Analytics, puedes seleccionar ID de Analytics o bien, como hace David en el v√≠deo, clica sobre Habilitar la anulaci√≥n de configuraci√≥n en esta etiqueta e introduce directamente el c√≥digo de seguimiento de Google Analytics.

Etiquetas Google Analytics

  • Configurada la etiqueta, el siguiente paso es crear el activador para que, cada vez que un usuario entre en cualquier p√°gina de esa web, se lance ese evento a Google Analytics. De todas las opciones, selecciona All pages ‚Äď P√°gina vista.

Configuración activador Google Tag Manager

Estas implementaciones se han realizado en un entorno de pruebas. Para comprobar que todo está correcto, desde Tag Manager clica sobre Vista Previa. Allí verás las etiquetas que has creado.

Modo de pruebas en GTM

A continuación, recarga tu web y comprobarás que aparece un desplegable que indica un resumen de las etiquetas que Google Tag Manager ha lanzado. Siguiendo este ejemplo, se trataría de la etiqueta sobre Páginas Vistas.

Comprobación Google Tag Manager

Tras comprobar que la implementación es correcta, debes salir del modo de vista de prueba y pasarás a enviar el código a producción.

Enviar etiquetas GTM

Una vez que clicas sobre Enviar, debes configurar ese envío. Desde Publicar y crear envío, pon un nombre descriptivo a la versión, indica más información en la descripción y finaliza clicando sobre Publicar.

El código de Google Analytics ya está implementado en tu proyecto web.

2 ‚Äď Clics en im√°genes con enlace

Imagina que en tu web hay clientes que están pagando por banners de publicidad. A medida que crece tu proyecto, gracias a la implementación de esta etiqueta podrás controlar la interacción con ese banner publicitario y así subir la tarifa de ese servicio al comprobar el aumento del impacto de este formato.

Los pasos para poner en marcha este uso son similares a los de la implementación anterior:

  • Crea la etiqueta desde Google Tag Manager con un nombre identificativo.
  • Escoge como tipo de etiqueta Google Analytics: Universal Analytics.
  • En tipo de seguimiento, elige Evento.
    • En Categor√≠a, recuerda combinar may√ļsculas y min√ļsculas
    • En Hit sin interacci√≥n, escoge Falso.
    • Clica sobre Habilitar la anulaci√≥n de configuraci√≥n en esta etiqueta e incorpora el c√≥digo de seguimiento de Analytics.
  • Configura el activador de esta etiqueta y escoge entre los diferentes tipos disponibles la opci√≥n Clic ‚Äď Solo enlaces.
  • Indica que el activador se active en algunos clics en enlaces y especifica las condiciones para su funcionamiento: selecciona Click Classes >> Contiene >> nombre de esa imagen. Clica sobre Guardar.

Clic en im√°genes con enlace GTM

  • Dir√≠gete al c√≥digo fuente de la imagen de tu web sobre la que deseas hacer ese seguimiento. Para que la clase de la imagen en Google Tag Manager coincida con la de tu web y la sincronizaci√≥n tenga lugar, deber√°s a√Īadir al enlace ahref de la imagen el par√°metro class=‚ÄĚnombre de la imagen‚ÄĚ (debe coincidir con el que has indicado al configurar el activador en GTM).

Im√°genes Google Tag Manager

  • Tras clicar sobre Vista Previa en Tag Manager, recarga la web para validar que la etiqueta se ha lanzado. Si todo est√° correcto, sal del modo de pruebas y env√≠a esta tarjeta.

Llegados a este punto y para que recojas la conversión obtenida cada vez que alguien hace clic sobre esa imagen con enlace, recuerda crear un objetivo en Google Analytics.

Eso s√≠, siempre que realices esta acci√≥n, en Informaci√≥n del objetivo recuerda que en el apartado de Categor√≠a debes poner exactamente lo mismo que indicaste en Google Tag Manager. En el ejemplo de David, fue IMG.

información del objetivo Google Analytics

3 ‚Äď Configuraci√≥n del scroll para la mejora de la conversi√≥n

Con esta implementación, podrás saber si el usuario que aterriza en tu web llega a ver una información especialmente relevante para favorecer la captación de leads.

Para ello, en Tag Manager deber√°s configurar una nueva etiqueta para este seguimiento del scroll.

Como en el anterior uso, hablamos de un evento por lo que debes indicar los parámetros de seguimiento. En este caso, es especialmente importante que en Acción selecciones la variable de la capa de datos Scroll Depth Threshold, entre las numerosas opciones posibles.

Adem√°s, a√Īade el signo % al final porque aportar√° un n√ļmero espec√≠fico (25, 50, 75 y 100) que despu√©s en Google Analytics aparecer√° reflejado, siendo la medici√≥n de ese objetivo m√°s clara y r√°pida.

Finalmente, recuerda escoger Verdadero en Hit sin interacción e incluye el código de Google Analytics.

Seguimiento scroll Google Tag Manager

Creada la etiqueta, debes pasar a configurar el activador. Escoge la opci√≥n Profundidad de desplazamiento y selecciona entra la modalidad de an√°lisis vertical u horizontal en funci√≥n de tus necesidades.

Incluye el porcentaje deseado seg√ļn el rango de scroll que deba hacer el usuario en tu web para ver esa zona determinante para tu an√°lisis. Google Tag Manager te da varias opciones ‚Äď 10, 25, 50, 75, 90 ‚Äď o personaliza la cifra que consideres.

Porcentaje de profundidad Google Tag Manager

Guardado el activador, comprueba que todo está bien desarrollado desde Vista Previa y después acude a tu web. Verás que al hacer scroll hasta ese zona relevante para ti la etiqueta que acabas de crear se activará, lo que indica que la implementación ha sido un éxito.

De hecho, en Google Analytics podrás verla reflejada en el apartado Eventos y conocerás si los usuarios que entran en tu web llegan o no a ver esa información, datos que te ayudarán a optimizar la conversión de tu web.

Ahora solo deber√°s clicar sobre Enviar en Tag Manager para poner en marcha esta etiqueta.

Conclusión

Lo reconocemos. Google Tag Manager nos ha conquistado. Ahora solo esperamos que apliques todos los consejos que hemos recogido en estos vídeos para que sientas el mismo flechazo que nosotros con esta todopoderosa herramienta.

Si te gusta ahorrar tiempo y ser más efectivo en la labor de optimización y seguimiento de tus proyectos digitales, te animamos a que conviertas Google Tag Manager en un imprescindible en tu día a día.

¬ŅCu√°l es tu experiencia con esta herramienta? Cu√©ntanos tus impresiones. ¬°Las leeremos con atenci√≥n!

¬°TENEMOS MUCHO M√ĀS SEO QUE ENSE√ĎARTE!

Tenemos la formación SEO más completa. Aprende de los mejores y transforma tu pasión en una profesión.

Do you SEO?

T√ö
NO ERES
JUAN PALOMO

¬ŅNecesitas que un equipo profesional y simp√°tico te ayude a ganar la batalla en Internet?

¡Aquí nos tienes!