Cómo hacer seguimiento de eventos de Google Analytics en WordPress
¡Buenos días! En este vídeo-tutorial vamos a ver cómo hacer el seguimiento de eventos de Google Analytics en WordPress o cualquier otro CMS. ¡Vamos allá!
Importante: también he sacado otro vídeo de cómo hacer seguimiento de eventos con Google Tag Manager. Te lo recomiendo encarecidamente ya que es un método más simple que el que explico en este post.
Repasemos las diferentes fases por las que hemos pasado
Preparamos el código
En esta parte simplemente preparamos el código de seguimiento del evento que luego vamos a insertar en los elementos que queremos trackear. A continuación os dejo el enlace a la página oficial de Google Analytics para que podáis ver el código, para qué sirve, algunos ejemplos de uso, etc: Seguimiento de eventos de Google Analytics.
En todo caso os dejo aquí el código:
ga('send', 'event', 'category', 'action', 'label');
Los nombres que pongo a Categoría (category), Acción (action) y Etiqueta (label) son totalmente arbitrarios, es decir que podéis poder lo que os dé la gana, mientras luego estos nombres os ayuden a identificar fácilmente los diferentes eventos. Así que yo en el ejemplo del vídeo (descarga de un PDF) pongo lo siguiente:
ga('send', 'event', 'Descargas', 'Descarga', 'Descarga del PDF de la promoción de noseque');
A continuación veamos los dos métodos que hemos realizado.
Método 1: con acceso a HTML
Utilizaremos este método si tenemos acceso relativamente fácil al código HTML del elemento que vamos a trackear. Si por ejemplo vamos a crear un enlace desde cero, como en el vídeo, este método nos viene perfecto porque insertar un evento en ese enlace es muy simple.
El elemento no tiene por que ser un enlace, ya que puede ser una imágen, un párrafo, un div, etc. Aquí os dejo el código final que utilizo en el vídeo:
<a href="https://pro.empresiona.com/wp-content/uploads/2018/01/Empresiona-Open-Graph.jpg" onclick="ga('send', 'event', 'Descargas', 'Descarga', 'Descarga del PDF de la promoción de noseque');">Descargar el PDF</a>
Importante: por defecto el editor de WordPress formatea el código que le insertamos así que si cambiamos entre pestañas Visual y HTML es posible que el código JavaScript que insertemos se pierda. Para evitar eso y conseguir que el evento de Analytics se inserte correctamente os recomiendo usar este plugin: Raw HTML
Método 2: a través de JavaScript
Este método nos viene bien en caso que el acceso al elemento que nos interesa es más complicado, como por ejemplo un formulario de contacto creado con un plugin.
En este método lo que hacemos es utilizar la clase o el ID del elemento que nos interesa para crear una función JavaScript que va a enviar un evento a Google Analytics cada vez que se pulse ese elemento en la web, ya sea un enlace, un botón, una imagen… En el caso del vídeo lo hago con jQuery pero también se puede hacer con JavaScript puro.
Como ya he avisado en el vídeo, para que este método salga bién hay que conocer un poco la sintaxis de JavaScript para no liarla en el momento de insertar el código. No puedo cubrirlo en este post pero os dejo otro artículo sobre cómo cargar correctamente los archivos CSS y JavaScript en WordPress que os puede ayudar si necesitais crear un archivo de JS nuevo en el que insertar este código.
Os comparto aquí el código utilizado en el vídeo:
jQuery('#id').click( function () {
ga('send', 'event', 'Contacto', 'click_contacto', 'Contacto a través del formulario de la web');
})
Y si queréis apuntar a una clase, el código sería algo así:
jQuery('.clase').click( function () {
ga('send', 'event', 'Contacto', 'click_contacto', 'Contacto a través del formulario de la web');
})
También te puede interesar
Cómo conectar Google Analytics a la web hecha en WordPress
WordPress: Cómo añadir Google Fonts
PageSpeed: Cómo resolver Render-blocking JavaScript y CSS en WordPress
WordPress: Cómo insertar un mapa de Google Maps
