Conversiones de GA4 con JS

Aunque Google Analytics por defecto recoge bastante información que puede resultar útil para cualquier entorno web, puede quedarse corto para analizar distintas situaciones más específicas. Para solucionar esto existe una forma de registrar distintos eventos (conversiones en el panel de GA4) y de esta forma comprobar la efectividad de la web.

Si bien hay una forma de hacerlo directamente con Google Tag Manager, a pesar de ser un estándar en muchas grandes empresas, no siempre resulta eficiente y para muchos proyectos puede ser más un lastre que una ayuda.

Así que quiero enseñar como hacer esta implementación sin necesidad de dicha herramienta, con nuestras manitas y un poquito de conocimiento de JavaScript.

Un evento/Conversión en GA4

Un evento es cualquier interacción que realiza un usuario con cualquier elemento de una web que el Webmaster quiera analizar.

Algunos ejemplos de eventos pueden ser:

• Cargas de páginas webs.
• Clics en enlaces.
• Envíos de formularios.
• Reproducción de multimedia.
• Descarga de archivos.
• Compras.
• Subscripciones.

Todos estos ejemplos y muchos más se pueden registrar de una forma sencilla en GA4 para comprobar con qué frecuencia ocurren estos sucesos. De esta forma, se puede analizar una acción en particular.

Parámetros

Además a estos eventos, les podemos añadir distintos parámetros que ayudan a personalizar y detallar el evento en particular. Algunos de estos ejemplos son:

• Event Category (Categoría del Evento): Define la categoría general del evento, por ejemplo, 'Video', 'Descarga' o 'Interacción del Usuario'.
• Event Action (Acción del Evento): Describe la acción específica que el usuario ha realizado, como 'Play', 'Pause', 'Descargar PDF', etc.
• Event Label (Etiqueta del Evento): Proporciona información adicional sobre el evento, como el nombre del video, el título del documento descargado, etc.
• Event Value (Valor del Evento): Un valor numérico asociado al evento, que puede ser útil para cuantificar el impacto de las acciones del usuario, como el tiempo en segundos, la cantidad de descargas, etc.
• Non-Interaction (No Interacción): Un booleano que, cuando se establece en verdadero, indica que el evento no debe afectar la tasa de rebote de la página.
• User ID (ID de Usuario): Este identificador único puede ayudar a rastrear la actividad de un usuario específico a lo largo de diferentes sesiones y dispositivos.
• Transaction ID (ID de Transacción): Útil para eventos relacionados con compras o transacciones, permite rastrear una transacción específica.
• Product Details (Detalles del Producto): Si el evento está relacionado con un producto, puedes añadir detalles como 'Nombre del Producto', 'ID del Producto', 'Categoría del Producto', etc.
• Campaign Data (Datos de Campaña): Si el evento está asociado con una campaña de marketing, puedes incluir 'Nombre de la Campaña', 'Fuente de la Campaña', 'Medio de la Campaña', etc.
• Location Data (Datos de Ubicación): Información sobre la ubicación del usuario, como 'Ciudad', 'Región', 'País'.
• Device Information (Información del Dispositivo): Detalles sobre el dispositivo del usuario, como 'Tipo de Dispositivo', 'Sistema Operativo', 'Modelo del Dispositivo'.
• Page Information (Información de la Página): Detalles sobre la página en la que ocurrió el evento, como 'URL de la Página', 'Título de la Página'.
• Timestamp (Marca de Tiempo): El momento exacto en que ocurrió el evento.
• Custom Dimensions/Metrics (Dimensiones/Métricas Personalizadas): Dimensiones y métricas específicas de tu negocio que quieras rastrear con el evento.

Código de eventos para mi analytics

Una vez que se ha entendido que es, lo interesante es aprender a registrarlo y a hacer de este conocimiento algo funcional. JavaScript es un lenguaje de programación reactivo que los navegadores saben interpretar. Este lenguaje funciona en base a las interacciones que nosotros designemos, desde el simple hecho de que exista un elemento de HTML con unos atributos o valores en particular, o cuando el propio usuario interaccione con un elemento en particular.

