Configurar eventos

Los eventos permiten medir las interacciones de los usuarios en el sitio web o la aplicación. Por ejemplo, puedes medir el momento en que alguien carga una página, hace clic en un enlace y hace una compra. Google Analytics usa los datos de eventos para crear informes con datos sobre tu empresa. Más información

En esta guía te explicamos cómo crear 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 recogidos automáticamente ni los de medición mejorada.

Audiencia

Has configurado Google Analytics y estás empezando a ver datos en los informes, pero quieres recoger más información de la que recoge Analytics automáticamente, o bien quieres desbloquear determinadas funciones y características de Analytics.


Antes de empezar

En esta guía se da por hecho que has llevado a cabo las siguientes acciones:

También se presupone que tienes lo siguiente:

  • Acceso al código fuente de tu sitio web
  • El rol de Editor en la cuenta de Google Analytics

Configurar eventos

Usa la API de gtag.js para enviar eventos a Google Analytics. La API tiene una función llamada gtag() y, siempre que quieres enviar un evento a Google Analytics, se usa esta sintaxis:

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

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

  • Un comando event que indica a Google que estás enviando un evento
  • El nombre del evento recomendado o personalizado
  • (Opcional) Un conjunto 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'
});

Añadir eventos a JavaScript

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

Puedes añadir eventos al código JavaScript en cualquier lugar por debajo del fragmento de la etiqueta de Google. Google no procesará los datos de los eventos que coloques antes del fragmento de la etiqueta de Google. Por ejemplo, el siguiente código de muestra incluye un evento llamado screen_view dentro de una etiqueta <script>:

<!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 event is sent when the page loads. You could
      * wrap the event in a JavaScript function so the event is
      * sent when the user performs some action.
      */
      gtag('event', 'screen_view', {
        'app_name': 'myAppName',
        'screen_name': 'Home'
      });
    </script> 
</body>
</html>

Si quieres enviar el evento basándote en un clic en un botón (u otra acción del usuario), puedes añadir código JavaScript adicional al evento.

Consultar eventos en Analytics

Puedes ver tus eventos y sus parámetros en los informes En tiempo real y DebugView. Ten en cuenta que, para usar el informe DebugView, debes hacer algunos ajustes. En estos dos informes se muestran los eventos que los usuarios activan en tu sitio web en tiempo real.

Pasos siguientes