[separator style_type=»double» top_margin=»» bottom_margin=»» sep_color=»#1e73be» border_size=»» icon=»fa-commenting-o» icon_circle=»» icon_circle_color=»#ffffff» width=»» alignment=»center» class=»» id=»»]

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.

[content_boxes settings_lvl=»child» layout=»icon-with-title» columns=»1″ icon_align=»left» title_size=»25px» title_color=»#1e73be» body_color=»#110902″ backgroundcolor=»#e8e8e8″ icon_circle=»» icon_circle_radius=»» iconcolor=»» circlecolor=»» circlebordercolor=»» circlebordersize=»» outercirclebordercolor=»» outercirclebordersize=»» icon_size=»» icon_hover_type=»» hover_accent_color=»» link_type=»» link_area=»» linktarget=»» animation_delay=»» animation_type=»0″ animation_direction=»left» animation_speed=»0.1″ margin_top=»» margin_bottom=»» class=»» id=»»][content_box title=»Prepárate porque en estos vídeos sobre Google Tag Manager sabrás:» icon=»fa-hand-o-right» backgroundcolor=»#e8e8e8″ iconcolor=»#ffffff» circlecolor=»» circlebordercolor=»» circlebordersize=»» outercirclebordercolor=»» outercirclebordersize=»» iconrotate=»» iconspin=»no» image=»» image_width=»35″ image_height=»35″ link=»» linktext=»» linktarget=»_self» animation_type=»» animation_direction=»» animation_speed=»»]

VÍDEO 1 con Víctor Campuzano

  • ¿Qué es Google Tag Manager?
  • ¿Cómo instalar Google Tag Manager en tu web?
  • Conceptos básicos para gestionar Google Tag Manager
  • Principales aplicaciones de Google Tag Manager

VÍDEO 2 con David Navarro

  • Interfaz de Google Tag Manager
  • ¿Qué son las etiquetas, activadores y variables?
  • Primeros casos en Google Tag Manager
  • 3 implementaciones habituales en Google Tag Manager
    • Inserción de código de Google Analytics
    • Clic en imágenes/enlaces
    • Configuración de scroll para mejora de la conversión

[/content_box][/content_boxes]

¿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!

[enlaces_pie_post]
[related_post posts_ids=’21289,21083,16606′]