Meses atrás ya publicamos un post donde explicábamos el proceso de medición de formularios web en general. Pues bien, ahora volvemos a la carga con la medición de formularios Contact Form 7 de una forma dinámica. ¿Y por qué dinámica? Pues porque serás capaz de medir los diferentes formularios (con diferentes ID) de tu web de manera rápida y eficaz, bien si están en diferentes URLs o en la misma. De esta forma, vamos a poder llevar a cabo una mejor analítica de nuestra web, siendo capaz de diferenciar las conversiones según el formulario que se haya rellenado.
Antes de nada, comenzar diciendo que esta medición sirve tan solo para aquellos formularios que al enviarse, cargan un mensaje de confirmación tipo AJAX. Es decir, aquellos que aparecen sin que la URL llegue a refrescarse.
Una vez dicho esto, comenzamos con el proceso de medición de formularios Contact Form 7, en el que utilizaremos Google Tag Manager para hacer el seguimiento del evento CF7 y Google Analytics para configurar los objetivos necesarios que medirán los envíos exitosos de formularios.
¿Qué hacemos en Google Tag Manager?
1/ HTML Personalizado
El primer paso a realizar es la implementación de un pequeño código que estará ahí esperando y recogiendo datos en el momento que se realice el envío de un formulario (un evento). Ese pequeño código es el siguiente:
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
dataLayer.push({
'event' : 'wpcf7successfulsubmit',
'formId': event.detail.contactFormId
})
});
</script>
Este código estará ahí esperando concrétamente a que se produzca el evento wpcf7mailsent y cuando éste ocurra, recogerá datos que podremos medir posteriormente como el nombre del evento o el id del formulario.
Además, por medio de event.detail.contactFormId tendremos la posibilidad de medir cualquier formulario CF7, ya que recogerá este dato de forma automática.
En nuestro caso, el evento lo hemos nombrado wpcf7successfulsubmit pero puede ser cualquier otro. Lo esencial es que coincida con el nombre del evento personalizado del Activador. Lo veremos más adelante.
Y bien, ¿cómo lo implementamos?
Un vez estamos en la cuenta de Tag Manager de la web sobre la que vamos a realizar la medición, tendremos que crear una etiqueta tipo HTML personalizado, la cual configuraremos para que se active en todas las páginas.
Para ello, añadiremos el código que hemos indicado arriba y estableceremos su activación para todas las páginas. Quedaría de la siguiente forma:
Testeo 1
Una vez implementado, debemos comprobar si lo hemos hecho correctamente. Para ello, iremos a al modo vista previa de GTM y una vez hayamos clicado sobre Vista Previa, vamos a una página de nuestra web que contenga un formulario y cuando la refresquemos tendrá que aparecer una pequeña consola en la parte inferior.
En el momento que hagamos el envío del formulario, y si todo está implementado correctamente, podremos ver cómo aparece el evento wpcf7successfulsubmit. Si clicamos sobre él y vamos a la última pestaña “Data Layer” podremos ver los datos que hemos recogido gracias al código implementado.
El siguiente paso sería crear una etiqueta para hacer el seguimiento del evento que se ha producido. Para crearla, necesitamos establecer las condiciones, y para ello, necesitamos configurar Variables y Activadores.
2/ Activador
- Creamos un activador y lo nombramos. Ejemplo: “ Activador formularios”.
- Configuración del activador
- Tipo de activador: Evento Personalizado
- Nombre del evento: wpcf7successfulsubmit
*El nombre del evento tendrá que ser exactamente el mismo que utilizamos previamente en el código HTML personalizado.
- Se activará en Todos los eventos personalizados
3/ Variable
Antes de configurar la variable que necesitaremos, es aconsejable configurar las variables y añadir todas aquellas que podamos llegar a utilizar, relacionadas con páginas, utilidades, errores, clics, formularios, etc.
Creamos una Variable y le damos nombre: Ejemplo: “Variable Formularios”.
- Configuración de la variable
- Tipo de variable: Variable de capa de datos
- Nombre de variable de capa de datos: formId
Es crucial que el nombre de la variable sea exactamente igual al que usamos en código HTML implementado anteriormente. En este caso ‘formId’, no valdria ninguna variación como ‘FormId’, ‘formID’, ‘FORMid’…
- Versión de la capa de datos: Versión 2
Testeo 2
Una vez hayamos creado la variable, vamos al modo Vista Previa de Tag Manager y bajo la pestaña variables del evento wpcf7successfullsubmit podemos ver como la variable creada CF7-formID está recogiendo el valor que necesitamos: ’3201’.
4/ Etiqueta
Creamos una Etiqueta y le damos nombre. Ejemplo: “ Etiqueta Formulario”
IMPORTANTE: Esta etiqueta es genérica para la medición de TODOS los Formularios. Gracias a las variables que ponemos en la etiqueta, luego en Analytics podremos decir que id y que url queremos medir (en Objetivos).
- Configuración de la etiqueta
- Tipo de etiqueta: Universal Analytics (Google Analytics)
- Tipo de seguimiento: Evento
- Parámetros de seguimiento de eventos:
- Categoría: formulario-contacto
- Acción: Form ID:{{CF7-formID}}
*Hemos usado la variable creada anteriormente
- Etiqueta: En blanco
- Valor: En blanco
- Hit sin interacción: Falso
- Configuración de Google Analytics: {{Variable Analytics}}
Activación: Elegimos el Activador que creamos anteriormente “Activador Formularios”
Y ahora… ¿Qué hacemos en Google Analytics?
5/ Creación de Objetivo en Google Analytics
Una vez hemos dejado listo todo en GTM, para hacer medición del evento que hemos creado tenemos que crear un Objetivo en Analytics y así sabremos cuánto convierten los formularios de la web.
Para crear el nuevo objetivo seguiremos el siguiente camino: Administrar/Vista/Objetivos
- Clicamos en crear nuevo objetivo
- Configuración del objetivo: Clicamos en “Personalizar”
- Rellenamos la “Descripción del objetivo” y establecemos el objetivo como tipo “Evento”
*En nuestro caso, tenemos dos tipos de formularios CF7 en nuestra web, uno para la versión ES y otro para la versión EN. En este ejemplo, haremos medición únicamente de los formularios de la versión española de la web.
- Rellenamos los datos que nos piden en “Información del objetivo”
En este paso, nombraremos las celdas Categoría y Acción de la misma forma que lo hicimos en la etiqueta de Tag Manager. Es decir:
- Categoría: Formularios de Contacto Enviados
- Acción: Form ID:3201 (Id del formulario CF7 que quieras medir). Hemos sustituido {{formId}} por el id del formulario de la version ES.
- Etiqueta: lo dejaremos en blanco.
- Valor: lo dejaremos en blanco
Dicho todo esto, una vez implementada la configuración en Google Tag Manager, tan solo tendremos que decidir qué formulario queremos medir y configurar el objetivo en Google Analytics siguiendo los pasos indicados.
