Seguimiento de envíos de formularios con Google Analytics

This page is also available in English.

Si utilizas Google Analytics para monitorear el tráfico web en tu sitio, es posible que también desees realizar un seguimiento de los envíos de formularios. Este artículo describe cómo realizar un seguimiento de los envíos de formularios como eventos con Google Analytics 4 (GA4).

Nota: este artículo no abordará el uso básico de Google Analytics. Si aún no estás familiarizado con Google Analytics, consulta primero la documentación de Google. La forma más sencilla de introducir GA4 (y configurarlo en un sitio WordPress) sería utilizar el plugin Site Kit de Google.

Seguimiento de eventos

Para enviar un evento a Google Analytics, llama la función gtag():

gtag( 'event', 'event_action', {} );

Para realizar un seguimiento de los eventos de envío de formularios, cuando el envío de correo electrónico se haya completado correctamente, utiliza el evento DOM personalizado wpcf7mailsent:

document.addEventListener( 'wpcf7mailsent', function ( event ) {
    gtag( 'event', 'wpcf7_submission', {
        'event_category': event.detail.contactFormId,
        'event_label': event.detail.unitTag
    } );
}, false );

Insertar JavaScript en HTML

El siguiente paso es insertar el fragmento de JavaScript anterior en un lugar apropiado en el código fuente HTML de las páginas de la vista pública (frontend).

Hay varias formas de hacer esto. No las analizaremos todas, pero proporcionaremos un fragmento de código de ejemplo que utiliza el gancho de acción wp_footer para insertar un elemento de tipo script, incluido el fragmento de JavaScript anterior, en el área del pie de página de las páginas:

add_action( 'wp_footer', function () {
?>
<script>
document.addEventListener( 'wpcf7mailsent', function ( event ) {
    gtag( 'event', 'wpcf7_submission', {
        'event_category': event.detail.contactFormId,
        'event_label': event.detail.unitTag
    } );
}, false );
</script>
<?php
}, 10, 0 );

Intenta incrustar esto en el archivo functions.php en su tema activo (preferiblemente, un tema hijo). Si todo se ha configurado correctamente, verás los eventos wpcf7_submission en la consola de GA4 unas horas después de que se realice el seguimiento de los eventos.

Just another contact form plugin for WordPress. Simple but flexible.