Configura las conversiones de Analytics con Contact Form 7

analytics y contact form 7

La idea de este tutorial es conseguir ver en nuestro Google Analytics cada vez que un usuario ha rellenado nuestro formulario y poder tener un objetivo de conversión, para así saber cuantos formularios hemos recibido en el último mes, como están funcionando nuestras campañas, y de esta manera poder saber si las medidas que estamos implementando van por buen camino.

Después de mirar muchos tutoriales no he visto ninguno en el que se explique de forma sencilla y rápida como configurar el seguimiento de conversiones de Analytics y los formularios de un plugin de WordPress tan conocido como Contact Form 7. Vamos a explicar paso a paso lo que debemos hacer.

👨🏻‍🔧 Asegurarnos de qué código de Analytics tenemos

Podéis tener dos tipos de código de Analytics, uno es este:

<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXX', 'auto');

ga('send', 'pageview');

</script>

y otro es este:

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-78810380-20"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);}

gtag('js', new Date());

gtag('config', 'UA-XXXXXX');

</script>

La diferencia la encontraréis en que el primero tiene ga('create', 'UA-XXXXXX', 'auto'); y el segundo gtag('config', 'UA-XXXXXX');

Es importante que sepamos cuál tenemos porque lo necesitaremos más adelante.

👨🏻‍💻 ¿Qué es un evento y como incluirlo en mi Contact Form 7?

Para poder medir las veces que alguien ha enviado nuestro formulario lo que debemos hacer es crear un evento de Analytics que es un código como este:

gtag('event', 'send', { 'event_category': 'lead', 'event_label': 'formulario'});

y luego hacer que se ejecute justo cuando alguien ha enviado el formulario correctamente. Es importante hacerlo como os mostramos en este tutorial, ya que hay otros tutoriales que lo ejecutan pero cuando el usuario ha dado click en el botón de enviar y como sabréis hay muchas posibilidades en las que el usuario puede haber dado click y luego no acabar dejándonos sus datos, bien porque no ha puesto el correo electrónico y al final no lo envía, o bien porque no quiere darnos su teléfono, o también porque puso un teléfono falso y el formulario lo detecto, etc.

Por ese motivo, no sería una medida exacta, el ejecutar ese evento cuando alguien haga click en el botón de enviar de nuestro formulario. Lo correcto sería, que cuando se ejecuta la función de enviar (siempre se ejecuta después de validar que todo es correcto) entonces ejecutemos también nuestro evento para saber que una persona nos ha dejado sus datos.

Bien para ello lo que vamos a hacer es ir a nuestro archivo header.php, podéis acceder a través de Apariencia - Editor de Temas y luego buscar en el navegador con "Control+F" la palabra "header". Y así seguramente encontréis rápidamente vuestro archivo para poder editarlo, sino lo conseguís editar porque a veces da error desde aquí, podéis hacerlo a través de vuestro hosting entrando en Administrar Archivos - ir a vuestra web - wp-content - themes - vuestro tema - header.php.

Esto lo he explicado así rápido ya que seguro que la mayoría sabréis perfectamente como editar el header.php si estáis en este tutorial.

Bien aquí hay un detalle importante:

  • Si tienes el código de analytics de ga('create', 'UA-XXXXXX', 'auto');

Debes poner este código

Código Con valor de conversión

<script>

document.addEventListener( 'wpcf7mailsent', function( event ) {

    ga('send', 'event', 'contactform', 'rellenarformulario', 'paginacontacto', valor);

}, false );

</script>

  1. contactform sería la categoría (podemos darle el nombre que queramos)
  2. rellenarformulario sería la acción (podemos darle el nombre que queramos)
  3. paginacontacto sería la etiqueta (podemos darle el nombre que queramos)
  4. valor (aquí deberíamos poner el valor de la conversión, en caso de que no tenga un valor númerico lo quitamos y dejamos el código así):

Código Sin valor de conversión

<script>

document.addEventListener( 'wpcf7mailsent', function( event ) {

    ga('send', 'event', 'contactform', 'rellenarformulario', 'paginacontacto');

}, false );

