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 o realiza una compra. Google Analytics usa datos de eventos para crear informes con información sobre tu empresa. Más información

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 que configures eventos recopilados automáticamente ni 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 que 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 quieres enviar un evento a Google Analytics, usas 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 sobre el 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.

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 antes de 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