Tutorial: Registrar Clicks en Google Analytics Usando Google Tag Manager

Una pregunta que surge constantemente en los grupos de discusión de Google Analytics y Google Tag Manager es como registrar eventos como cuando se hace clic en el botón de enviar en un formulario que envía datos usando Ajax o como registrar que un usuario hizo clic en un botón o enlace que simplemente despliega más información en la página.

Google Analytics desde hace tiempo permite el registro de este tipo de acciones, pero tiene el inconveniente de ser necesario intervenir el código fuente de la página para usar la función ga() y para esto no solo es necesario contar con un desarrollador, sino que es necesario tener acceso al servidor donde se encuentra página y hacer en esta varias modificaciones, cosa que para un Estratega en Marketing Digital no es siempre posible.

Afortunadamente Google Tag Manager tiene una solución para este tipo de caso de uso, que no solo es más fácil de implementar sino que no requiere conocimientos de programación (aunque es bueno saber sobre HTML) y sobretodo no requiere acceso al servidor donde se encuentra la página.

En este artículo vamos a ver entonces como se usa Google Tag Manager para registrar clics en elementos de una página HTML.

Inicio: Ingreso a Google Tag Manager

Para empezar es necesario ingresar a Google Tag Manager y seleccionar el contenedor que queremos modificar.



En este caso tenemos un contenedor que ya tiene una etiqueta de Google Analytics publicada.

Habilitar el registro de variables

El primer paso es muy sencillo. Debemos ingresar al área de variables y habilitar la opción de registro de clics para clases de elementos.



Clases de elementos

En esta parte es donde es útil tener conocimientos de HTML.

Clases de elementos o Click Clases se refiere a que la mayoría de los elementos de una página HTML como botones, enlaces, menus, etc. Tiene una clase asociada. Esta clase se usa principalmente para modificar como se visualiza el elemento, es decir, que color, tamaño, tipo de letra, sangría, etc. Tiene el elemento.

Google Tag Manager aprovecha esta característica para asignarle eventos o activadores a una página tal como lo estamos mostrando en este tutorial.

Para entender mejor estas características de HTML puedes visitar el artículo CSS: Sobre IDs y clases de JMuir.

Encontrar el elemento al que se le hará registro de clics

Para esta parte debemos ingresar al sitio donde queremos hacer registro de clics, por ejemplo el sitio Web del cliente, y acceder a la página en las que queremos hacer este registro de clics.



Esta parte también requiere un poco de conocimiento de HTML ya que es necesario encontrar la clase del elemento al cual le queremos hacer seguimiento.

Para esta parte vamos a suponer que se está usando Google Chrome, pero prácticamente todos los navegadores tienen esta opción.

Hacemos clic derecho sobre el elemento sobre el cual queremos registrar los clics y seleccionamos inspeccionar elemento.



Esto nos mostrará una consola HTML en la cual podemos encontrar la clase del elemento.



Para el nuestro ejemplo, queremos registrar cuando alguien hace clic sobre el botón Enviar en el formulario de contacto. Y en la consola HTML nos damos cuenta que tiene dos clases: wpcf7-form-control y wpcf7-submit. Como solo necesitamos una clase, entonces seleccionamos wpcf7-submit como la clase a la que se le seguirán los clics en esta página

Crear un nuevo activador o trigger en Google Tag Manager

Ya teniendo los datos de ULR del formulario y Clase del botón al que se le seguirán los clics. Regresamos a Google Tag Manager y creamos un nuevo activador.

Esto permitirá disparar un tag cuando se haga clic en el botón de enviar del formulario de contacto.

El nuevo activador tendrá estos datos:

Nombre: Página Contacto – Btn Enviar

Elementos: Todos los elementos

Activar en:
Cuando se encuentre un elemento con la clase wpcf7-submit Y

Cuando la URL sea la de la página de contacto



Una ves guardado, el activador se verá entonces de esta manera:



Crear una nueva etiqueta para el registro de clics en /contacto

El siguiente paso consiste en crear una nueva etiqueta en el contenedor. Esta nueva etiqueta será también del tipo Google Analytics, tendrá el mismo código (el mismo código UA-XXXXXX-1), pero cambiará el activador, es decir, esta etiqueta no se disparará en todas las páginas, sino que se disparará según lo que configuramos en el activador Página Contacto – Btn Enviar

Por facilidad, lo que haremos es duplicar la etiqueta GA – MkAtelier – Todas y a esta nueva etiqueta le cambiamos el nombre por GA – MkAtelier – Contacto y la sección activar la cambiamos de Todas las páginas por el activador creado en el paso anterior.

Entramos a la etiqueta existente



La duplicamos



Cambiamos el nombre



Borramos el activador All Pages



Asignamos como activador el creado en el paso anterior

Debemos hacer clic en el botón Más para que nos aparezca un popup con una lista de los activadores ya creados, entre esos, el creado en el paso anterior.



Seleccionamos el activador Página contacto – Btn Enviar que fue el que creamos anteriormente

Guardamos el nuevo activador en Tag Manager

Hacemos clic en Guardar lo que nos llevará nuevamente al listado de etiquetas.



Aquí se puede ver que la nueva etiqueta quedó guardada correctamente y que su activador es Página contacto – Btn Enviar

Probar el contenedor

Este paso es fundamental antes de publicar la nueva versión del contenedor ya que nos permite verificar si se están “disparando” las etiquetas en los lugares correctos.

Entonces, desplegamos el menú de publicar y seleccionamos la opción de vista previa



Lo que no arrojará esta notifiación.


Estando en vista previa, abrimos una nueva cejilla en nuestro navegador y navegamos a la página donde se encuentra el formulario al cual le queremos hacer registro de clics.

Esto nos mostrará una frame en la parte inferior con información de que etiquetas hay en el contenedor y cuales se han disparado hasta el momento.



Como se puede ver, en la página del formulario hay dos etiquetas, pero solo se ha disparado una. Este es el comportamiento deseado ya que solo queremos que la segunda etiqueta, la que registra clics, solo se debe dispara cuando se haga clic en el botón de enviar.

Para probar finalmente que el contenedor quedó correctamente configurado, entonces hacemos clic en el botón de Enviar y verificamos que en el frame inferior diga que se disparó la segunda etiqueta.



Como se puede ver, la segunda etiqueta se disparó por lo que podemos concluir que nuestro contenedor quedó bien configurado

Publicar la nueva versión del contenedor

Ya habiendo verificado que el contenedor está bien configurado, salimos de la verificación y le volvemos a dar clic en el menú de publicar, con la diferencia que seleccionamos el botón de publicar y así liberar la nueva versión.





Conclusión

Como se puede ver, con Google Tag Manager es posible tener un mayor control sobre como y cuando se deben disparar las diferentes etiquetas que se tengan para un sitio web, y sobretodo permite realizar procesos complejos que antes requerían modificar el código fuente de la página sin la necesidad de tocar una línea de código o de contar con un desarrollador para hace estos cambios.

Déjanos un comentario si crees que este procedimiento se puede lograr más facilmente o si tienes alguna duda

The post Tutorial: Registrar Clicks en Google Analytics Usando Google Tag Manager appeared first on Dazzet.