Zum Hauptinhalt springen

Google Analytics

Warning: Google Services sind möglicherweise nicht DSGVO-konform

Google Maps und Geocoding, Google Analytics und Google Fonts (wenn sie von Googles CDN abgerufen werden) können als nicht DSGVO-konform angesehen werden. Daher werden auf vielen Websites in der Europäischen Union, die diese Dienste nutzen, Warnungen oder Einverständniserklärungen angezeigt.

Beachten Sie die obigen Informationen, bevor Sie diese Dienste in Ihre Webanwendungen aufnehmen.

Jutro-Anwendungen verfügen über einen einfachen Mechanismus zur Aktivierung von Google Analytics (GA4). Sie enthalten auch Dienstprogramme, mit denen Sie benutzerdefinierte Ereignisse senden können.

Basisimplementierung von Google Analytics​

Fügen Sie zum Aktivieren von Google Analytics die folgende Variable in der .env-Datei hinzu. Dies wird manchmal als Hinzufügen einer „Tracking-ID“ oder „Mess-ID“ bezeichnet. Diese ID finden Sie in Ihrem Google-Analytics-Konto.

    "REACT_APP_GA4_TRACKING_ID": "G-XXXXXXXXXX"

Benutzerdefinierte Implementierung​

Sie können die standardmäßige Analyseimplementierung mit einer eigenen benutzerdefinierten Implementierung überschreiben.

Es folgt ein Beispiel für die Basisvorlage für eine benutzerdefinierte Implementierung:

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()
};

Weitere Informationen zum Einrichten und Nachverfolgen von Ereignissen finden Sie in der Dokumentation zur Ereignis-API.

Tests in einer CI-Umgebung​

Wir stellen einen E2E-Beispieltest bereit, mit dem geprüft wird, ob Ihre Anwendung Analysedaten an Google Analytics sendet. Dieser Test wird nur ausgeführt, wenn die Umgebungsvariable REACT_APP_GA4_TRACKING_ID für den Prozess festgelegt ist, der den Test ausführt. Wenn sie in der .env-Datei nicht angegeben ist, können Sie sie in TeamCity als Parameter festlegen, entweder in der Benutzeroberfläche oder in der Build-Konfigurationsdatei: param("env.REACT_APP_GA4_TRACKING_ID", "testGa4Id").

Anwendungsfehler nachverfolgen​

Die Jutro-Beispielanwendung enthält ein Beispiel dazu, wie im Frameworkcode ausgelöste Fehler nachverfolgt werden können.

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
});

Um alle Fehler nachzuverfolgen, fügen Sie dem Objekt window einen Listener hinzu. Wenn Listener für JUTRO_TOPICS.UNKNOWN_ERROR vorhanden sind, entfernen Sie sie.

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

Besonderheiten von Google Analytics-Ereignissen​

Beispiel für das Senden eines Google Analytics-Ereignisses als Zeichenfolge in event_label:

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

Damit werden die Nutzdaten an Google Analytics gesendet, aber:

  • die maximale Länge jedes Ereignisattributs beträgt nur 500 Byte, sodass umfangreichere Nutzdaten möglicherweise nicht gesendet werden können
  • das Objekt wird als Rohzeichenfolgenwert von event_label dargestellt

Sie können wie folgt mehrere Ereignisse senden, damit Daten mit Google Analytics einfacher verarbeitet werden können:

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',
});

Whitelists und Umwandlungen​

Zwei Konzepte sind mit dem Senden von Benutzerereignissen außerhalb der Anwendung verbunden:

  • Whitelists (auch als Allowlists oder Positivlisten bezeichnet): Zu verwenden, um sensible Benutzerdaten vor dem Senden eines Ereignisses zu verbergen. Mit einer einfachen Implementierung in der Jutro-Anwendung werden alle Ereigniswerte immer verborgen, indem sie durch whitelistConfig.obfuscationString in der Konfiguration ersetzt werden. Die in whitelistConfig.allowedProperties angegebenen Eigenschaften werden nicht verschleiert.

  • Umwandlungen: Ereigniseigenschaften sind in Analyse-Dashboards nicht immer einfach lesbar. Mit einer Implementierung der Jutro-Anwendung können Ereigniseigenschaften durch besser lesbare Zeichenfolgen ersetzt werden.

    Siehe dictionaryConfig.eventKeys im folgenden Codebeispiel:

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

Ressourcen: