Richten Sie Mixpanel Analytics in einer NextJS-Anwendung ein

Analysen sind für jede profitable Anwendung von entscheidender Bedeutung, egal ob es sich um eine kleine Anwendung mit 100 Benutzern oder eine große Anwendung mit 10.000 Benutzern handelt.

Das Verständnis Ihrer Benutzer ist eines der wichtigsten Dinge. Und Mixpanel ist eines der besten Tools dafür.

Heute erfahren Sie, wie Sie das Mixpanel-Tracking integrieren und starten.

Richten Sie das Projekt ein

Ich gehe davon aus, dass Sie bereits über ein NextJS-Projekt-Setup verfügen. Erstellen Sie hier außerdem ein neues Mixpanel-Konto (falls Sie dies noch nicht getan haben).

Denken Sie daran, dass ich für NextJS zeige, es aber auch für jede ReactJS-App gilt.

Dann installieren Sie die Abhängigkeit

npm install mixpanel-browser

Holen Sie sich einen Token

Fügen Sie zunächst die folgende Umgebungsvariable hinzu

NEXT_PUBLIC_MIXPANEL_TOKEN="YOUR_TOKEN_HERE"

Jetzt können Sie das Mixpanel-Token aus dem Dashboard Ihres Projekts abrufen.

Gehen Sie dann zu Einstellungen -> Projekteinstellungen

Dann schnappen Sie sich das Projekt-Token und fügen Sie es der Umgebungsdatei hinzu.

Konfigurationsdatei erstellen

Erstellen Sie eine Datei mit dem Namen mixpanel.ts und fügen Sie den folgenden Code hinzu

import mixpanel from 'mixpanel-browser';

// Define event names as constants to prevent typos
export const ANALYTICS_EVENTS = {
  PAGE_VIEW: 'Page View',
  BUTTON_CLICK: 'Button Click',
  FORM_SUBMIT: 'Form Submit',
  USER_SIGNED_IN: 'User Signed In',
  USER_SIGNED_UP: 'User Signed Up',
  USER_SIGNED_OUT: 'User Signed Out',
  // ... other events
};

// Initialize mixpanel
const MIXPANEL_TOKEN = process.env.NEXT_PUBLIC_MIXPANEL_TOKEN;

if (MIXPANEL_TOKEN) {
  mixpanel.init(MIXPANEL_TOKEN, {
    debug: process.env.NODE_ENV === 'development',
    track_pageview: true,
    persistence: 'localStorage',
    ignore_dnt: true,
  });
}

Initialisieren Sie also das Mixpanel so weit oben wie möglich in Ihrem Komponentenbaum.

Analysefunktionen hinzufügen

Nachdem Sie nun die Konfiguration hinzugefügt haben, ist es an der Zeit, einige wiederverwendbare Funktionen zum Verfolgen von Mixpanel-Ereignissen hinzuzufügen.

Fügen Sie also den folgenden Code in derselben Datei hinzu:

export const MixpanelAnalytics = {
  track: <T extends Record<string, any>>(
    eventName: string,
    properties?: T & CommonEventProperties
  ) => {
    try {
      if (MIXPANEL_TOKEN) {
        mixpanel.track(eventName, {
          ...properties,
          timestamp: Date.now(),
          path: typeof window !== 'undefined' ? window.location.pathname : undefined,
        });
      }
    } catch (error) {
      console.error('Error tracking event:', error);
    }
  },

  pageView: (pageName: string, properties?: Record<string, any>) => {
    try {
      if (MIXPANEL_TOKEN) {
        MixpanelAnalytics.track(ANALYTICS_EVENTS.PAGE_VIEW, {
          page: pageName,
          ...properties,
        });
      }
    } catch (error) {
      console.error('Error tracking page view:', error);
    }
  }
};

Wenn Sie diese beiden Funktionen oben analysieren

verfolgen

Diese Funktion wird verwendet, um Ereignisse jeglicher Art zu verfolgen.

Wenn Sie beispielsweise einen Benutzer verfolgen möchten, klicken Sie auf eine Schaltfläche, um eine externe Website zu besuchen. Vielleicht zur Affiliate-Berechnung

Sie können Folgendes tun:

MixpanelAnalytics.track("VISIT_WEBSITE", {
  website_name: name,
  website_url: website,
  visit_count: (mixpanel.get_property('total_website_visits') ?? 0) + 1,
});

Seitenansicht

Dies ist eine ziemlich einfache Methode, um jeden Seitenaufruf in Ihrer Anwendung zu verfolgen.

Denken Sie daran: Als wir Mixpanel initialisierten, hatten wir es bereits angewiesen, Seitenaufrufe zu verfolgen:

mixpanel.init(MIXPANEL_TOKEN, {
  track_pageview: true,  << HERE
  ...others
});

Dieses benutzerdefinierte Tracking dient also nur der detaillierteren Analyse.

Kennen Sie Ihre Benutzer

Klicks zu verfolgen ist zwar cool, aber oft reicht es nicht aus.

Vielleicht möchten Sie bestimmte Benutzer verfolgen. Vielleicht möchten Sie wissen, wer was tut. Möglicherweise erstellen Sie einen Trichter, um das Benutzerverhalten zu analysieren.

Für diese Szenarien bietet Mixpanel 2 Funktionen.

1. identifizieren

2. zurücksetzen

Auf einer hohen Ebene können Sie also anrufen, nachdem sich ein Benutzer angemeldet hat

