Growth Hacking

Cómo usar Tag Manager para registrar la interacción en tu web

Descubre cómo usar Google Tag Manager para enviar cualquier interacción en tu web a Google Analytics. ¡Post con Vídeo!

Cucha, te lo digo de verdad. Me acabo de tirar 45 (¡no! ¡Cuescos no!) minutos intentado y reintentando grabar el vídeo que acompaña este post. Cada vez que lo grababa decía “prestad mucha atención al configurar el objetivo de conversión en Analytics, que tiene que estar exactamente igual que en Tag Manager o no funciona”. Y luego yo iba y no me salía y era por una mayúscula ahí. ¡Esto qué es lo que es!

¡Hola! ¿Cómo lo llevas? Estarás ya de turrón hasta el (rima como quieras)… ¿No? Yo deseando que llegue la noche de Papa Noel y ver la cara de Marina. ¡Qué ilusión!

Como ilusión, aunque no tanto, todo sea dicho, me hace volver a estar hoy contigo con nuevo post. Un post en el que vamos a hablar sobre cómo registrar como eventos en Analytics los clics en determinados elementos de nuestra web o blog.

¿Qué esto para qué? Leñe, pues empieza con la lectura, ,cosica impaciente…

¿Para qué registrar la interacción de nuestros usuarios?

Ahí estaba yo, sonriendo mientas José me enseñana su web súper chula. Un ecommerce que ni pintao. Los de Amazon no paran de hacerle ofertas de todo lo que lleva la web. Cucha, orgulloso estaba a más no poder. Entonces le miré y le dije: “el botón de añadir a mi lista de deseos tiene que desaparecer”. Se me quedó blanquito…

¿Alguna vez te has planteado si hay elementos en tu web que, a pesar de ser más cool que el tanga de Baltasar, no sirven para nada?

Bueno, a ver, servir, sirven, casi seguro. Pero, la pregunta más seria: ¿los usan tus visitantes? ¿Aportan valor y funcionalidad útil o son solo un adorno?

Porque una cosa está clara: keep it simple, my friend. Entonces, pregunto yo, ¿podría darse el caso que hay elementos en nuestra web que no los usa ni la chacha Roca?

La respuesta a esta pregunta, que deberías hacértela, no puedes darla desde el corazón, aleja tu parte emocional.

La respuesta, estrellica de arriba del árbol, te la tiene que dar la Analítica Web. ¿no crees?

Y ahora dime, ¿en serio necesitas que te responda a la pregunta que pone título a esta sección? ¿O ya te vas haciendo una ideica?

Paso a paso: registrar clics en Analytics con Tag Manager

Pongo unos títulos de sección que son de deSEO. ¿Pillas? ¿Eh? ¿Ves que fino?

Bueno, pues ahora que ya estás frotándote las manos, no por el frío sino por la cantidad de preguntas que vas a poder responder en unos días, voy a contarte cómo hacerlo. ¿Vale?

Eso sí, si eres ganduliki, pues echa un ojo al vídeo. Si no, pues a leer. ¡Vamos!

1. Activar las variables de sistema relacionadas con el clic

Hace unos meses configuré este trackeo y resultaba un poco más difícil que ahora. Sin embargo, las novedades que incluye Tag Manager, entre las que está reconocer y enviar a través de una variable el elemento en que se ha hecho clic, no vienen activadas por defecto.

activar variables sistema tag manager

Así que lo primero que haremos es:

  1. Ir a Tag Manager.
  2. Pinchar en Variables.
  3. En “Variables integradas” daremos sobre configurar.
  4. Bajamos al grupo de “CLIC” y activamos la de “Clic Element”.

Con eso ya tendremos accesibles en Tag Manager los elementos de nuestra web en los que se hace clic.

Ahora bien, ¿quieres que se produzca un evento cada clic? ¿En cualquier elemento? Porque como le dé a un lector por estar “metralleta” no veas tu la que te lía.

¿Verdad que no? Pues siguiente punto.

2. Localizar el selector único de los enlaces

