Evento de conversión en google analytics clásico sin carga de página.

El objetivo de este tutorial es aprender a definir y configurar cualquier evento que luego queramos asignar como conversión en google analytics clásico.

Summary

Aprenderemos a captar el valor del evento con google tag manager de 2 formas:

  • A través de un activador de formulario ya definido en google tag manager.
  • A través de un activador de visualización de elementos.
  1. La primera parte consiste en captar el evento a través de google tag manager.
  2. La segunda parte procederemos a trasladar el evento a google analytics clásico.
  3. La tercera parte asignaremos como objetivo el evento que hemos trasladado a google analytics.

Primera parte, captar el valor a través de google tag manager.

A través de un activador de “formularios” ya definido en google tag manager:

Nos dirigimos a google tag manager y lo primero que vamos hacer será activar en la pestaña de variables todas aquellas que sean de “formularios”.

Ahora nos vamos activadores y creamos un activador de “envío de formulario”, vamos a dejar que se active en todos los formularios a sí vemos lo que pasa en el “debugger”.

Hacemos una prueba de envío de formulario:

Cómo puedes ver no se ha redirigido a ninguna página, simplemente aparece un mensaje informativo.

En el debugger se ha generado un “form submit”. Ya lo tenemos. Ahora, simplemente queda ser más concreto con el “form submit” ya que si disponemos de más formularios en el sitio web nos contabilizará el evento tantas veces como formularios tengamos por el sitio web.

Dentro del mismo debugger seleccionamos “variables” y buscamos algún campo que sea único para este formulario, como por ejemplo:

Por ejemplo, en mi caso, será: 

form classes : “wpcf7-form-init”

page path : “/contactar”

Regresamos a google tag manager y al activador que hemos añadido antes vamos a ser más concretos. 

Tener en cuenta que en mi caso estas condiciones a mi me funcionan pero puede que vosotros tengáis que ser más concretos porque tengáis 2 formularios en esa misma página.

A través de una activador de visualización del elemento

La segunda forma que podemos captar el evento es a través de una visualización del elemento. Puede que en ocasiones los “activadores de formulario no aparezcan” porque simplemente google tag manager no detecta que sea un formulario por ejemplo cuando añadimos un “iframe” de suscribirse al sitio web. En este caso utilizaremos un activador de visualización de elemento.

Nos vamos de nuevos a activadores y seleccionamos “visibilidad del elemento”

En este caso se pretende medir el mensaje que aparecerá cuando se completa un formulario o por ejemplo un usuario se suscribe a una newsletter.

Vamos a verlo mejor con un ejemplo de una suscripción de newsletter. Queremos que se active un evento cuando alguien complete la suscripción.

Nos vamos a ir al html del sitio web: en chrome seleccionamos los tres puntitos, buscamos más herramientas/herramientas de desarrollador y nos centramos en la pestaña de elements.

Nos tiene que quedar algo así:

Lo que vamos hacer, será buscar un elemento diferenciador entre el trozo de código actual y el que se genera cuando terminamos de suscribirnos en la newsletter.

En mi caso el elemento diferenciador es: .sp-message-success

Tener en cuenta que tenéis que encontrar vuestro propio elemento identificador.

Regresamos a google tag manager y generamos el activador:

Seleccionamos selector de CSS, añadimos el elemento diferenciador , ponemos que se ejecute una vez por evento y muy importante a que reacciones a los cambios de DOM, ya que de lo contrario no encontrará el selector ya que se genera sin cagar de nuevo la página.

Segunda parte, trasladar el evento a google analytics clásico.

Ahora que ya tenemos nuestro activador tenemos que trasladar el evento a google analytics.

lo que vamos hacer será ir a etiquetas, nueva etiqueta y seleccionamos google analytics universal analytics.

La etiqueta nos quedará así:

Tipo de seguimiento: evento

Seguidamente tenemos la categoría, la acción y las etiquetas, esto es a nivel de nomenclatura del evento, podéis poner lo que queráis para que vosotros lo diferencieis (la acción y las etiquetas son opcionales).

Añadís el id de seguimiento de vuestro google analytics.

Y finalmente le agregamos el activador que mejor os haya funcionado de los que hemos explicado en este artículo.

Probamos que el “debugger” que funcione la etiqueta. Si todo está okay publicamos la versión de google tag manager.

Tercera parte asignar objetivo el evento que hemos trasladado a google analytics.

Ahora solo nos quedará asignar como objetivo o conversión el evento que terminamos de crear.

Nos vamos a google analytics, configuración/vista/objetivos.

Seleccionamos crear un objetivo nuevo, ponemos el nombre que queramos y nos ayude a diferenciarlo del resto de objetivos.

Seleccionamos el tipo tal como “evento” y ahora completamos la categoría, la acción y la etiqueta tal cual lo hemos definido en google tag manager. (esto es importante que esté exactamente igual o google analytics no lo reconocerá como objetivo).

Listo, en unos 30 minutos ya podrás ver tus conversiones de formularios, suscripciones, presupuestos o todos aquellos eventos que quieras definir como un objetivo importante para tu negocio.