Aprende a insertar eventos de forma manual en GA4
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 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:
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.
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:
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.
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.
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');
});
}
});
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.
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>
Te falta mi máster. Accede a una formación avanzada que te permitirá aplicar e implementar SEO en cualquier tipo de WEB
¡Accede al Máster de SEO Técnico!Si te ha gustado esta publicación, siempre me lo puedes agradecer dándome like en esta publicación de LinkedIn sobre este mismo artículo.
