Conversiones (Eventos) de Google Analytics con Contact Form 7

Hace unos días hemos tenido que hacer esto para un cliente. Hay muchísima información en Internet, y mucha desactualizada, así que os dejamos la que nos sirvió a nosotros.

La idea es la siguiente, se crean unos Eventos (Objetivos) en Google Analytics, para que podamos realizar seguimiento de los formularios que mandamos con Contact Form 7 en WordPress.

Doy por supuesto que se sabe crear Objetivos en GA, y que se ha creado uno (o varios) de tipo Evento con la Categoría, Acción, Etiqueta y Valor necesarios.

Cómo implementarlo en Contact Form 7 en WordPress.

Ahora necesitamos que nuestro WordPress envíe una notificación a Google Analytics cada vez que se envíe un formulario. Para ello vamos a poner un javascript que «escuche».

¿Escuchar a qué? Afortunadamente el creador de Contact Form 7 ha sido previsor, y ha programado unos eventos DOM que se ejecutan cuando se realizan diversas acciones. Así que vamos a escuchar al evento DOM wpcf7mailsent  que se ejecuta cuando se ha enviado un formulario correctamente.

¿Qué enviamos a Google Analytics? Hay dos maneras de hacer esto, con ga o con gtag (gtag.js). Cuidado porque la sintaxis es diferente.

ga('create', 'GA_MEASUREMENT_ID', 'auto');
ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);

gtag('event', eventName, {
  'send_to': 'GA_MEASUREMENT_ID',
  'parameter1': 'value1',
  'parameter2': 'value2',
  // ...
});

Nosotros hemos optado por gtag (más nuevo) y este artículo se basa en eso.

Código en WordPress.

Cómo siempre hacemos últimamente, este truco se basa en un código que podemos poner o en functions.php de nuestro tema hijo o (como lo hacemos nosotros) en un Snippet. Nos gusta los Snippets porque podemos activarlos, desactivarlos, etiquetarlos, clonarlos, poner descripción….

Vamos a poner un Snippet que se ejecutará «sólo en la portada» (mala traducción de Frontend).

El código es el siguiente:

add_action( 'wp_footer', function () { ?>
<script>
	document.addEventListener( 'wpcf7mailsent', function( event ) {
	    if ( '11' == event.detail.contactFormId ) {
			gtag('event', 'evento1', { 'event_category': 'evento1', 'event_action': 'enviar',
'event_label': 'es', 'value': '0'});
			
	    }
	    if ( '1693' == event.detail.contactFormId ) {
			gtag('event', 'evento2', { 'event_category': 'evento2', 'event_action': 'enviar',
'event_label': 'es', 'value': '0'});
			
	    }
		 if ( '2504' == event.detail.contactFormId ) {
			gtag('event', 'evento3', { 'event_category': 'envento3', 'event_action': 'enviar',
'event_label': 'es', 'value': '0'});
			
	    }
	}, false );
</script>
<?php } );

Explicación.

Creo que se explica bastante, pero estas son las claves del código:

  • if ( ‘XXX’ este XXX tenemos que sustituirlo por el id del formulario en cuestión). EL Id lo podemos encontrar en el shortcode que nos da CF7
  • gtag(‘event’, ‘evento3’, { ‘event_category’: ‘envento3’, ‘event_action’: ‘enviar’, ‘event_label’: ‘es’, ‘value’: ‘0’});
    Este es el evento de GA que se dispara cuando el formulario enviado tiene el ID que ponemos. Aquí tienes que poner tus valores detrás de los campos event_category, event_action, event_label y value.

Con esto activado, idos a En Tiempo Real>Eventos en Google Analytics y haced una prueba de envío. Deberíais ver cómo se dispara el evento en tiempo real.

Deja un comentario

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

Resumen de nuestra Política de Privacidad

  • Responsable: SmythSys IT Consulting SLNE.
  • Finalidad: Gestionar y moderar los comentarios.
  • Legitimación: Necesitas dar tu consentimiento para publicar un comentario.
  • Destinatarios: Tus datos se alojan en los servidores de OVH.
  • Derechos: Tienes derecho a acceder, rectificar, limitar y suprimir los datos en la dirección del responsable (en nuestra política de privacidad).

Time limit is exhausted. Please reload CAPTCHA.