Se están usando ajustes obsoletos - Plugin Contact Form 7 de WordPress

Cómo medir formularios Contact Form 7 con Tag Manager (sin on_sent_ok)

Posted by Lucía Marín on Nov 27, 2017

¿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’);”

Se están usando ajustes obsoletos - Plugin Contact Form 7 de WordPress

Si clicamos en el link:

on-sent-ok-contact-form-7-deprecated

((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

Sin embargo, si prefieres no tocar el archivo functions.php de WordPress, existe una manera (o varias :D) muy fáciles de detectar el envío de formulario mediante Google Tag manager, que te voy a proponer en este post.

¿Y cómo lo haremos? Gracias al nuevo tipo de activador Element Visibility o Visibilidad de Elemento de GTM y su capacidad de detectar los cambios en el DOM de la página. Y gracias a la capacidad de insertar el código JavaScript que tenemos directamente por GTM en etiquetas personalizadas. Vamos a ello!

 

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

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

contact-form-7-sent-ok sin thank you page

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).

copiar-selector-css-contact-form-7

 

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:

Cómo medir formularios enviados con Contact Form 7 y Google Tag Manager

**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

mensajes error contact form 7 wordpress

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:

mensajes error contact form 7

 

Y lo podemos mandar así a Google Analytics:

cómo medir errores formulario wp contact form 7 google analytics

Y el activador sería el siguiente:

activador visibilidad elemento tag manager lucia marin

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).

medir-tag-manager-contact-form7-validation-error

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?

El mejor: el que te funcione. Dependiendo de cómo actúe la web a medir, nos irá mejor con el activador Element Visibility o con el activador de Evento Personalizado. Puede parecer que siempre es mejor el personalizado, pero en mi caso al menos, he probado en varios ejemplos diferentes y cada vez he usado uno… En caso de no estar seguros 100% de cuál funciona, también podemos poner ambos activadores a la etiqueta y limitar que la misma salte solo “una vez por página”, por ej. Y hacer las pruebas necesarias. Siempre siempre haremos pruebas y más pruebas :D

una-vez-por-pagina-tag-manager

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:

etiqueta contact form 7 tag manager lookup table

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):

lookup table contact form7 tag manager

 

Si quieres aprender Google Tag Manager y Analytics, te interesa mi curso online. Tutorizado y con soporte conmigo durante 2 meses. Material en continua actualización.

About the author

Comparte tu opinión