Seguimiento envío formularios Contact Form 7 | WordPress Plugin

En junio de 2017 Contact Form 7 (el plugin para enviar formularios desde WordPress más usadoa nivel mundial) cambió la forma en la que se debía hacer el seguimiento de los envíos correctos del formulario. Este plugin permite hacer el seguimiento de los formularios enviados correctamente y alguna cosita más.

Contact Form 7 Submission DOM tracking

Las opciones «on_sent_ok» y «on_submit» del plugin Contact Form 7 han sido declarados obsoletos para cerrar posibles brechas de seguridad y a finales de 2017 dejarán de funcionar (Contact Form 7 los ignorará). La alternativa recomendada a on_sent_ok es utilizar eventos DOM. Estos eventos DOM hay que programarlos porque no están accesibles directamente desde Contact Form 7. Este plugin ayuda a configurar estos eventos DOM para realizar un seguimiento de los envíos de formularios (evento de Google Analytics, vista de página de Google Analytics y píxel de Facebook).

También se puede ocultar el formulario después de su envío correcto y desregistrar los estilos del Formulario de contacto 7 y JavaScript en páginas sin formularios (esto es importante porque Contact Form 7 carga sus CSS y JavaScript en todas las páginas, hayan formularios o no).

¿Qué puedo hacer con este plugin?

Este plugin realiza el seguimiento de los envíos de formularios con el formulario de contacto 7 utilizando eventos DOM. Puede realizar un seguimiento de los envíos de formularios como Evento de Google Analytics, como vista de página de Google Analytics o como Pixel Lead de Facebook.

El plugin también da la opción de ocultar un formulario de contacto después de enviar el formulario con éxito.

Por último, también tiene la opción de incluir los estilos y JavaScript del Formulario de contacto 7 sólo en las páginas con formularios de contacto y no en todas las páginas, lo que constituye el comportamiento estándar del Formulario de contacto 7.

¿En qué ideas se basa este plugin?

Este plugin está basado en las instrucciones del autor del Formulario de Contacto 7 cuando anunció que «on_sent_ok Is Deprecated». Necesitábamos una solución para los sitios que estamos gestionando para nosotros mismos y para nuestros clientes.

Requisitos del sistema

PHP versión 5.5 o superior.

SOLUCIÓN DE PROBLEMAS

Antes de crear un ticket de soporte Contact Form 7 Submission DOM tracking por favor consulte la sección «Solución de problemas en las FAQ» y especialmente en la sección «¿Existen incompatibilidades conocidas?» (en resumen: el plugin no funciona con los plugins de redirección del Formulario de Contacto 7 ni con los complementos del Formulario de Contacto 7 que redirigen al usuario de alguna forma utilizando los eventos DOM y la pista de Facebook no se registra cuando se utiliza PixelYourSite).

Instalación

1. Primero tendrás que subir el plugin a la carpeta `/wp-content/plugins/`.
2. A continuación, activa el plugin en el panel de plugins. No hay ajustes.

Preguntas Frecuentes

¿Por qué habéis programado este plugin?

Creamos este plugin para poder seguir los envíos de formularios en Google Analytics, con el píxel de Facebook y ocultar el formulario una vez enviado correctamente. También incluimos la posibilidad de eliminar los estilos y Javascript del plugin en páginas que no contienen un formulario de contacto.

Y todo esto viene a raíz de la publicación en la web de CONTACT FORM 7 el 7 de junio de 2017 del post «on_sent_ok Is Deprecated».

The «on_sent_ok» and its sibling setting «on_submit» of the Contact Form 7 plugin are deprecated and scheduled to be abolished by the end of 2017. The recommended alternative to on_sent_ok is using DOM events. This plugin helps to set this DOM events to track form submissions.

Para minimizar el impacto en la gran cantidad de sitios que ejecutamos, decidimos codificar este plugin.

¿El plugin hace cambios en la base de datos?

Sí, crea algunas entradas en la tabla OPTIONS. Estas entradas se borran si se desactiva y desinstala el plugin. Si sólo se desactiva, se mantienen los ajustes.

¿Cómo puedo comprobar si el plugin funciona correctamente?

Instalar y activar. Dentro de la administración navega a Contact Form 7 / DOM tracking. Configura el plugin.

Entra a Google Analytics a tiempo real.

Rellena un formulario de contacto y envíalo.

Comprueba si se activa una vista de evento o de página cuando el formulario se envía correctamente.

¿Hay algo que tener en cuenta?

Si no utiliza Google Analytics o no tiene instalado el píxel de Facebook, no seleccione estas opciones de seguimiento porque podría provocar errores de JavaScript.

Utilizo Google Analytics for WordPress de MonsterInsights. ¿Funciona tu plugin con él?

Detectamos si el plugin «Google Analytics for WordPress by MonsterInsights» está activo porque utiliza una llamada no estándar a Google Analytics. En lugar de ga llama __gatracker.

Esto se tiene en cuenta.

¿Cómo puedo eliminar el plugin?

Puede simplemente activarlo, desactivarlo o eliminarlo en la sección de gestión de plugins. Si se elimina el plugin a través de la sección de gestión, se borra la configuración (se eliminan las entradas de la tabla de opciones). Si elimina el plugin a través de FTP, la configuración no se elimina.

¿Qué versión de PHP necesito?

Este plugin ha sido probado y funciona con las versiones PHP 5.5 y superiores. WordPress recomienda usar la versión 7.2 o superior de PHP. Si utilizas una versión de PHP inferior a la 5.5, actualiza tu versión de PHP o ponte en contacto con el administrador de tu servidor.

¿El plugin es compatible con WPML?

Sí. Estamos ejecutando el plugin en varios sitios con WPML 3.7.x y 3.8.x.

¿Hay algún requisito del servidor?

Sí. El plugin requiere una versión de PHP 5.5 o superior y recomendamos usar la versión de PHP 7.1 o superior. El plugin ha sido probado con PHP hasta la versión 7.2.

¿Utilizáis el plugin?

Por supuesto que sí. Es por eso que lo creamos. 😉

 

FAQs relacionados con incompatibilidades y problemas

¿Existen incompatibilidades conocidas?

Por favor, no lo uses con WordPress MultiSite, ya que no ha sido probado.

El plugin CF7 Redirect es ideal para redirigir el formulario a una página de agradecimiento usando los eventos DOM PERO no debe ser usado junto con este plugin porque podría crear errores JavaScript.

Tenga cuidado con el plugin Formulario de contacto 7 – PayPal & Stripe Add-on porque después del pago redirige al usuario a una página de agradecimiento usando los eventos DOM y por lo tanto no debe ser usado junto con este plugin porque creará errores JavaScript.

Si quieres rastrear los píxeles de Facebook, ten en cuenta que el plugin no funciona con el PixelYourSite plugin :-(. PixelYourSite utiliza sus propias funciones en lugar de las funciones estándar fbq() del pixel de Facebook. A los creadores del plugin se les preguntó cómo rastrear los envíos del Formulario de Contacto 7 y no tienen una solución real (redirigir a otra página no es una solución y rastrear el clic del botón de envío tampoco es una solución, ya que sólo queremos rastrear cuando el formulario fue enviado correctamente).

Si estás usando PixelYourSite y quieres rastrear los envíos de formularios sin usar una página de agradecimiento, te recomendamos que uses el plugin Pixel Caffeine de nuestros amigos de AdEspresso / Hootsuite. Nos gusta Pixel Caffeine porque es fácil de usar, potente y 100% gratis incluyendo la posibilidad de administrar el catálogo de productos de Facebook con soporte completo de WooCommerce y Easy Digital Downloads.

Errores generales de JavaScript – FALLOS

Si tiene problemas con el plugin, primero eche un vistazo al error de Javascript en la Consola del Inspector. Los errores de JavaScript pueden impedir que el plugin ejecute el seguimiento. No deben aparecer errores de JavaScript.

Seguimiento de Google Analytics – Solución de problemas

Para solucionar los problemas de Google Analytics puedes utilizar el Asistente de etiquetas (de Google) en el navegador Google Chrome. Con él puedes hacer un seguimiento para ver si todo funciona correctamente. Por favor, ten en cuenta que tienes que HABILITAR el Asistente de Etiquetas y luego recargar la página.

Seguimiento Facebook Pixel – Solución de problemas

Para solucionar problemas con los píxeles de Facebook, puedes utilizar la extensión de Google Chrome: Facebook Pixel Helper. Con este complemtno podrás ver si todo funciona correctamente.

Cuando accedes a una página con un formulario de contacto y el seguimiento de píxeles de Facebook está activado, verás un evento «PageView» que está verde y un evento «Lead» que tiene una advertencia roja: «ERRORES: El código de píxeles de Facebook de esta página no se ha cargado, por lo que no se ha enviado información a Facebook».

Es normal que el evento principal tenga una advertencia roja. Aquí en Troubleshooting Pixel Errors hay más información:

Pixel Did Not Load: This error means that the Pixel Helper found what looks to be Facebook pixel code on your site, but the actual HTTP call was never made. This could typically due to an error in the code, but could also occur if the pixel fires on a dynamic event (e.g. on a button click). In that case, the error will disappear upon clicking on the button.

Pixel Did Not Load: Este error significa que el Pixel Helper encontró un código de píxel de Facebook en la página pero que no ha llegado a ejecutarse. Esto puede deberse a un error en el código, pero también puede ocurrir si el píxel se dispara en un evento dinámico (por ejemplo, al hacer clic en un botón o al enviar correctamente un formulario de contacto). En ese caso, el error desaparecerá al hacer clic en el botón.

Después de enviar correctamente el formulario de contacto, la advertencia roja desaparece y aparece una señal verde que indica que el píxel se ha disparado correctamente.

No se puede leer la propiedad ‘style’ de null

Si obtiene el siguiente error de JavaScript en la Consola del Inspector uncaught TypeError: No se puede leer la propiedad’style’ de null, entonces parece que se ha activado la opción: «¿Ocultar formulario después del envío correcto?» que oculta el formulario de contacto después de haber sido completado y enviado correctamente, pero que no se ha implementado correctamente el código.

Para poder ocultar sólo el formulario y no el mensaje de envío correcto, el formulario debe estar envuelto en un div llamado hidecontactform7contactform.

Esto no se ha hecho y como esta opción añade este código a wpcf7mailsent: document.getElementById('hidecontactform7contactform').style.display = 'none'; termina con un error de JavaScript y el Pixel de Facebook no se dispara.

Por favor, desmarca esta opción o envuelve el formulario en el div llamado hidecontactform7contactform.

 

Para cualquier problema, duda o ayuda que necesitéis, dejarnos un comentario aquí.