Configurer Mixpanel Analytics dans une application NextJS

L'analyse est cruciale pour toute application rentable, qu'il s'agisse d'une petite application avec 100 utilisateurs ou d'une grande application avec 10 000 utilisateurs.

Comprendre vos utilisateurs est l'une des choses les plus critiques. Et mixpanel est l'un des meilleurs outils pour ce faire.

Aujourd'hui, nous allons apprendre comment intégrer et démarrer le suivi des mixpanels.

Configurer le projet

Je suppose que vous avez déjà une configuration de projet NextJS. Créez également un nouveau compte Mixpanel à partir d’ici (si vous ne l’avez pas déjà fait).

Gardez à l'esprit que j'affiche pour NextJS mais cela s'applique également à n'importe quelle application ReactJS.

Ensuite, installez la dépendance

npm install mixpanel-browser

Obtenez un jeton

Tout d'abord, ajoutez la variable d'environnement suivante

NEXT_PUBLIC_MIXPANEL_TOKEN="YOUR_TOKEN_HERE"

Maintenant, vous pouvez obtenir le jeton mixpanel depuis le tableau de bord de votre projet.

Ensuite, allez dans Paramètres -> Paramètres du projet

Puis récupérez le Jeton de projet et ajoutez-le dans le fichier d'environnement.

Créer un fichier de configuration

Créez un fichier nommé mixpanel.ts et ajoutez le code suivant

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

Alors, initialisez le mixpanel le plus haut possible dans votre arborescence de composants.

Ajouter des fonctions d'analyse

Maintenant, après avoir ajouté la configuration, il est temps d'ajouter des fonctions réutilisables pour suivre les événements du mixpanel.

Ajoutez donc le code suivant dans le même fichier :

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

Si vous analysez ces 2 fonctions ci-dessus

piste

Cette fonction est utilisée pour suivre tout type d'événement.

Par exemple, si vous souhaitez suivre un utilisateur, cliquez sur un bouton pour visiter un site Web externe. Peut-être pour le calcul de l'affiliation

Vous pouvez effectuer les opérations suivantes :

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

pageView

Il s'agit d'une méthode assez simple pour suivre chaque page vue dans votre application.

Maintenant, rappelez-vous : lorsque nous avons initialisé mixpanel, nous lui avons déjà demandé de suivre les pages vues :

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

Ce suivi personnalisé est donc uniquement destiné à une analyse plus détaillée.

Connaissez vos utilisateurs

Maintenant, le suivi des clics est cool et tout, mais souvent, ce n'est pas suffisant.

Peut-être souhaitez-vous suivre des utilisateurs spécifiques. Peut-être voulez-vous savoir qui fait quoi. Peut-être créez-vous un entonnoir pour analyser le comportement des utilisateurs.

Pour ces scénarios, mixpanel propose 2 fonctions.

1. identifier

2. réinitialiser

Donc, à un niveau élevé, une fois qu'un utilisateur s'est connecté, vous pouvez appeler

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

Et à la déconnexion, vous pouvez le réinitialiser

mixpanel.reset()

Vous pouvez désormais également ajouter du contexte ou des détails supplémentaires sur vos utilisateurs à l'aide de la méthode people.set()

Par exemple,

npm install mixpanel-browser

Il existe des méthodes supplémentaires telles que l'ajout, l'union, l'incrémentation, etc., pour gérer davantage de scénarios, mais ignorez-les car elles ne sont pas le sujet de cet article. Vous pouvez en savoir plus ici

Mais qu’en est-il des utilisateurs anonymes ?

Désormais, dans de nombreuses applications (notamment les sites publics) — il n'est pas obligatoire de se connecter pour voir le contenu.

Mais comment pouvons-nous suivre ces personnes si elles ne se connectent pas ?

Pour gérer tous ces scénarios, créons deux autres fonctions utilitaires.

NEXT_PUBLIC_MIXPANEL_TOKEN="YOUR_TOKEN_HERE"

Vous pouvez ainsi suivre vos utilisateurs connus et inconnus.

Un exemple d'utilisation peut ressembler à ce qui suit : Dans l'un des fichiers racine — (fichier layout.tsx dans le routeur d'application, _app.tsx dans le routeur de pages)

Ajoutez ce qui suit

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

Cela initialisera donc l'utilisateur de manière appropriée lorsqu'il visitera le site.

Vous pouvez collecter des données et les attribuer à cet utilisateur particulier à l'avenir.

Exemple d'utilisation

Vient maintenant la partie amusante. Notez le code suivant et mettez-le à jour en fonction de vos besoins.

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

Dans la fonction ci-dessus, nous suivons le profil de l'utilisateur particulier avec les données de suivi et nous assurons également que nous comptons également ses visites sur le site Web particulier.

Cool, non ?

Meilleures pratiques

Lorsque vous travaillez avec des analyses, il est très important de maintenir la cohérence des données.

Assurez-vous donc d'ajouter les types appropriés pour les événements d'analyse.

Par exemple

Définissez des constantes pour les événements.

N'utilisez jamais de chaînes simples pour les noms d'événements.

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

Type de sécurité

Pour la charge utile des événements, assurez-vous d'utiliser une structure cohérente en utilisant des types

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

Propriétés utilisateur

Toujours conserver des propriétés utilisateur cohérentes d'une session à l'autre.

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

Sinon, à terme, les données seront inutiles.

Conclusion

N'oubliez pas de gérer correctement l'initialisation des analyses dans vos composants côté client.

Assurez-vous également que les données sensibles des utilisateurs sont traitées de manière appropriée, conformément à votre politique de confidentialité et à vos réglementations en matière de protection des données.

J'espère que vous avez appris quelque chose de nouveau aujourd'hui.

Passez une bonne journée !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!