¿Cómo medir envíos correctos de formularios hechos con el plugin contact Form 7, ahora que on_sent_ok está obsoleto / deprecated?
-
Medir envío de formulario Contact Form 7 por evento de visibilidad
-
Medir errores de formulario Contact Form 7 por evento de visibilidad
-
Medir envío de formulario Contact Form 7 por evento personalizado
-
¿Mejor evento de visibilidad o personaliazado?
-
Configuración de la etiqueta de envío de formulario OK
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.
¿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:
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):
O si prefieres una formación in company, en tu empresa, sobre:
- Tag Manager y Píxeles de Conversión
- Google Analytics básico o avanzado
- Data Studio
- Supermetrics Functions
- SEO
- Google Ads
16:18
29 Nov 17
Guest
tropademkt says:
Hola, cómo estás? Estoy hace días buscando soluciones porque no tengo forma de trackear los eventos. Leyendo que está deprecada la función de ga…tiene sentido.
Quería confirmar los pasos a seguir:
1- Generar el evento de visibilidad
2- Generar la etiqueta en Tag manager.
Al crear la etiqueta tengo que asociarla en Triggering con el trigger que armé en el paso uno?
Una vez generado lo anterior ya me deberían registrar los eventos en Google Analytics?
El código javascript que se propone es una solución B (que entiendo que se pega en el head de la página de contacto. Se agrega también? Porque tengo miedo que se me pise con los pasos anteriores.
Gracias por tu ayuda!
12:38
07 Feb 18
Guest
apt says:
gracias por la explicación
13:29
07 Feb 18
administrator
Lucía Marín says:
Hola Tropademkt! :))
Gracias por tu comentario y perdón por la espera. Se había quedado traspapelado!! o sin leer :S
Efectivamente: al crear la etiqueta has de asociarla en Triggering con el trigger del paso uno. Esto si lo haces
por visibilidad.
Sí te debería recopilar en GA, si está todo bien implementado y el evento de visibilidad funciona en el caso de tu web. Pruébalo con la consola de vista previa de Tag Manager para tu mayor tranquilidad :))
El código de la solución B)) es una solución totalmente alternativa. No hay que mezclar. Solo probar a usar una solución y la otra, y la que mejor te funcione. Cada una tiene pros y contras.
La solución de visibilidad sirve para más cosas y no solo para formularios del plugin Contact Form 7, sino para cualquiera que muestre sus confirmaciones y errores de esa manera.
La solución del código específico para Contact Form 7 quizá sea más «robusta» o estable, si tu página web la admite (que la mía no). Normalmente, la capa de datos o dataLayer suele ser más infalible que ciertos triggers de GTM. Lo malo: pues que tienes de nuevo dependencia de código, aunque en este caso, lo podemos poner nosotr@s ;))
Un abrazo y ojalá te sirva!!
Gracias por leer y comentar.
15:38
16 May 18
Guest
Julio Morales says:
Hola, gracias por la información, este es mi aporte: para enviar un evento para facebook «lead» (pixel) el codigo HTML en la pagina tiene que quedar en una linea de esta forma: document.addEventListener( ‘wpcf7mailsent’, function( event ) {fbq(‘track’,’Lead’);}, false );