在 NextJS 应用程序中设置 Mixpanel Analytics

分析对于任何盈利的应用程序都至关重要，无论是拥有 100 个用户的小型应用程序还是拥有 10,000 个用户的大型应用程序。

了解用户是最重要的事情之一。 mixpanel 是实现这一目标的最佳工具之一。

今天，我们将学习如何集成并启动 mixpanel 跟踪。

设置项目

我假设您已经有一个 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,
  });
}

因此，在组件树中尽可能高地初始化 mixpanel。

添加分析功能

现在，添加配置后，是时候添加一些可重用的函数来跟踪 mixpanel 事件了。

因此在同一文件中添加以下代码：

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个函数

曲目

此函数用于跟踪任何类型的事件。

例如，如果您想跟踪用户，请单击按钮访问外部网站。也许用于联盟计算

您可以执行以下操作：

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个功能。

1. 识别

2. 重置

因此，从较高的层面来看，用户登录后，您可以调用

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

注销时，您可以重置它

mixpanel.reset()

现在您还可以使用 people.set() 方法

添加有关用户的其他上下文或详细信息

例如，

npm install mixpanel-browser

还有一些附加方法，如追加、联合、增量等，可以处理更多场景，但请跳过它们，因为它们不是本文的重点。您可以在这里阅读更多内容

但是匿名用户呢？

现在，在许多应用程序（尤其是公共网站）中，并不强制要求登录才能查看内容。

但是如果这些人没有登录，我们如何追踪他们呢？

为了处理所有这些场景，让我们再创建两个实用函数。

NEXT_PUBLIC_MIXPANEL_TOKEN="YOUR_TOKEN_HERE"

所以你可以用它来跟踪你的已知和未知用户。

示例用法如下所示：在根文件之一中 - （应用程序路由器中的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);
    }
  }
};

在上述函数中，我们使用跟踪数据跟踪特定用户的个人资料，并确保我们也计算他们对特定网站的访问量。

很酷吧？

最佳实践

在进行分析时，保持数据一致非常重要。

因此，请确保为分析事件添加正确的类型。

例如

定义事件常量。

切勿使用纯字符串作为事件名称。

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中文网其他相关文章！