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.