Aunque se puede especificar de muchas formas, en mi experiencia la ideal para decirle a Tag Manager qué elemento deberá ser clicado para lanzar el evento es (respira) usar selectores CSS.

Para que me entiendas, el selector CSS es un texto que determina al elemento o a los elementos del mismo tipo. Es como decir “estos enlaces concretos” o “este enlace concreto”. ¿Pillas?

localizar el selector css

Lo necesitarás, lo siento:

  1. En Chrome, pincha con el botón derecho sobre el enlace y dale a “Inspeccionar”.
  2. Si el elemento tiene un ID estás de suerte, apunta ese ID.
  3. Si no tiene ID, tendrás que profundizar así que te recomiendo aprender selectores CSS con este sencillo juego.
  4. Recuerda que, en Chrome, puedes pinchar con el botón derecho sobre el código de un elemento (en inspeccionar) y darle a Copiar->Copiar Selector. En la mayoría de las ocasiones te servirá como punto de partida.

En el ejemplo que te he puesto en el vídeo verás que hemos tenido suerte y simplemente hemos apuntado el ID.

Vaaaale, esto es un poco PRO. Pero… ¡estamos hablando de Tag Manager! Esto es PRO, como tú. Una miajica de paciencia, motívate, mírate el vídeo y lo sacas fijo. Recuerda también que puedes echarle un ojo a mi guía de iniciación y trucos sobre Tag Manger.

3. Configurar el desencadenador en Tag Manager

Digamos que los dos pasos anteriores equivaldrían a la preparación del asunto. Los necesitábamos, pero el meollo (y lo fácil, dicho sea de paso) está en éste y el siguiente punto.

Tag Manager funciona activando etiquetas cuando ocurren activadores. Con lo cual, tenemos que definir el activador (cuándo queremos que se active la etiqueta) y la etiqueta (qué queremos que haga cuando ocurra el activador).

¿Pillas la relación? Acción, reacción. Suceso, consecuencia.

configurar activador Tag Manager

Pues a seguir los pasos:

  1. Dirígete a Activadores y pincha sobre agregar uno nuevo.
  2. Ponle un nombre descriptivo al activador. Por ejemplo: “Clic en el botón de dejar comentario”.
  3. Pincha sobre “configurar el activador” y escoge “Clic -> Solo enlaces”.
  4. En la parte de abajo, en vez de “Todos los enlaces”, selecciona “Algunos clics en enlaces”.
  5. En la condición, de izquierda a derecha, escoge: “Click Element”, “coincide con el selector CSS” y el selector CSS que has encontrado con el punto anterior.
  6. Guarda el activador.

Ya está, pasicos sencillos. Te juro que he visto recetas de arroz a la cubana más complicadas que esto. Palabrica de Pearson (suspira Che). ¿Seguimos? ¡Venga, animo!

4. Configurar la etiqueta de evento de Analytics en Tag Manager

Y, por último, tendremos que configurar la etiqueta que queremos que se active cuando ocurra el activador anterior.

La verdad es que sí, eso de “etiqueta” confunde un poco, ¿no? Cada vez que nos compramos gayumbraguis, lo primero que hacemos es quitarles la etiqueta. Sobre todo si son del Primark, que cada etiqueta parece “El Quijote” a doble espaciado. Y aquí poniendo etiquetas. Qué cosas…

En fin. Para que tú lo entiendas, la etiqueta en Tag Manager es “hacer algo”. O “poner algo”. O “provocar algo”. ¿Me sigues? En nuestro caso, la etiqueta es “enviar a Google Analytics un evento”. Lo pillas, ¿verdad?

configurar etiqueta del evento

Entonces, los pasos son:

  1. Ve a etiquetas y añadae una nueva.
  2. Ponle un nombre.
  3. Selecciona Universal Analytics como el tipo de etiqueta.
  4. En tipo de seguimiento, escoge evento.
  5. Rellena Categoría, Acción y Etiqueta a tu gusto. Puedes poner lo que quieras, pero, eso sí, anótalo para luego usarlo en Analytics. ¿Vale?
  6. No olivdes de especificar una variable de configuración de Analytics.
  7. De guardar.