Así que vamos manos a la obra y comencemos con JavaScript básico añadiendo un evento simple para aprender como hacer eventos complejos que nos puedan resultar de utilidad.

Evento simple con onclick

Si nosotros tenemos un botón, por ejemplo:

<button type="submit">Comprar</button>

Podríamos hacer algo tan simple como añadir un atributo onclick (hace que se cargue el js que sale en su valor, cuando el usuario hace click en dicho elemento), y simplemente nombrar al evento como queramos que salga en analytics. Por ejemplo:

<button type="submit" onclick="gtag('event', 'evento_asdrubalseo');">Comprar</button>

De esta forma, cada vez que el usuario haga clic en dicho botón, se añadirá el evento.

Evento simple con addeventlistener

Es posible que no podamos editar tan fácilmente el HTML de dicho botón en particular, pero si podemos añadir JS, siempre tenemos alternativa para "parchear" o simplemente hacer que nos funcione.

Para que esta implementación funcione de una forma correcta se debe añadir el JS después del elemento, o también se puede cargar por medio de un defer. Recordemos que es reactivo, los alumnos de mi máster ya lo saben.

Como no me sería posible por la salud y longitud del post hacer una explicación detallada de cómo funcionan los selectores y como hacer frente a cada situación aunque el elemento HTML no tenga ID, vamos a imaginarnos que el elemento en cuestión tiene un ID:

<button id="miBotonCompra" type="submit">Comprar</button>

En este caso, en nuestro js tendríamos que añadirle el addEventListener

document.addEventListener('DOMContentLoaded', function() {
document.getElementById('miBotonCompra').addEventListener('click', function() {
gtag('event', 'evento_asdrubalseo');
});
});


En el caso de que el Script cargue en todas las páginas y no solo en las que está el botón, aunque es menos eficiente a nivel de WPO, esta sería la forma de añadirlo:


document.addEventListener('DOMContentLoaded', function() {
var botonCompra = document.getElementById('miBotonCompra');
if (botonCompra) {
botonCompra.addEventListener('click', function() {
gtag('event', 'evento_asdrubalseo');
});
}
});

Añadiendo más eventos en una misma acción.

Es posible que se estén utilizando distintas herramientas de analítica, y que la acción siga siendo importante en todas y se quiera registrar en todas. Siempre que se active la función al realizar el evento que se quiere registrar, pongo un ejemplo simple con GA4, Yandex Metrica, Clarity y Hotjar:

function enviarEvento() {
// Evento de Google Analytics
gtag('event', 'evento');
// Evento de Yandex.Metrica
ym(66716548, 'reachGoal', 'evento');
// Evento de Clarity
clarity("track", "evento");
// Evento de Hotjar
hj('trigger', 'evento');
return true;
}


De esta forma, ese mismo evento, con los nombres que se le designen (en este caso evento) serán enviados a cada una de las herramientas de analítica siempre y cuando estas estén en funcionamiento.

Evento de GA4 con parámetros

Os voy a poner el ejemplo de unos datos ficticios que se pueden automatizar fácilmente en un ecommerce dependiendo del producto:

<button
id="miBotonCompra"
type="submit">Comprar</button>


<script>
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('miBotonCompra').addEventListener('click', function() {
// Establecemos las variables que sacamos de la página y del usuario:
var productId = '12345'; // ID del producto
var productName = 'Widget Pro'; // Nombre del producto
var productCategory = 'Electrónica'; // Categoría del producto
var productPrice = 299.99; // Precio del producto
var productQuantity = 1; // Cantidad del producto
var userId = 'user12345'; // ID del usuario
var userLocation = 'Madrid, España'; // Ubicación del usuario
var eventTimestamp = new Date().toISOString();
// Envío del evento a Google Analytics
gtag('event', 'compra', {
'event_category': 'Compras',
'event_label': productName,
'value': productPrice,
'non_interaction': false,
'product_id': productId,
'product_name': productName,
'product_category': productCategory,
'product_price': productPrice,
'product_quantity': productQuantity,
'user_id': userId,
'user_location': userLocation,
'event_timestamp': eventTimestamp
});
});
});
</script>

Fuentes

• Eventos y Etiquetas según Google Developers