{"id":16529,"date":"2020-02-02T17:20:08","date_gmt":"2020-02-02T16:20:08","guid":{"rendered":"https:\/\/clientes.ignaciosantiago.com\/new\/tutorial-google-tag-manager\/"},"modified":"2026-02-24T12:58:57","modified_gmt":"2026-02-24T11:58:57","slug":"tutorial-google-tag-manager","status":"publish","type":"post","link":"https:\/\/clientes.ignaciosantiago.com\/new\/tutorial-google-tag-manager\/","title":{"rendered":"Google TAG MANAGER, C\u00f3mo Instalarlo y Configurarlo"},"content":{"rendered":"\n

\u00bfHas escuchado hablar de Google Tag Manager<\/strong> pero no sabes c\u00f3mo funciona? \u00bfTe interesa conocer qu\u00e9 hace un usuario cuando navega por tu web<\/strong>? \u00a1Est\u00e1s en el sitio correcto! Si tienes una p\u00e1gina web<\/a>, tienda online<\/a>, o blog<\/a>, necesitas saber qu\u00e9 hace un usuario cuando aterriza en ella. Por ejemplo saber qu\u00e9 enlaces visit\u00f3, d\u00f3nde hizo click, cu\u00e1ntas descargas se hicieron de un determinado recurso, reproducciones de v\u00eddeos, viralizaci\u00f3n de un contenido, y un largo etc. Esto te permite analizar qu\u00e9 le gusta al usuario y optimizarlo para maximizar las conversiones. Por ello, te he preparado esta gu\u00eda sobre Google Tag Manager<\/strong>, c\u00f3mo instalarlo y configurarlo.<\/p>\n\n\n\n

\"guia<\/figure>\n\n\n\n

Como muchos, es probable que desconozcas esta herramienta. Por ello, he querido presentarte esta gu\u00eda, cortes\u00eda de Luis Revuelto<\/strong>, consultor SEO y de marketing online<\/a>, para que empieces a utilizarla y aprovechar las ventajas de Google Tag Manager<\/strong>. Pero antes de entrar en materia, quiero explicarte en qu\u00e9 consiste, as\u00ed que vamos paso a paso, ya que no solo te explicar\u00e9 como instalarlo y configurarlo, sino que te he tra\u00eddo un caso pr\u00e1ctico para que entiendas mejor esta herramienta<\/strong>.<\/p>\n\n\n\n

Qu\u00e9 son las etiquetas o tags, c\u00f3mo funcionan y para qu\u00e9 sirven<\/h2>\n\n\n\n

Con los tags o etiquetas,<\/strong> nos referimos a un pedazo de c\u00f3digo que colocamos sobre los elementos de la web para hacer seguimiento de la interacci\u00f3n del usuario<\/strong> con dichos elementos. Lo que ocurr\u00eda hasta hace no mucho tiempo, es que la colocaci\u00f3n indiscriminada de estos bloques de c\u00f3digo, provocaba un rendimiento pobre de la p\u00e1gina web, al usar c\u00f3digo redundante o utilizarlo incorrectamente.<\/p>\n\n\n\n

Google Tag Manager facilita el proceso de etiquetado sobre los elementos de la web, para no sobrecargar la p\u00e1gina con c\u00f3digo repetido.<\/p>\n\n\n\n

Con Google Tag Manager<\/strong> se acaban dichos problemas, porque s\u00f3lo tenemos que insertar c\u00f3digo una vez<\/strong> y nos podemos olvidar para el futuro, ya que haremos los cambios a trav\u00e9s de una interfaz. Puedes preguntarte, \u00bfc\u00f3mo es posible? Muy sencillo. B\u00e1sicamente lo que hace es crear las funciones necesarias en su propio servidor y se realiza una llamada a estas funciones<\/strong> desde el bloque de c\u00f3digo insertado. Veamos c\u00f3mo utilizarlo\u2026<\/p>\n\n\n\n

C\u00f3mo instalar y configurar Google Tag Manager<\/h2>\n\n\n\n

Instalar y configurar Google Tag Manager<\/strong> es muy sencillo. No obstante, en caso de que presentes dificultades en alg\u00fan paso, te he preparado este tutorial bien explicado, para facilitarte el proceso. Si te quedas con alguna duda o pregunta, d\u00e9jalo en los comentarios y te ayudar\u00e9 encantado.<\/p>\n\n\n\n

#1 Instalar Google Tag Manager<\/h3>\n\n\n\n
\"tutorial<\/figure>\n\n\n\n

Para instalar Google Tag Manager<\/strong> en tu sitio web, lo primero que debes hacer es registrarte en Tag Manager<\/a>. Si tienes cuenta de Google, ya sabes Gmail, s\u00f3lo tienes que pulsar el bot\u00f3n SIGN IN.<\/p>\n\n\n\n

Pantalla Inicial<\/h4>\n\n\n\n
\"tutorial<\/figure>\n\n\n\n

Una vez entras en la plataforma, tendr\u00e1s que crear una nueva cuenta <\/strong>para obtener el c\u00f3digo de Google Tag Manager, que es el llamado \u201cContenedor<\/strong>\u201d. Se mostrar\u00e1 la siguiente pantalla, que puedes rellenar con el nombre de tu proyecto (en ambas casillas).<\/p>\n\n\n\n

Contenedor<\/h4>\n\n\n\n

En este caso, te voy a mostrar c\u00f3mo hacer seguimiento de un sitio web<\/strong>, pero tambi\u00e9n se puede utilizar para rastrear el comportamiento en una aplicaci\u00f3n de Android o iOS. Haces click en el bot\u00f3n \u00abCrear\u00bb y te mostrar\u00e1 el acuerdo legal que aceptamos siempre que usamos una aplicaci\u00f3n. Al aceptarlo se muestra una nueva pantalla con el c\u00f3digo de inserci\u00f3n<\/strong> como puedes ver a continuaci\u00f3n:<\/p>\n\n\n\n

C\u00f3digo Google Tag Manager<\/h4>\n\n\n\n
\"tutorial<\/figure>\n\n\n\n

Este ser\u00e1 el \u00fanico, repito, el \u00fanico c\u00f3digo que tendr\u00e1s que insertar en tu web<\/strong>. Simplemente copia lo que viene en el recuadro y p\u00e9galo en el c\u00f3digo HTML de tu sitio. Te\u00f3ricamente debe ser justo despu\u00e9s de la etiqueta <body>, pero yo os recomiendo hacerlo dentro de <footer>.<\/p>\n\n\n\n

#2 Configurar el contenedor de etiquetas<\/h3>\n\n\n\n

El siguiente paso es configurar las etiquetas que utilizar\u00e1s dentro de tu contenedor. Los elementos m\u00e1s importante que debes conocer son las etiquetas<\/strong>, los activadores<\/strong> y las variables<\/strong>. Vamos a ver uno por uno.<\/p>\n\n\n\n

Etiquetas<\/h4>\n\n\n\n
\"tutorial<\/figure>\n\n\n\n

Las etiquetas<\/strong> son los bloques que c\u00f3digo que hacen el trabajo de medici\u00f3n de la interacci\u00f3n del usuario. Una gran ventaja es que la sintaxis de estos est\u00e1 predefinida en plantillas de etiquetas para las diferentes herramientas de medici\u00f3n de que existen (Google Analytics, CrazyEgg, ClicTale\u2026).<\/p>\n\n\n\n

Esto permite que t\u00fa solo tengas que decirle qu\u00e9 es lo que quieres medir. Desde una p\u00e1gina vista (lo que seguramente ya est\u00e1s haciendo si utilizas Google Analytics), hasta transacciones, tiempos, interacciones sociales o eventos, como puede ser la reproducci\u00f3n de un recurso.<\/p>\n\n\n\n

Variables<\/h4>\n\n\n\n
\"tutorial<\/figure>\n\n\n\n

Las variables o macros<\/strong> sirven para almacenar los valores que recogeras de la interacci\u00f3n del usuario con tu sitio web. Google Tag Manager nos presenta variables ya predefinidas que recogen datos como por ejemplo la URL de la p\u00e1gina <\/strong>sobre la que act\u00faa el usuario, el elemento sobre el que hace clic<\/strong>, valores de un formulario<\/strong>\u2026etc.<\/p>\n\n\n\n

Activadores<\/h4>\n\n\n\n
\"tutorial<\/figure>\n\n\n\n

Los activadores o reglas<\/strong> sirven para manejar lo que ocurre en el sitio web, decidiendo cu\u00e1ndo se debe ejecutar el c\u00f3digo que recoge los datos de los que te hablaba anteriormente. Es decir, qu\u00e9 acci\u00f3n es la que desencadena la medici\u00f3n. Por ejemplo, cu\u00e1ndo el usuario hace clic sobre un determinado enlace.<\/p>\n\n\n\n

Caso Pr\u00e1ctico: Seguimiento de clics externos<\/h2>\n\n\n\n

Vamos a ver un caso pr\u00e1ctico, que es la mejor manera de aprender el funcionamiento de una herramienta.  Tengo un blog de recetas y quiero comprobar los clics que recibe un banner <\/strong>colocado en mi web, fundamental para pasarle la factura al anunciante (X clics multiplicado por el precio acordado) a final de mes. El anunciante en este caso ser\u00eda el agregador de recetas buscador-de-recetas.com<\/strong>.<\/p>\n\n\n\n

Puedo controlar todo lo que ocurre a lo largo y ancho de las p\u00e1ginas que componen el blog, pero cuando el usuario sale de mi p\u00e1gina, le pierdo la pista. Sin embargo, con Tag Manager<\/strong> puedo saber sobre qu\u00e9 enlace hizo clic <\/strong>el usuario. Para ello, yo empezar\u00eda por crear una etiqueta<\/strong> (para mi gusto es m\u00e1s f\u00e1cil aclararse). Con la etiqueta le dir\u00e9 que quiero un bloque de c\u00f3digo que realice el seguimiento de un suceso en la web<\/strong> (Ej. se ha visto una p\u00e1gina, se ha hecho una transacci\u00f3n, ha ocurrido un evento como en ser\u00e1 en este caso). Los datos que tengo que rellenar en la etiqueta ser\u00edan los siguientes:<\/p>\n\n\n\n

    \n
  • El ID de seguimiento de Google Analytics (lo podemos recoger previamente en una variable)<\/li>\n\n\n\n
  • Tipo de seguimiento (en este caso Evento)<\/li>\n\n\n\n
  • Categor\u00eda (clasificaci\u00f3n para aclararnos en Google Analytics, pondremos Banners)<\/li>\n\n\n\n
  • Acci\u00f3n (la recogemos con una variable)<\/li>\n\n\n\n
  • Etiqueta (una subcategor\u00eda, en este caso podemos darle el nombre de la marca a la que corresponde el banner)<\/li>\n<\/ul>\n\n\n\n
    \"tutorial<\/figure>\n\n\n\n

    Buscador de recetas<\/h3>\n\n\n\n

    Etiqueta Buscador de Recetas<\/h4>\n\n\n\n
      \n
    • Ojo, en la Configurar Etiqueta le puedes dar una prioridad para asegurarte de que no interfiere con otras etiquetas (en este caso no ser\u00e1 necesario).<\/li>\n\n\n\n
    • En el siguiente paso, \u201cActivar\u201d, te dir\u00e1 que necesita un activador<\/strong>, que puede ser el simple clic o algo m\u00e1s espec\u00edfico. Como en nuestro caso, un clic en un banner determinado.<\/li>\n<\/ul>\n\n\n\n

      De aqu\u00ed te puedes ir directamente a la pantalla de Activadores para crear un activador, que vamos a ver a continuaci\u00f3n.<\/p>\n\n\n\n

      \"tutorial<\/figure>\n\n\n\n

      Activador para el buscador de recetas<\/h4>\n\n\n\n
        \n
      • Selecci\u00f3n del tipo de evento: \u201cClic\u201d<\/li>\n\n\n\n
      • Configurar activador: \u201cSolo enlaces\u201d<\/li>\n\n\n\n
      • Habilitar cuando, es decir, \u00bfcu\u00e1l es el detonante de que empiece a medir? En este caso que est\u00e9 en una URL determinada, concretamente en la Home.<\/li>\n\n\n\n
      • Activar, es decir, las condiciones particulares de esta etiqueta. En este caso, s\u00f3lo cuando la URL sobre la que se est\u00e1 haciendo clic (Clic URL) sea la que estamos buscando. En mi caso basta con poner solo que contiene el nombre de dominio, ya que s\u00f3lo tengo un banner que enlaza hacia buscador-de-recetas.com<\/li>\n\n\n\n
      • Guardamos el activador<\/li>\n<\/ul>\n\n\n\n

        El siguiente paso es volcar estos datos al contenedor, para lo cual tenemos el bot\u00f3n Publicar en la parte superior derecha. Pero alto, antes de publicar, te recomiendo que compruebes que lo que acabas de implementar funciona. \u00bfC\u00f3mo? Google Tag Manager ofrece un bot\u00f3n de vista previa y depuraci\u00f3n<\/strong>.<\/p>\n\n\n\n

        \"tutorial<\/figure>\n\n\n\n

        Para ello, tenemos que tener abierta una pesta\u00f1a en el navegador, con la web sobre la que estamos trabajando. Al pulsar Vista Previa<\/strong>, se nos cargar\u00e1 un apartado de depuraci\u00f3n<\/strong> en el navegador (similar a las herramientas para desarrolladores). Ah\u00ed nos ir\u00e1 indicando las Etiquetas que se van ejecutando con la interacci\u00f3n en la p\u00e1gina. Por ejemplo, veamos qu\u00e9 ocurre si hago clic en el banner que estoy realizando seguimiento,<\/p>\n\n\n\n

        \"tutorial<\/figure>\n\n\n\n

        F\u00edjate en los recuadros que te he marcado. Cuando he hecho clic en el banner de Buscador de recetas<\/strong>, se ha disparado la Etiqueta Buscador de recetas<\/strong> (adem\u00e1s de otras dos que tengo yo puestas en esta p\u00e1gina). Y como puedes ver en el resumen de la izquierda, recoge los datos relacionados con este clic<\/strong> (clic y enlace). As\u00ed que funciona perfectamente, ya puedes ir\u00edamos a Publicar. No te olvides de Publicar cuando est\u00e9s seguro de que est\u00e1 correctamente implementado. Por si acaso, te va avisando de los cambios no publicados todo el tiempo.<\/p>\n\n\n\n

        Ahora pasamos a comprobarlo en Google Analytics. Antes ten\u00edas que esperar un par de d\u00edas a ver los resultados de tus cambios en esta herramienta de anal\u00edtica web. Lo bueno es que ahora puedes verlos en tiempo real<\/strong>. As\u00ed que me voy a Tiempo Real> Eventos y puedo ver los resultados de esta implementaci\u00f3n en GTM.<\/p>\n\n\n\n

        Comprobaci\u00f3n Eventos en Google Analytics<\/h3>\n\n\n\n
        \"tutorial<\/figure>\n\n\n\n

        Como puedes ver, muestra que ha habido una interacci\u00f3n con el Banner<\/strong>, donde la URL sobre la que se ha hecho clic es efectivamente buscador-de-recetas.com<\/strong>. Por tanto vemos que funciona y ya podemos empezar a medir la cantidad de clics que tiene nuestro banner.<\/p>\n\n\n\n

        Conclusi\u00f3n: Utiliza Google Tag Manager para conocer a tus usuarios en la web<\/h2>\n\n\n\n

        Como habr\u00e1s podido comprobar, Google Tag Manager es una herramienta muy \u00fatil para conocer el comportamiento que tienen tus usuarios en tu web. Resulta muy f\u00e1cil de instalar y configurar, lo que facilita enormemente su uso. Espero que lo hayas entendido bien con el caso pr\u00e1ctico de ejemplo que te he a\u00f1adido. \u00bfQu\u00e9 te ha parecido esta gu\u00eda de Google Tag Manager<\/strong>? \u00bfConoc\u00edas esta herramienta y c\u00f3mo instalarla y configurarla? \u00bfHay algo que te haya llamado la atenci\u00f3n? \u00bfCrees que me he dejado algo? \u00bfTe has quedado con alguna duda o pregunta? Entonces te pido que dejes un comentario<\/strong>. Da igual que sea o una duda o un simple gracias, pero me alegrar\u00e9 mucho de leerlo y responderlo.<\/p>\n","protected":false},"excerpt":{"rendered":"

        \u00bfHas escuchado hablar de Google Tag Manager pero no sabes c\u00f3mo funciona? \u00bfTe interesa conocer qu\u00e9 hace un usuario cuando navega por tu web? \u00a1Est\u00e1s en el sitio correcto! Si tienes una p\u00e1gina web, tienda online, o blog, necesitas saber qu\u00e9 hace un usuario cuando aterriza en ella. Por ejemplo saber qu\u00e9 enlaces visit\u00f3, d\u00f3nde […]<\/p>\n","protected":false},"author":6,"featured_media":16530,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":0,"footnotes":""},"categories":[202,213,192],"tags":[],"class_list":["post-16529","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-herramientas-y-recursos-online","category-google-internet-y-tecnologia","category-internet-y-tecnologia"],"_links":{"self":[{"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/posts\/16529","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/comments?post=16529"}],"version-history":[{"count":5,"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/posts\/16529\/revisions"}],"predecessor-version":[{"id":46795,"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/posts\/16529\/revisions\/46795"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/media\/16530"}],"wp:attachment":[{"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/media?parent=16529"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/categories?post=16529"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/clientes.ignaciosantiago.com\/new\/wp-json\/wp\/v2\/tags?post=16529"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}