¡Y ya está! Ahora ya tienes la etiqueta que se activa cuando ocurre el activador del punto anterior.

Dicho de otra forma, ya has configurado Tag Manager para que envíe un evento a Google Analytics cada vez que se pinche sobre un link determinado. Ahí es nada. ¿Verdad?

Comprobar que funciona con la vista preliminar de Tag Manager

Después de seguir los pasos, una vez terminas, te invade esa sensación de haber estado experimentando con material explosivo, mezclando ingredientes radioactivos solo que en este caso no hay humo, no ocurre absolutamente nada. Acabas y todo sigue igual.

Y ahí te quedas tú, con la máxima decepción, sin nadie que te felicite y sin una confirmación de haberlo hecho bien. Una lágrima cae por tu ojo, te la secas y sacas pecho, en sentido figurado que hace frío. Te decides a, al menos, comprobar que lo has conseguido. Te prometes un premio…

¡Ajá! Que quieres comprobar si lo has hecho bien, ¿no? Pues es muy sencillo, más fácil de lo que opinas. Para ello sólo tienes que pinchar, en Tag Manager, donde pone Vista Previa.

Cuando activas eso, al visitar tu web con el mismo navegador (pestaña nueva), te aparece abajo un resumen de Tag Manager donde puedes ver qué etiquetas se van activando.

Y lo bonito es ir al enlace, pincharlo y ver que se activa la etiqueta. ¡Lo hiciste bien!

Vista previa de Tag Manager

Por otro lado, puesto que ahora iremos a Analytics, también puedes ir a ver Eventos en tiempo real… ¡Comprueba que todo te ha ido bien!

¿Usar esos eventos como conversiones?

Bueno y, ¿ahora qué? ¿Qué puedes hacer con esos eventos? Ya los estás registrando, pero, ¿te sirve de algo?

Claro, el primer paso es registrar y el segundo, y quizás más importante, revisar los datos y entender. Vamos, responder preguntas.

Yo suelo ir a Google Analytics y configurar como objetivo el evento para así poder ver, por ejemplo, por países, sesiones, profundidad o cualquier otra métrica, relacionada con el evento en concreto.

En el vídeo te explico cómo configurarlo como objetivo. Tampoco quiero extenderme mucho por aquí.

Pero también puedes hacer una revisión más sencilla. Por ejemplo: ¿cuántos eventos se han producido en los últimos 30 días? Si la respuesta es 5, igual ese botón no es visible o simplemente no es útil. ¿Me sigues?

configurando objetivo en Analytics

De ahí, tu imaginación y capacidad analítica, hasta el infinito partido por 0…

Concluyendo

¡Y por fin el final! ¿Qué tal? ¿Cómo lo llevas? Madre mía, que post al final. ¿No? Venga pos concluyo que es geruyo.

Como ves, la analítica digital es apasionante siempre que partas de una perspectiva de pregunta previa. Ver las respuestas y luego hacer preguntas no sirve de mucho, porque las preguntas no serán inquietudes reales.

Sin embargo, si primero preguntas, ver cómo consigues responderlo de forma analítica es realmente reconfortante. Apuff que pedante. Es guay, así queda mejor.

Y, con Tag Manager y Analytics, la cosa no es tan difícil. Quizás te haya parecido cosa demasiado técnica pero, si te tomas un café despacio disfrutando del post, verás que está al alcance de cualquiera.

¿O no opinas igual? ¿Crees que esto es demasiado complicado? ¿Conocías esta forma de analizar? ¿Cómo usas Tag Manager en tu proyecto? ¿Qué opinas de los rumores sobre que Dustin Henderson va a dejar de cecear en la tercera temporada? ¡Cuenta, cuenta!

¿Qué te ha parecido este artículo?

¡Espero que te haya gustado! ¿Me permites pedirte un favorcito?

1. Participa con tu comentario

Los comentarios son el alma de este blog. Aquí se premia la participación y la comunidad es lo más. ¡Prueba!

Dejar un comentario

2. ¡No olvides compartirlo!

Se llama generosidad: si algo te gusta y puedes compartirlo, ¿por qué no hacerlo?

¡Millones de gracias! Te lo agradezco un montonazo, de verdad.

Acerca del autor

Víctor Campuzano

Growth Hacker no soy, pero lo vivo. De mi blog no vivo, pero aquí si que soy como soy. Marketing Digital, Creatividad y Blogging con pasión y desenfado.

Hazte notar. ¡Participa!

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

21 comentarios

  • Hola Victor!

    Para empezar Felices Fiestas!
    Y bueno vamos al meollo que es lo que mola jeje.
    Llevo haciendo cosas con Tag Manager en momentos sueltos y lo cierto es que por lo poco que he probado me parece enorme el potencial y sobre todo de cara a tener todo controlado y centralizado.
    Tengo que darle más continuidad para que cada vez que vuelvo a ponerme, no tenga que verme y leerme tus post y varios videos de la herramienta… Se me ocurre… 21 días usando Google Tag Manager! jajaja.

    Tengo un par de cuestiones al respecto:

    1.- El uso que explicas me parce genial pero tal y como dices usas el ID del boton no? Que pasa si tienes varios botones con el mismo ID dentro de la web? Supongo que registra todos los eventos que se generen en esos botones… Igual aquí me estoy colando y se me escapa algo… Es posible,

    2.- El seguimiento que se configura en Analytics del evento para ver las conversiones (en este caso clicks), es similar al de configurar la siguiente página que va tras el click en Objetivos no?. Por ejemplo la página “gracias” después del “suscribirse”. Solo es una duda porque este es el que uso generalmente. Con esto no digo que sea lo mismo solo que me parece que tiene más potencial configurar los objetivos desde GTM si te paras a configurar todo de forma óptima.

    Usar Google Tag Manager, para ser gratis, es muy buena y para que negarlo… divertida. Sobre todo en mi caso cada vez que hago algo en el y veo que funciona como espero o quiero, se me produce el Ahá moment! jajaja. Creo que es una herramienta que todo el rato está consiguiendo ese efecto. O por lo menos a mi me lo transmite cuando tú lo cuentas y lo hago. Todo un pequeño growth hack perfectamente escondido en cada post jeje.

    Y nada que me despido ya. Que tengas buen año y espero con ganas ese 2018 por tu parte… Tengo algunas cosas marcadas en el calendario y aprender más de bots y machine learning es una de ellas…

    Un abrazo!

    • Hola Men!!

      Bueno, primero gracias por estos comentarios que, también molan mucho porque aportan valor… Voy a responderte por puntos vale??

      1. En teoría, no debe de haber más de un elemento con el mismo ID en una página según la especificación de HTML. Sin embargo, podría darse el caso de que, en vez de seleccionar por el ID, selecciones por la clase CSS y en ese caso, como bien dices, cualquier clic a cualquier elemento que cumpla con la especificación desencadenaría la etiqueta.

      2. Es parecido pero debes tener en cuenta que con Tag Manager sólo envías un evento a Analytics. Luego esos eventos puedes verlos como “consulta” o puedes configurar objetivos de conversión. Si no lo haces, Analytics registra el evento y sigue adelante. Si configuras el objetivo, entonces es como decir a Analytics “cada vez que se produzca este evento he cumplido un objetivo de conversión”. Pero es independiente de Tag Manager. Tag Manager sólo envía el evento a Analytics.

      Jo, muchas gracias. Yo también te deseo lo más este 2018! 🙂

      Fuerte abrazo! 🙂

  • Víctor, uf! Demasiado complicado para mí. Pero reconozco que para ser un buen growth te tienen que gustar mucho las analíticas y que sin analíticas no puedes escalar tu proyecto. Y si no escalas tu proyecto, trabajas el doble para conseguir la mitad.

    Así que es mejor que empiece a hacerme amigo de las analíticas; pero lo dejaré para el año que viene…

    • Claro que si guapi!!!

      Jajaja. Mira el mundo de la analítica es una pasada, cuanto más lo entiendes más te vicias..

      Ya me vas contando sobre tus avances ratonzuelO! :I)

  • Buenas Victor y Feliz Navidad por cierto!
    Muy interesante este post de Tag Manager!! La verdad que es una herramienta por explorar por muchos, entre los que me incluyo.
    Sinceramente, a bote pronto y en frío, no veo lo de controlar los clics del botón de comentarios, ya que o te escriben o no te escriben… Pero esto es como todo, cuestión de pensar y verle que utilidad se le puede sacar.

    Saludos!!

    • Hola José Manuel!!

      Jo, pues muchas gracias por el comentario!! Si, Tag Manager es una pasada.

      Mira, te cuento por qué mido yo los clics. No es para medir cuántos comentarios me dejan (eso ya se ve) sino para determinar si el botón, en ese punto del post, es atractivo y la gente lo usa o lo quito. Si veo que la gente sigue dejándome comentarios pero no pincha en ese botón, pues para qué ocupar espacio. ¿Me sigues?

      Es como el botón de añadir a favoritos en una tienda online. ¿Por qué no medir y ver si es útil? Si no lo es, ¿para qué dejarlo?

      Saludos! 🙂

  • Muy buen aporte caballero, tal vez podríamos combinar en el activador Click Element + Page URL y con eso afinamos que no tengamos ese id repetido.

    Cómo siempre aprendiendo de tí.

    Que pases un gran fin de año y a ver si coincidimos en el 2018. Un abrazo.

    • Buena sugerencia señor Dios!!!

      Ganas de esa jornada que tenemos pendiente! 🙂

      Fuerte abrazo.

  • Hola Victor

    Buenas Tardes, muy buen articulo!

    Tengo solo una duda, si existe la posibilidad de hacer “push” a la capa de datos para el envío de las variables de los eventos (Evento, Categoría, acción y etiqueta) y capturarlos de esa manera por Google Tag Manager. Que es lo más optimo ¿configurar los eventos por el clic en el selector de CSS y/o las herramientas propias de Google Tag Manager? o ¿Usar la capa de datos?

    Desde ya muchas gracias!

    • Muy buena pregunta Andrés!!

      Yo me decantaría por la opción del selector de CSS de Tag Manager porque no te requiere que programes, que hagas el push a la capa de datos. De hecho, lo del push de la capa de datos hay que depurarlo bien porque muchas veces no funciona el trigger.

      Ahora bien, con las dos vías podrías.

      Saludos!

  • Hola Víctor, que gusto haber encontrado tu sitio web, felicidades!

    Este artículo es fantástico, lástima que el seguimiento de la conversión no me sale, ¿tu ya lo resolviste?
    Muchas gracias por compartir tanta y tan buena vibra e información 😉

    Saludos.

    • Hola Manu!!

      Si tío, a mi ya me funciona todo ok. ¿Donde tienes el problema? ¿Te echo un cable?

      Gracias, eso si, por tus palabras! 🙂

      • Hola Víctor!

        Muchas gracias por la respuesta y la disposición, eres un tipazo!

        Hice el evento en google tag manager, como describiste y este si lo captura y muestra google analytics en tiempo real. También hice el objetivo en analytics, siguiendo las instrucciones, pero es ahí donde tengo incompleto el paso, ya que analytics no lo registra en tiempo real ni en el informe de conversiones 🙁

        Aprecio mucho tu entusiasmo para compartir tu tiempo y conocimiento, recibe un saludo.

      • Hola Manu!!

        Creo que ya lo arreglamos juntos por skype, verdad? Resultó ser un problema de una vista de Analytics que había por ahí dando follón. ¿Puede ser o estoy confundido?

        Saludos!

  • Hola, gracias por el tutorial.
    En el caso que en lugar de contabilizar la acción en el botón supongo que también se podría contabilizar una pagina especifica y que cuando llegue aun número concreto de vistas se pueda enviar un correo específico diciendo que se ha conseguido el objetivo?
    Saludos.
    Rafa Corts

    • Hola Rafa!!

      Poderse se puede aunque no se si he entendido bien lo que quieres. Si quieres que se envíe un correo cuando un usuario visita X veces una página, puedes hacerlo pero necesitas las funcionalidades de SiteTracking de herramientas de email marketing como Active Campaign.

      Si no te interesa enviar al usuario, puedes poner en analytics una alerta personalizada cuando un usuario visite la misma página x veces.

      En ambos casos Tag Manager es accesorio.

      ¡Espero haberte servido de ayuda!

  • Hola, Víctor como siempre un maquina del Grow Hacking, espero que me puedas ayudar, desde hace varias semanas tengo el CustomChat de Facebook Messenger instalado en mi página web, la verdad me ha funcionado muy bien pero no sé como registrar esa interacción que se produce en mi web, quiero saber en qué página se produce para medirlo y crear una conversión, ya que es una de las formas de contacto que más está creciendo en mi página.

    Espero que sepas como ayudarme, gracias!!

    • Hola Antonio!

      Es muy buena pregunta y reconozco que, tras investigar un poco, me he quedado cerca pero no he llegado a encontrar la respuesta. Por lo que he podido leer debes crear un Javascript que capture el evento click del botón Chatear ahora y envíe un evento de DataLayer a Tag Manager. El problema es que el botón de chatear ahora está en un iframe.

      Seguro que con un poco de investigación se logrará. Yo me lo anoto para “juguetear” en otro momento pero ahora mismo no he podido dedicarle más tiempo.. Sorry.

      Nos leemos! 🙂

  • Hola Victor te agradezco el video, pero al crear el trigger, el botón al cual quiero agregarle la etiqueta en el CSS no tiene ID, pero si tiene CLASS, así que hice esto: “Click class”, “coincide con el selector CSS” y la clase del botón, pero no me ha funcionado, te agradecería mucho si explicas como usar el activador de click pero con CLASS que has encontrado con el punto anterior.

    • Hola Oswaldo!!

      Claro que si!! Me lo apunto. Ahora mismo estoy preparando el lanzamiento de una máster class sobre Tag Manager.. de lo más básico a Pro … ¿te molaría?

      Saludos!

  • Contenido súper útil y bien explicado. Enhorabuena Víctor! Estoy empezando a trastear con GTM y he de decir que después de leer / ver muchos tutoriales el tuyo es el único que me ha ayudado para conseguir lo que quería.

    Un abrazo!

