NextJS アプリケーションで Mixpanel Analytics をセットアップする

ユーザーが 100 人の小規模アプリケーションであっても、ユーザーが 10,000 人の大規模アプリケーションであっても、収益性の高いアプリケーションにとって分析は不可欠です。

ユーザーを理解することは最も重要なことの 1 つです。そして、mixpanel はそれを行うための最良のツールの 1 つです。

今日は、ミックスパネルの追跡を統合して開始する方法を学びます。

プロジェクトをセットアップする

すでに NextJS プロジェクトがセットアップされていると思います。また、ここから新しい Mixpanel アカウントを作成します (まだ作成していない場合)。

ここでは NextJS について説明していますが、他の ReactJS アプリにも適用できることに注意してください。

次に、依存関係をインストールします

npm install mixpanel-browser

トークンを取得する

まず、次の環境変数を追加します

NEXT_PUBLIC_MIXPANEL_TOKEN="YOUR_TOKEN_HERE"

これで、プロジェクトのダッシュボードから mixpanel トークンを取得できるようになりました。

次に、設定 -> に移動します。 プロジェクト設定

次に、プロジェクト トークンを取得し、環境ファイルに追加します。

設定ファイルの作成

mixpanel.ts という名前のファイルを作成し、次のコードを追加します

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

したがって、コンポーネント ツリーのできるだけ高い位置でミックスパネルを初期化します。

分析機能の追加

設定を追加したら、ミックスパネル イベントを追跡するために再利用可能な関数をいくつか追加します。

同じファイルに次のコードを追加します。

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

上記の 2 つの関数を分析すると

トラック

この関数は、あらゆる種類のイベントを追跡するために使用されます。

たとえば、ユーザーを追跡したい場合は、ボタンをクリックして外部 Web サイトにアクセスします。おそらくアフィリエイトの計算用

次のことができます:

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

ページビュー

これは、アプリケーション内のすべてのページビューを追跡する非常に簡単な方法です。

ここで思い出してください。mixpanel を初期化したときに、ページビューを追跡するようにすでに指示しました。

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

したがって、このカスタム追跡はより詳細な分析のみを目的としています。

ユーザーを知る

クリック数を追跡するのは非常に便利ですが、多くの場合、それだけでは十分ではありません。

特定のユーザーを追跡したい場合があります。もしかしたら、誰が何をしているのか知りたいかもしれません。ユーザーの行動を分析するためのファネルを作成しているかもしれません。

これらのシナリオのために、mixpanel は 2 つの機能を提供します。

を特定する

2. リセット

つまり、大まかに言うと、ユーザーがログインした後、
を呼び出すことができます。

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

ログアウト時にリセットできます

mixpanel.reset()

people.set() メソッドを使用して、ユーザーに関する追加のコンテキストや詳細を追加することもできます

たとえば、

npm install mixpanel-browser

より多くのシナリオを処理するために、追加、結合、増分などの追加のメソッドがいくつかありますが、この記事の焦点では​​ないのでスキップしてください。詳細はここで読むことができます

しかし、匿名ユーザーの場合はどうでしょうか?

現在、多くのアプリケーション (特に公共サイト) では、コンテンツを表示するためにログインする必要はありません。

しかし、ログインしていない人をどうやって追跡すればよいでしょうか?

これらすべてのシナリオに対処するために、さらに 2 つのユーティリティ関数を作成しましょう。

NEXT_PUBLIC_MIXPANEL_TOKEN="YOUR_TOKEN_HERE"

これを使用すると、既知のユーザーと未知のユーザーを追跡できます。

使用例は次のようになります。 ルート ファイルの 1 つ — (アプリ ルーターのlayout.tsx ファイル、ページ ルーターの _app.tsx)

以下を追加します

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

これにより、ユーザーがサイトにアクセスしたときに適切に初期化されます。

今後はデータを収集して、この特定のユーザーに割り当てることができます。

使用例

ここからが楽しい部分です。次のコードに注目して、必要に応じて更新してください。

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

上記の関数では、追跡データを使用して特定のユーザーのプロフィールを追跡し、特定の Web サイトへのユーザーの訪問もカウントしていることを確認します。

いいですね?

ベストプラクティス

分析を使用する場合、データの一貫性を保つことが非常に重要です。

したがって、分析イベントには必ず適切なタイプを追加してください。

たとえば

イベントの定数を定義します。

イベント名にはプレーンな文字列を使用しないでください。

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

タイプセーフティ

イベント ペイロードの場合は、型を使用して一貫した構造を使用してください

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

ユーザープロパティ

セッション間で一貫したユーザー プロパティを常に維持します。

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

そうしないと、将来的にデータが役に立たなくなります。

結論

クライアント側コンポーネントで分析の初期化を適切に処理することを忘れないでください。

また、ユーザーの機密データがプライバシー ポリシーとデータ保護規制に従って適切に扱われるようにしてください。

今日は何か新しいことを学べたでしょうか。

良い一日をお過ごしください!

以上がNextJS アプリケーションで Mixpanel Analytics をセットアップするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。