mixpanel.identify("whatever identified you want (usually email or userid)")

Und beim Abmelden können Sie es zurücksetzen

mixpanel.reset()

Jetzt können Sie auch zusätzlichen Kontext oder Details zu Ihren Benutzern hinzufügen, indem Sie die Methode people.set()

verwenden

Zum Beispiel

npm install mixpanel-browser

Es gibt einige zusätzliche Methoden wie „append“, „union“, „increment“ usw., um mehr Szenarien zu bewältigen. Sie können diese jedoch überspringen, da sie nicht im Mittelpunkt dieses Artikels stehen. Mehr können Sie hier lesen

Aber was ist mit anonymen Benutzern?

In vielen Anwendungen (insbesondere auf öffentlichen Websites) ist es nicht zwingend erforderlich, sich anzumelden, um die Inhalte anzuzeigen.

Aber wie können wir diese Personen verfolgen, wenn sie sich nicht anmelden?

Um all diese Szenarien zu bewältigen, erstellen wir zwei weitere Hilfsfunktionen.

NEXT_PUBLIC_MIXPANEL_TOKEN="YOUR_TOKEN_HERE"

So können Sie damit Ihre bekannten und unbekannten Benutzer verfolgen.

Eine Beispielverwendung kann wie folgt aussehen: In einer der Stammdateien – (layout.tsx-Datei im App-Router, _app.tsx im Pages-Router)

Fügen Sie Folgendes hinzu

import mixpanel from 'mixpanel-browser';

// Define event names as constants to prevent typos
export const ANALYTICS_EVENTS = {
  PAGE_VIEW: 'Page View',
  BUTTON_CLICK: 'Button Click',
  FORM_SUBMIT: 'Form Submit',
  USER_SIGNED_IN: 'User Signed In',
  USER_SIGNED_UP: 'User Signed Up',
  USER_SIGNED_OUT: 'User Signed Out',
  // ... other events
};

// Initialize mixpanel
const MIXPANEL_TOKEN = process.env.NEXT_PUBLIC_MIXPANEL_TOKEN;

if (MIXPANEL_TOKEN) {
  mixpanel.init(MIXPANEL_TOKEN, {
    debug: process.env.NODE_ENV === 'development',
    track_pageview: true,
    persistence: 'localStorage',
    ignore_dnt: true,
  });
}

Dadurch wird der Benutzer beim Besuch der Website entsprechend initialisiert.

Sie können Daten sammeln und sie künftig diesem bestimmten Benutzer zuweisen.

Beispielverwendung

Jetzt kommt der spaßige Teil. Beachten Sie den folgenden Code und aktualisieren Sie ihn entsprechend Ihren Anforderungen.

export const MixpanelAnalytics = {
  track: <T extends Record<string, any>>(
    eventName: string,
    properties?: T & CommonEventProperties
  ) => {
    try {
      if (MIXPANEL_TOKEN) {
        mixpanel.track(eventName, {
          ...properties,
          timestamp: Date.now(),
          path: typeof window !== 'undefined' ? window.location.pathname : undefined,
        });
      }
    } catch (error) {
      console.error('Error tracking event:', error);
    }
  },

  pageView: (pageName: string, properties?: Record<string, any>) => {
    try {
      if (MIXPANEL_TOKEN) {
        MixpanelAnalytics.track(ANALYTICS_EVENTS.PAGE_VIEW, {
          page: pageName,
          ...properties,
        });
      }
    } catch (error) {
      console.error('Error tracking page view:', error);
    }
  }
};

In der oben genannten Funktion verfolgen wir das Profil des jeweiligen Benutzers mit den Tracking-Daten und stellen außerdem sicher, dass wir auch seine Besuche auf der jeweiligen Website zählen.

Cool, oder?

Best Practices

Bei der Arbeit mit Analysen ist es sehr wichtig, die Daten konsistent zu halten.

Stellen Sie daher sicher, dass Sie die richtigen Typen für Analyseereignisse hinzufügen.

Zum Beispiel

Definieren Sie Konstanten für die Ereignisse.

Verwenden Sie niemals einfache Zeichenfolgen für Ereignisnamen.

MixpanelAnalytics.track("VISIT_WEBSITE", {
  website_name: name,
  website_url: website,
  visit_count: (mixpanel.get_property('total_website_visits') ?? 0) + 1,
});

Typensicherheit

Stellen Sie für die Ereignisnutzlast sicher, dass Sie eine konsistente Struktur verwenden, indem Sie Typen verwenden

mixpanel.init(MIXPANEL_TOKEN, {
  track_pageview: true,  << HERE
  ...others
});

Benutzereigenschaften

Behalten Sie sitzungsübergreifend immer konsistente Benutzereigenschaften bei.

mixpanel.identify("whatever identified you want (usually email or userid)")

Sonst sind die Daten später nutzlos.

Abschluss

Denken Sie daran, die Analyseinitialisierung in Ihren clientseitigen Komponenten ordnungsgemäß durchzuführen.

Stellen Sie außerdem sicher, dass sensible Benutzerdaten gemäß Ihren Datenschutzbestimmungen und Datenschutzbestimmungen angemessen behandelt werden.

Ich hoffe, Sie haben heute etwas Neues gelernt.

Ich wünsche Ihnen einen schönen Tag!

Das obige ist der detaillierte Inhalt vonRichten Sie Mixpanel Analytics in einer NextJS-Anwendung ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!