Saltar al contenido principal

Google Analytics

Warning: Es posible que los servicios de Google no cumplan con el RGPD.

Google Maps y Geocoding, Google Analytics y Google Fonts (si se obtienen de la CND de Google) pueden considerarse no conformes con el RGPD. Por tal motivo, muchos sitios web en la Unión Europea que utilizan estos servicios muestran advertencias o formularios de consentimiento.

Tenga en cuenta la información anterior antes de incluir estos servicios en sus aplicaciones web.

Las aplicaciones de Jutro tienen un mecanismo simple para habilitar Google Analytics (GA4). También contienen utilidades que le permiten enviar eventos personalizados.

Implementación básica de Google Analytics​

Para habilitar Google Analytics agregue la siguiente variable al archivo .env. Esto a veces se denomina agregar un “ID de seguimiento” o un “ID de medición”. Encontrará este ID en su cuenta de Google Analytics.

    "REACT_APP_GA4_TRACKING_ID": "G-XXXXXXXXXX"

Implementación personalizada​

Puede invalidar la implementación de análisis predeterminada con su propia implementación personalizada.

A continuación, se muestra un ejemplo de una plantilla base para una implementación personalizada:

import { getConfigValue } from '@jutro/config';
import { publish, subscribe, JUTRO_TOPICS, loadGtag } from '@jutro/events';

export default () => {
  const gtag = loadGtag(getConfigValue('GA4_TRACKING_ID'));

  publish([
      JUTRO_TOPICS.FETCH_REQUEST,
      JUTRO_TOPICS.FETCH_RESPONSE,
      JUTRO_TOPICS.FETCH_ERROR,
    ],)

  subscribe(
    [
      JUTRO_TOPICS.FETCH_REQUEST,
      JUTRO_TOPICS.FETCH_RESPONSE,
      JUTRO_TOPICS.FETCH_ERROR,
    ],
    (event, topic) => {
      const transformedEvent = translate(whitelist(event));

      gtag('event', topic, {
        event_category: 'My fetch event'
        event_label: JSON.stringify(transformedEvent),
      });
    }
  );
  publish()
};

Para obtener más información sobre la configuración y el seguimiento de eventos, consulte la documentación de la API de eventos.

Pruebas en entorno de CI​

Proporcionamos un ejemplo de prueba e2e (de extremo a extremo) que verifica si su aplicación envía datos analíticos a GA. Esta prueba solo se ejecutará si la variable env REACT_APP_GA4_TRACKING_ID está definida para el proceso que ejecuta la prueba. Si no se proporciona en el archivo .env, puede configurarla en TeamCity como parámetro, ya sea en la interfaz de usuario o en el archivo de configuración de compilación: param("env.REACT_APP_GA4_TRACKING_ID", "testGa4Id").

Seguimiento de los errores de la aplicación​

La aplicación de ejemplo Jutro contiene una muestra de cómo se puede hacer seguimiento de los errores generados desde el código del marco.

import { publish, subscribe, JUTRO_TOPICS } from '@jutro/events';

publish(JUTRO_TOPICS.UNKNOWN_ERROR, { val: 'unknown application error' });

subscribe(JUTRO_TOPICS.UNKNOWN_ERROR, (error) => {
  //... your analytics code
});

Para realizar un seguimiento de todos los errores, agregue un agente de escucha al objeto window. Si tiene agentes de escucha para JUTRO_TOPICS.UNKNOWN_ERROR, elimínelos.

window.addEventListener('error', (error) => {
  //... your analytics code
});

Detalles de los eventos de Google Analytics​

Ejemplo de envío de un evento de Google Analytics como un string en event_label:

gtag('event', 'play', {
  event_category: 'Song Played',
  event_label: JSON.stringify({
    'Song Artist': 'The Rolling Stones',
    'Song Title': 'Gimme Shelter',
  }),
});

Esto envía la carga útil a GA, pero:

  • la longitud máxima de cada atributo de evento es de solo 500 bytes, por lo que puede ser imposible enviar cargas útiles más grandes
  • el objeto se representa como un valor de cadena sin procesar de event_label

Considere enviar múltiples eventos para que los datos sean más fáciles de procesar usando Google Analytics como:

gtag('event', 'Song Played', {
  event_category: 'Song Artist',
  event_label: 'The Rolling Stones',
});

gtag('event', 'Song Played', {
  event_category: 'Song Title',
  event_label: 'Gimme Shelter',
});

Lista blanca y traducciones​

Hay dos conceptos relacionados con el envío de eventos de usuario al exterior:

  • Lista blanca (también conocida como lista de permitidos). Utilícela para ocultar datos confidenciales del usuario antes de enviar un evento. Una implementación simple en la aplicación Jutro siempre oculta todos los valores del evento reemplazándolos por whitelistConfig.obfuscationString desde la configuración. Las propiedades especificadas en whitelistConfig.allowedProperties no se ofuscan.

  • Traducciones. Las propiedades del evento no siempre son fáciles de leer en los paneles de análisis. La implementación de la aplicación Jutro le permite reemplazar las propiedades de eventos por strings más legibles.

    Observe dictionaryConfig.eventKeys en el siguiente ejemplo de código:

{
  "whitelistConfig": {
    "allowedProperties": ["path", "componentName"],
    "obfuscationString": "**OBFUSCATED**"
  },
  "dictionaryConfig": {
    "eventKeys": {
      "path": "Field Data Path",
      "componentName": "Component Name"
    }
  }
}

Recursos: