Blog de Apolo Agencia Digital

Cómo trackear el envío de un formulario en contact form 7 usando Google Analytics

Hay muchos artículos en internet para  trackear el envío de un formulario en contact form 7 usando Google Analytics y los he probado -casi- todos y, en general, ninguno funciona debido a los últimos cambios realizados por Contact Form 7.

Hasta el pasado Diciembre de 2017 utilizábamos el método “on_sent_ok” que se usaba para asignar un código JavaScript que se ejecutaba cuando se enviaba el formulario. Este método y el “on_submit” se han eliminado oficialmente en la actualización de Contact Form 7 5.0. He de decir que este método era muy simple bastaba sólo con ingresar el código en “Additional Settings” de Contact form 7 y listo, ya podíamos trackear el envío de formulario en eventos de Google Analytics. Sin embargo, a continuación te mostraré dos opciones que uso actualmente y que funcionan correctamente.

Solución #1: Código Manual

Paso 1: Asegúrate de tener el código de seguimiento de Google Analytics insertado antes del </head> de tu sitio web.  Puedes chequear esto desde el navegador haciendo clic derecho y seleccionando la opción ver código fuente o Ctr + U. El código debe ser algo parecido a esto:

<!– Global site tag (gtag.js) – Google Analytics –>
<script async src=”https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxxx-x”></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(‘js’, new Date());

gtag(‘config’, ‘UA-XXXXXXXXX-X’);
</script>

Paso 2: Insertar también en el  header de la página web el código de tracking de envío de formulario de contact form 7 para Google Analytics. El código debe ser algo parecido a esto:

<script type=”text/javascript”>
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
ga( ‘send’, ‘event’, ‘contact’, ‘submit’ );
}, false );
</script>

También se puede agregar el código de tracking de envío de formulario de contact form 7 para Google Analytics en footer.php utilizando este código:

function mycustom_wp_footer() {
?>
<script>
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
ga( ‘send’, ‘event’, ‘contact’, ‘submit’ );
}, false );
</script>
<?php
}

Paso 3: Haz una prueba enviando un formulario de contacto. Si todo está bien podrás trackear el envío del formulario en Google Analytics > Comportamiento > Eventos > Visión General. Aparecerá como “Contact Form”.

Normalmente tarda un par de horas en que Google Analytic comience a trackear el evento, sin embargo, puede demorar hasta 24 horas para que se muestre.

Solución #2: Plugin WP Google Analytics Events

Paso 1: Asegúrate de tener el código de seguimiento de Google Analytics insertado antes del </head> de tu sitio web. Puedes seguir el paso 1 explicado arriba en la solución de código manual.

Paso 2: Instala el plugin de WordPress llamado “WP Google Analytics Events“.

Paso 3: En la barra izquierda del administrador de WordPress haz clic en WP GA Events > Click Tracking y configura el evento de la siguiente manera:

Element Name: wpcf7-submit (this will track when the user clicks on “submit”)
Type: class
Event category: Contact Form (or however you want your label to show up)
Event action: submit
Event label: Contact form submission

Nota: El método wpcf7mailsent he comprobado que ya no funciona, en cambio el método wpcf7-submit funciona correctamente.

Paso 4: Clic en “add”

Paso 5: Haz una prueba enviando un formulario de contacto. Si todo esta bien podrás trackear el envío del formulario en Google Analytics > Comportamiento > Eventos > Visión General. Aparecerá como “Contact Form”.

Normalmente tarda un par de horas en que Google Analytic comience a trackear el evento, sin embargo, puede demorar hasta 24 horas para que se muestre.

Juan Maldonado

Juan Maldonado

Ingeniero de Sistemas, Co-Fundador de Apolo Agencia Digital. Senior IT Project Manager, especialista en Diseño de aplicaciones web y aplicaciones móviles. Consultor SEO.

6 comentarios

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

  • Hola Juan, buen post. ¿cómo puedo trackear y realizar seguimiento de la url por la que llega el usuario a mi web, hasta que envía un formulario con ContactForm?. Es posible con esto que explicas? Gracias por la respuesta

    • Hola!.
      Para realizar el seguimiento desde una URL de referencia que “realice” un evento en nuestra web, debes hacerlo desde Google analytics -> Adquisición. Y a partir de aquí, debes seleccionar la url de referencia y el objetivo de conversión. Para saber qué hace tu usuario en la web a partir de esa URL de referencia lo hacés también en GA desde -> Comportamiento -> Flujo del comportamiento, y en las opciones seleccionas Fuente/Medio y justo en el simbolo de ajustes puedes añadir una concordancia (igual a la url de referencia) y te mostrará todo el flujo de los usuarios que lleguen desde esa url en tu web. Saludos

  • Buenas Juan,

    He probado metiendo el código de la primera opción que comentas y sigue sin registrar el envío de formularios. Tengo una pequeña duda, en la segunda línea del código cuando pones (event) hay que poner el nombre del evento?

    E igualmente en la siguiente línea hay que poner los parametros del objetivo que has definido en Google Analytics ¿verdad?

    Un saludo y gracias.

    • Hola Gonzalo,

      En relación a tu duda, No, no hay que poner nombre del evento, se mantiene (event.
      Igualmente en la segunda linea se mantiene igual:

      Escríbeme para saber que te funciona correctamente. Saludos

    • Hola David,

      En caso de tener más de un formulario en tu sitio web hay que configurar el seguimiento de forma diferente para cada uno de ellos. Por ejemplo, supongamos que tienes un formulario de “Presupuestos ” y otro de “Contacto” y queremos trackear cada uno de manera individual. Lo siguiente es configurar el WP Google Analytics Events de la misma manera que explico en el post, pero definir dos clases. Te quedará algo así:

      Element Name: quote-submit
      Type: class
      Event Category: Quotes
      Event Action: submit
      Event Label: Quote Submission

      Element Name: contact-form
      Type: class
      Event Category: Contact Form
      Event Action: submit
      Event Label: Contact Form Submission

      Una vez que lo configures, ingresa en el formulario de contacto y realiza los cambios en el código de envío. En el botón de envío de presupuesto debe ser así: [submit class:quote-submit “Send”]
      Y el botón de envíar formulario se ve así: [submit class:contact-form “Send”]

      Hay un error en Contact Form 7 que te indica que si colocas un ID o Class despues del texto de envío (En este caso, “Send”) no aparecerá ni se mostrará- Asegúrate de colocar el ID o Class antes del texto de envío.

      Ahora prueba los formularios. Si están funcionando, deberías poder verlo en Google Analytics. Saludos.

¿Te gustan nuestros artículos?

Suscríbete a nuestros blog y no te pierdas nuestras publicaciones