Uso de cookies

Esta web utiliza cookies propias y de terceros, como Google Analytics, para optimizar su navegación y realizar tareas de análisis y las pertenecientes a WordPress. Advierto que si continuas navegando, aceptas su uso. Puede cambiar la configuración, desactivarlas u obtener más información.

ACEPTAR
Aviso de cookies
Growth Hacking

¡Muchísimas gracias por comentar!

Has hecho algo muy grande, que lo sepas. Te estoy tan agradecido que me gustaría ofrecerte un regalo: un ebook sobre "Growth Hacking para impulsar rápidamente tu proyecto". Bueno, y algunas cositas extra que descubrirás si te suscribes. ¿Me aceptarías en tu buzón? Porfi, porfi, porfi...

Rellena este formulario y empieza a disfrutar de regalos...








¡Perfecto! Te has suscrito correctamente

Víctor Campuzano

¡Ey que te mola mi blog ¿eh?!

He detectado que has visto más de 3 páginas en esta sesión y, digo yo... ¿Te está molando? Si es así, suscríbete y recibirás cada nuevo post en tu buzón, regalos exclusivos, contenido privado.. ¡Lo más de mi! ¿Quieres? ¿Si? ¡Bien!

Rellena este formulario y empieza a disfrutar de regalos...








¡Perfecto! Te has suscrito correctamente