Desde que empecé a trabajar con WordPress he utilizado siempre, o casi, el plugin Contact Form 7 para el envío de formularios. Es sencillo, tiene buenas opciones de personalización y funciona muy bien.
El problema vino el pasado agosto cuando leo un artículo según el cual CF7 va a desechar algunos de sus eventos javascript para que pasemos a utilizar los eventos DOM.
Note: on_sent_ok and on_submit are deprecated and scheduled to be abolished by the end of 2017. You can use DOM events instead of these settings.
¡Drama! ¡Angustia! ¡Terror!
¿Por qué? Porque para registrar el envío de formularios Contact Form 7 desde Google Tag Manager era muy cómodo simplemente añadir la línea:
on_sent_ok:"dataLayer.push({'event':'Formulario de contacto'})"
Luego en GTM se recogía con un activador de evento el evento ‘Formulario de contacto’ y ya teníamos nuestro registro de formulario enviado en la analítica.
Esto será a final de 2017 pero como nos enseña Batman: es mejor estar preparado para lo que venga. Así que me puse a investigar un poco y dí con una solución casi tan sencilla como el método original, sólo tenía que añadir un paso más:
-
Añadir en la página o páginas donde haya formulario CF7 el código javascript:
document.addEventListener( 'wpcf7mailsent', function( event ) {
dataLayer.push({'event' : 'form-id-'+event.detail.contactFormId });
}, false );
Este código lo que hace es quedarse atento a cuando se realice el envío de formulario, es decir, cuando se active el evento de CF7 ‘wpcf7mailsent’.
Entonces lanza nuestro código al dataLayer, introduciendo el ‘event’ que lleva como valor ‘form-id-‘ seguido de la id del formulario que se está enviando, la cual coge de forma dinámica con event.detail.contactFormId. -
Buscar la id del formulario o formularios que quiera hacer seguimiento.
Esto es fácil porque en la administración del propio plugin, en la lista de formularios ya nos enseña la id de cada uno en el shortcode
-
Crear un activador en GTM de tipo Evento personalizado
que reaccione al nombre del evento form-id-(id del formulario)
Ahora, si queremos seguir varios formularios con un mismo activador tendremos que activar el checkbox “Utilizar una expresión regular que coincida con” y en nombre del evento pondremos form-id-(). Dentro de los paréntesis escribimos todas las id de formularios que queramos seguir separadas por el carácter de la barra vertical |
Ya está, podemos seguir configurando Tag Manager para registrar el envío de formularios Contact Form 7 tranquilamente.
Si queremos ampliar nuestros seguimiento de lo que pasa con nuestros formularios, en la página de documentación de Contact Form 7 nos dan un listado de sus eventos DOM:
- wpcf7invalid — Se dispara cuando se produce un error en el envío del formulario porque no se han rellenado los campos correctamente.
- wpcf7spam — Se dispara cuando se envía un formulario correctamente pero no se envía el email porque se ha detectado posible actividad spam.
- wpcf7mailsent — Se dispara cuando se envían correctamente el formulario y su email.
- wpcf7mailfailed — Se dispara cuando se envía el formulario correctamente pero hay un fallo enviando el email.
- wpcf7submit — Se dispara cuadno se envía el formulario correctamente, independientemente de otros factores (errores en campos, envío de email).
Con este listado sólo tenemos que copiar y pegar el código de antes, reemplazando el evento DOM ‘wpcf7mailsent‘ por el que queramos de la lista
document.addEventListener( 'wpcf7mailsent', function( event ) {
dataLayer.push({'event' : 'form-id-'+event.detail.contactFormId });
}, false );
después creamos un nuevo activador en GTM y se aplica a su propia etiqueta.
Aprovecho para dar las gracias a Joseba Ruiz (@RuizMKT) por darme otra visión para solucionar esto y a Lucía Marín (@TagManagerQueen) por hacerme tener en cuenta el resto de eventos DOM que puede ser interesante tener controlados.
