Configura eventos

Los eventos te permiten medir las interacciones de los usuarios en tu sitio web o aplicación. Por ejemplo, puedes medir cuándo alguien carga una página, hace clic en un vínculo y realiza una compra. Google Analytics usa datos de eventos para crear informes con información sobre tu empresa. Más información

Tipos de eventos

Los eventos de Google Analytics se agrupan en cuatro categorías:

Tipo de evento Vínculo ¿Se necesita configuración? Descripción y caso de uso
Recopilados automáticamente Más información No Se recopilan de forma predeterminada cuando configuras la etiqueta de Google Analytics en tu sitio o aplicación. Algunos ejemplos son first_visit, session_start y user_engagement.
Medición optimizada Más información No (por lo general) Se recopilan automáticamente cuando la medición optimizada está habilitada en la IU de Google Analytics. Mide interacciones web comunes como scroll, click y file_download.
Recomendado Referencia de eventos recomendados Sí Son eventos estandarizados para diferentes verticales comerciales (p.ej., comercio minorista, viajes, juegos) que desbloquean paneles de informes precompilados. Ejemplos: purchase, login, sign_up.
Personalizado Más información Sí Son eventos que defines tú mismo porque ningún evento automático, optimizado o recomendado precargado se adapta a tus necesidades. Se puede acceder a ellos con informes personalizados.

En esta guía, se muestra cómo configurar eventos recomendados y eventos personalizados en tu sitio web con la etiqueta de Google (gtag.js) o Google Tag Manager. No es necesario configurar los eventos recopilados automáticamente ni los eventos de medición optimizada.

Público

Configuraste Google Analytics y estás comenzando a ver datos en tus informes, pero quieres recopilar más información de la que Analytics recopila automáticamente o quieres desbloquear ciertas funciones y capacidades en Analytics.


Antes de comenzar

En esta guía, se da por sentado que ya hiciste lo siguiente:

También se da por sentado que tienes lo siguiente:

  • Tienes acceso al código fuente de tu sitio web.
  • Tienes el rol de editor o superior en la cuenta de Google Analytics.

Descripción general de la etiqueta de Google (gtag.js)

Usa la API de la etiqueta de Google (gtag.js) para enviar eventos a Google Analytics. La API tiene una función llamada gtag(), y cada vez que quieras enviar un evento a Google Analytics, debes usar la siguiente sintaxis:

gtag('event', '<event_name>', {
  <event_parameters>
});

En este ejemplo, la función gtag() incluye lo siguiente:

  • Un comando event que le indica a Google que estás enviando un evento
  • El nombre del evento recomendado o personalizado
  • (Opcional) Una colección de parámetros que proporcionan información adicional sobre el evento

Por ejemplo, el siguiente es un evento recomendado llamado screen_view con dos parámetros:

gtag('event', 'screen_view', {
  'app_name': 'myAppName',
  'screen_name': 'Home'
});

Cómo agregar eventos a tu JavaScript

gtag() es una función de JavaScript, por lo que debes agregarla al JavaScript de tu página web. Por ejemplo, puedes agregar la función dentro de tus <script> etiquetas o en un archivo JavaScript independiente que importes a tu HTML página.

Puedes agregar eventos a tu JavaScript en cualquier lugar debajo del fragmento de la etiqueta de Google. Google no procesará los datos de los eventos que coloques por encima del fragmento de la etiqueta de Google. Por ejemplo, el siguiente código de muestra incluye un evento recomendado llamado screen_view y un evento personalizado llamado signup_newsletter dentro de una <script> etiqueta:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-XXXXXXXXXX');
    </script>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title of the page</title>
</head>
<body>
    <p>Welcome to my website!</p>
    
    <script>
      /**
      *   The following events are sent when the page loads. You send
      *   recommended and custom events the same way. You could wrap
      *   the events in JavaScript functions so they are sent when
      *   users perform specific actions.
      */
      gtag('event', 'screen_view', {
        'app_name': 'myAppName',
        'screen_name': 'Home'
      });
      gtag('event', 'signup_newsletter', {
        'method': 'web'
      });
    </script> 
</body>
</html>

Si quieres enviar el evento en función de un clic en un botón (o alguna otra acción del usuario), puedes agregar JavaScript adicional a tu evento.

Cómo configurar varios eventos

El seguimiento de varias interacciones del usuario implica implementar múltiples gtag('event', ...) llamadas en todo el JavaScript de tu sitio web, cada una activada por una acción o condición específica. En los ejemplos, se usan tanto eventos recomendados como eventos personalizados.

Por ejemplo, para hacer un seguimiento de diferentes actividades, como los accesos de usuarios, el uso compartido de contenido y la finalización de tutoriales, implementa llamadas gtag('event', ...)independientes:

Ejemplo: Seguimiento de accesos

Este fragmento se incluiría en la función de JavaScript que controla los accesos exitosos de los usuarios.

// Send a 'login' event when a user signs in
gtag('event', 'login', {
  method: 'Email' // Example parameter indicating login method
});

Ejemplo: Seguimiento del uso compartido de contenido

Este fragmento se vincularía al evento de clic de un botón de uso compartido.

// Send a 'share' event when a user clicks a share button
gtag('event', 'share', {
  method: 'Facebook',
  content_type: 'Article',
  item_id: 'C12345' // Example parameter for the shared item
});

Ejemplo: Seguimiento de un evento personalizado

Se llamaría a este fragmento cuando un usuario complete correctamente un tutorial en las instalaciones.

// Send a custom event
gtag('event', 'tutorial_complete', {
  tutorial_name: 'Introduction to GA4'
});

Puedes incorporar estas llamadas gtag('event', ...) en varios puntos del código de tu sitio web para capturar los datos en el momento adecuado. Cada evento se envía a Google Analytics a medida que ocurre. No hay una sintaxis especial ni una sola llamada para definir o enviar varios tipos diferentes de eventos en un lote con gtag.js; debes llamar a gtag('event', ...) para cada evento que quieras enviar.

Consulte sus eventos en Analytics

Puedes ver tus eventos y sus parámetros con los informes En tiempo real y DebugView. Ten en cuenta que el informe DebugView requiere una configuración adicional para que puedas usarlo. Estos dos informes te muestran los eventos que activan los usuarios en tu sitio web a medida que se activan.

Próximos pasos

Anterior
Web
Siguiente
Agregar parámetros