¿Cómo medir envíos correctos de formularios hechos con el plugin contact Form 7, ahora que on_sent_ok está obsoleto / deprecated?

Desde hace algún tiempo nos aparece este error en el plugin Contact Form 7 de WordPress si usamos la función on_sent_ok del plugin:

«Se están usando ajustes obsoletos«.

Esto viene a cuento de una función llamada «on_sent_ok» del propio plugin CF7 que hemos utilizado mucho los desarrolladores/as de WordPress para por ej. poder hacer redirecciones en formularios para forzar que exista una thank you page, y sobre todo, para medir formularios enviados sin thank you page fácilmente con Tag Manager. Pero ese sistema de medir formularios deja ya de ser factible y aquí os voy a proponer una alternativa :)

Lo que usábamos antes era esto:

on_sent_ok: "dataLayer.push({'event':'formSubmitOK'});"

e incluso esto:

on_sent_ok: “location.replace(‘/contacto/thankyou’);”

Si clicamos en el link:

((OJO que ya ha dejado de funcionar :S:S))

Y aquí la propia ayuda del plugin Contact Form 7 sobre cómo conseguir hacer esto ahora.

on_sent_ok Is Deprecated

Medir envío de formulario Contact Form 7 por evento de visibilidad

Primero vamos al formulario y hacemos un envío de prueba:

Sobre el mensaje de «Gracias por tu mensaje…», hacemos click derecho y pinchamos en «Inspeccionar» o «Inspeccionar Elemento» (según el navegador puede ser diferente).

Esta opción generará un selector CSS complejo de este estilo:

#wpcf7-f1653-p1858-o1 > form > div.wpcf7-response-output.wpcf7-display-none.wpcf7-mail-sent-ok.fusion-alert

Reconociendo el mensaje de OK: Activador Visibilidad de elemento en Google Tag Manager

A continuación accedo a Tag Manager a generar un activador de tipo Visibilidad de Elemento o Element Visibility, y lo relleno como sigue, con el selector CSS completo:

**Si no funciona con el 50% de visibilidad mínima, ahí podemos bajar hasta el 1%, como mínimo!! No es un sistema de medición perfecto, pues depende de que se vea el mensaje de OK, pero cómo si no va a saber el usuario que el mensaje se ha enviado… si no lo ve. Seamos un poco lógic@s :D

Configuración del activador Visibilidad de Elemento en GTM

A continuación vemos porqué se rellena de este modo:

• Selector CSS: Como estamos utilizando este método de selección del elemento, debemos acordarnos de marcarlo en el primer select desplegable del formulario.
• Podemos pegar tal cual el selector complejo que nos salió al Inspeccionar elemento. O bien simplificarlo quitando el #ID del formulario que va delante. Es decir, nos quedaremos con:

  form > div.wpcf7-response-output.wpcf7-display-none.wpcf7-mail-sent-ok.fusion-alert

• Porcentaje mínimo visible: Podemos dejarlo como viene, en 50%, aunque hemos de tener en cuenta que si estamos en una pantalla pequeña, puede que no se vea y que haya aparecido. Aunque esto ya es también una cuestión de usabilidad como decíamos… Si probamos y nos da problemas, deberemos ir con distintos % de visibilidad del elemento. Mínimo: 1%.
• Reaccionar a los cambios del DOM: Este checkbox es clave marcarlo, ya que el mensaje no aparece de primeras en el código fuente, sino que aparece a posteriori en el DOM, al ejecutarse cambios en el código por el envío.

CÓMO MEDIR MENSAJES DE ERROR AL ENVIAR EL FORMULARIO DE CONTACT FORM 7

Si lo que nos aparece es una alerta de error, como la amarilla, el selector es este (lo vemos como se dijo antes: inspeccionar elemento / copiar / selector css):

#wpcf7-f1653-p1858-o1 > form > div.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors.fusion-alert

O este, según queramos hacer, si queremos trackear para todos los formularios a la vez:

form > div.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors.fusion-alert

Este error lo capturamos mediante una variable DOM Element como esta:

Y lo podemos mandar así a Google Analytics:

Y el activador sería el siguiente:

Y si queremos sacar el error específico (texto en rojo bajo cada campo), también deberemos sacar su selector CSS y hacer los respectivos activadores. Lo que pasa es que si no son descriptivos, si son como son, en plan: «El campo es obligatorio», ya deberíamos trabajar más a fondo para sacar el class del elemento padre (con javascript).

NOTA FINAL: Como se trata de un activador avanzado y pesado para la carga de página, es muy muy recomendable que limitemos en qué página/s queremos que funcione, para NO andar revisando todos los cambios del DOM que sucedan en nuestro WordPress.

Opción B: Post Actualizado y Mejorado!

Código de la documentación de Contact Form 7 «enriquecido» +  activador de evento personalizado

Lo primero, gracias a Josu Solegia y Joseba Ruiz por la ayuda, al confirmarme que SÍ os funcionaba con el código jeje!! Porque yo lo estuve probado y probando en mi blog y por algo no salió (se me recarga la página, raro raro!) y por ello descarté incluir en el post de primeras esta solución también. Esa era la idea pero al no salirme y querer publicar jaja… Bueno, estos son los pasos mediante el código, me quedo ya con la mejora de Josu porque me parece estupenda :))

Paso 1)) Poner este código en una etiqueta HTML personalizada:

< script >
document.addEventListener( 'wpcf7mailsent', function( event ) {
dataLayer.push({'event' : 'form-id-'+event.detail.contactFormId });
}, false );
< / script >


*al pegar quita los espacios de las etiquetas script que no he logrado ponerlo de otro modo

Y activarlo solo en las páginas donde exista formulario (evento Pageview).

Como decía, el código está basado en este post donde Josu Soleguia lo explica muy bien,  se las arregla con JS para obtener el ID del formulario enviado, ¡¡gracias por compartirlo!! :D.

Y en caso de tener varios por página estaría genial hacer una tabla de consulta para identificar cada ID de formulario con su nombre entendible para el cliente (luego vemos cómo !) :P

Paso 2)) Generar un activador específico para un formulario concreto o varios (como se explica en el post anterior), o uno más amplio para todos los formularios Contact Form 7 con esta regEx:

^form\-id\-\d+ 

Resumiendo…

¿Mejor evento de visibilidad o mejor evento personalizado?

Y para terminar…

Etiqueta para envío de formulario Contact Form 7 en Tag Manager

• Si solo tenemos un formulario en la página de contacto y no recopilamos el ID por código, nuestros ajustes podrían ser estos (el valor dependerá de tus cálculos internos):

*No es necesario mandar URL del formulario, porque la vemos en GA si añadimos la dimensión secundaria «Página».

• En caso de tener más de un formulario:

Donde la variable {{Form Name vs ID}} podría ser así (dependiendo del valor de {{Event}}, que es el que recopila el evento con el ID al final):