</script>

  • Si tienes el código de analytics de gtag('config', 'UA-XXXXXX');

Debes poner este código

Código Con valor de conversión

<script>

document.addEventListener( 'wpcf7mailsent', function( event ) {

    gtag('event', 'send', { 'event_category': 'contactform', 'event_label': 'paginacontacto', 'value': 'valor'});

}, false );

</script>

  1. contactform sería la categoría
  2. paginacontacto sería la etiqueta
  3. send sería la acción
  4. valor (aquí deberíamos poner el valor de la conversión, en caso de que no tenga un valor numérico lo quitamos y dejamos el código así):

Código Sin valor de conversión

<script>

document.addEventListener( 'wpcf7mailsent', function( event ) {

    gtag('event', 'send', { 'event_category': 'contactform', 'event_label': 'paginacontacto'});

}, false );

</script>

Vale, ¿pero dónde pongo el código?

Lo puedes poner debajo de donde tienes el código de Analytics y sino tienes en ese sitio el código de Analytics lo puedes poner entre las etiquetas <head> donde quieras.

codigo en el header

👌🏻 Comprobar que nuestro Evento salta correctamente

Ahora vamos a ir a nuestro Google Analytics y vamos a ir a "En tiempo real" - "Eventos" y veremos esto:

eventos analytics

Como veis ahora mismo os marcará cero eventos. Ahora tenemos que ir a nuestra página web a cualquier sitio donde tengamos puesto un formulario de Contact Form, y lo rellenamos y lo enviamos. Después volvemos a Analytics y debemos ver algo como esto:

 

¿Quieres conocer nuestros trucos y secretos?

Aquí os voy a contar todos nuestros trucos y secretos que usamos en nuestro día a día. Solo te enviaremos correos que merecen la pena, nada de SPAM (PROMETIDO)
Suscríbete a nuestra lista exclusiva:

 

eventos analytics funcionando

¡¡Esto significa que todo ha ido correctamente hasta ahora!! Enhorabuena  💪 🎉

💪🏻 Vamos a definir las Conversiones (objetivos) de Google Analytics

Ahora necesitamos definir las conversiones de Google Analytics para así poder medir nuestros objetivos.

Vamos a Administrar - Objetivos:

objetivos en el menu

Definimos un Nuevo Objetivo:

nuevo objetivo

En "Configuración del Objetivo" le damos a Personalizar:

personalizar objetivo

En "Descripción del Objetivo" ponemos un nombre y le damos a Evento:

evento objetivo

En "Información del Objetivo", ponemos la categoría , acción, etiqueta y valor que hayamos puesto en nuestro código:

En nuestro ejemplo sería este el código:

<script>

document.addEventListener( 'wpcf7mailsent', function( event ) {

    gtag('event', 'send', { 'event_category': 'contactform', 'event_label': 'paginacontacto'});

}, false );

</script>

y como mencionamos más arriba:

  • Categoría: contactform
  • Etiqueta: paginacontacto
  • Acción: send

Sino sabéis muy bien que tenéis que poner en cada casilla, arriba hemos puesto para cada caso de código, cuál sería la categoría, etiqueta, acción, etc. 👆🏻

Y valor no hemos definido para nuestro ejemplo. Por lo que en Analytics deberíamos rellenarlo así:

informacion del objetivo

Con esto habríamos terminado. Para confirmar que todo esté correctamente debemos ir a "En tiempo real" - "Conversiones" y veremos 0. Ahora vamos a nuestra web otra vez y rellenamos de nuevo el formulario y si todo ha ido bien, en Analytics ahora deberías ver algo como esto:

conversiones analytics

Ya en nuestra pestaña de Conversiones - Objetivos podréis ir siguiendo la cantidad de formularios que se rellenan e ir sacando conclusiones vosotros mismos.

Esperamos haberte ayudado y solucionado el problema. Recuerda que en Marketing Pegaso somos especialistas en este tipo de estrategias de embudos de venta y podemos ayudarte a conseguir los objetivos que buscas con tus campañas. Si quieres conocernos más, puedes hacerlo en esta página: https://marketingpegaso.com/agencia-de-publicidad

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *