--- title: "Añadir conversiones en GA4 sin Google Tag Manager - Carlos Sánchez" description: "Insertar conversiones de forma manual por medio de JavaScript para GA4 sin necesidad de Google Tag Manager" author: "Carlos Sánchez" url: https://carlossanchezdonate.com/articulo/conversiones-ga4-js-eventos/ image: https://carlossanchezdonate.com/wp-content/uploads/tb-analytics-event.jpg --- # Conversiones de GA4 con JS Aprende a insertar eventos de forma manual en GA4 ![Conversiones de GA4 con JS](https://carlossanchezdonate.com/wp-content/uploads/cover-analytics-event.jpg) **Autor:** : [Carlos Sánchez](https://carlossanchezdonate.com/sobre-mi/) **Temática: ** : [Multimedia](https://carlossanchezdonate.com/seo-avanzado/multimedia/) , : [Tecnologías](https://carlossanchezdonate.com/seo-avanzado/tecnologias/) **Fecha de publicación:** : 2023-12-31 **Última revisión:** : 2024-01-03 **Índice** mostrar 1 Un evento/Conversión en GA4 1.1 Parámetros 2 Código de eventos para mi analytics 2.1 Evento simple con onclick 2.2 Evento simple con addeventlistener 2.3 Añadiendo más eventos en una misma acción. 2.4 Evento de GA4 con parámetros 3 Fuentes 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. ![](https://carlossanchezdonate.com/wp-content/uploads/conversiones-eventos.jpg) ### 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](https://carlossanchezdonate.com/articulo/delay-en-javascript/#comportamiento-normal-del-javascript) 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](https://carlossanchezdonate.com/articulo/cargas-diferidas-seo/#load-on-interaction). ¿No lo estás entendiendo? Si quieres aprender a aplicar todo esto y mucho más, accede a mi formación: [¡Aprende SEO de verdad!](/master-seo-tecnico/) 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: `Comprar` 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: `Comprar` 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](https://carlossanchezdonate.com/master-seo-tecnico/) 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: `Comprar` 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](https://carlossanchezdonate.com/seo-avanzado/rendimiento-velocidad/), 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: `Comprar ` ` 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 }); }); }); ` ## Fuentes - [Eventos y Etiquetas según Google Developers](https://developers.google.com/tag-platform/devguides/events?hl=es#gtag.js) Si te gusta este artículo, me ayudarías un montón compartiendo mi contenido: Compartir: [![Compartir en LinkedIn](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/linkedin.svg)](https://www.linkedin.com/cws/share/?url=https://carlossanchezdonate.com/articulo/conversiones-ga4-js-eventos/) [![Compartir en Twitter](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/tw.svg)](https://twitter.com/intent/tweet?url=https://carlossanchezdonate.com/articulo/conversiones-ga4-js-eventos/) [![Compartir en Facebook](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/facebook.svg)](https://www.facebook.com/sharer/sharer.php?u=https://carlossanchezdonate.com/articulo/conversiones-ga4-js-eventos/) [![Compartir en WhatsApp](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/whatsapp.svg)](whatsapp://send?text=https://carlossanchezdonate.com/articulo/conversiones-ga4-js-eventos/) [![Compartir en Telegram](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/tlg.svg)](https://telegram.me/share/url?url=https://carlossanchezdonate.com/articulo/conversiones-ga4-js-eventos/) No se te da mal el SEO Técnico **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!](/master-seo-tecnico/) Tal vez te interesen otros artículos: [Artículos de SEO](/seo-avanzado/) [Renderings de JavaScript en el SEO](https://carlossanchezdonate.com/articulo/renderizacion-de-javascript-en-el-seo/) [Sitemaps](https://carlossanchezdonate.com/articulo/sitemaps/) [Curación de enlaces en el SEO](https://carlossanchezdonate.com/articulo/curacion-de-enlaces-en-el-seo/) [Texto alternativo para imágenes](https://carlossanchezdonate.com/articulo/alt-imagenes/) [Rich Snippets con HTML](https://carlossanchezdonate.com/articulo/rich-snippets-sin-datos-estructurados/)