在 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 事件了。

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

export const MixpanelAnalytics = {
  track: >(
    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) => {
    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 时，我们已经告诉它跟踪页面浏览量：

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

所以这个自定义跟踪只是为了进行更详细的分析。

了解你的用户

现在，跟踪点击很酷，但很多时候，这还不够。

也许你想跟踪特定的用户。也许你想知道谁在做什么。也许你正在创建一个漏斗来分析用户行为。

针对这些场景，mixpanel 提供了 2 个功能。

确认

重置

因此，从高层次上讲，在用户登录后，您可以调用

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

退出后，你可以重置它

mixpanel.reset()

现在，您还可以使用 **people.set()** 方法添加有关用户的其他背景信息或详细信息

例如，

mixpanel.people.set({
    plan: 'Enterprise',   // Update "plan" from "Premium" to "Enterprise"
    company: 'mixpanel'  // Create new "company" profile prop
});

还有一些其他方法，如 append、union、increment 等，用于处理更多场景，但请跳过它们，因为它们不是本文的重点。您可以在此处阅读更多内容

但是匿名用户怎么办？

现在，在许多应用程序中（尤其是公共网站），无需登录即可查看内容。

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

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

export const MixpanelAnalytics = {
  // ... other methods ...

  identifyKnownUsers: (userId: string, userProperties?: Record) => {
    try {
      mixpanel.identify(userId);
      if (userProperties) {
        mixpanel.people.set(userProperties);
      }
    } catch (error) {
      console.error('Error identifying user:', error);
    }
  },

  identifyUnknownUsers: () => {
    try {
      const anonymousId = 
        mixpanel.get_distinct_id() ||
        `anon-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;

      MixpanelAnalytics.identify(anonymousId);
      MixpanelAnalytics.setPeople({
        $first_seen: new Date().toISOString(),
        user_type: 'anonymous',
        platform: typeof window !== 'undefined' ? window.navigator.platform : 'unknown',
      });
    } catch (error) {
      console.error('Error initializing user:', error);
    }
  }
};

因此您可以使用它来追踪已知和未知的用户。

示例用法如下所示：在其中一个根文件中 — （应用程序路由器中的 layout.tsx 文件，页面路由器中的 _app.tsx）

添加以下内容

useEffect(() => {
  const getUser = async () => {
    const user = functionToGetUser();
    if (user) {
      await MixpanelAnalytics.identifyKnownUser(user);
    } else {
      await MixpanelAnalytics.initializeUnknownUser();
    }
  };
  getUser();
}, []);

因此，当用户访问网站时，这将适当地初始化用户。

您可以收集数据并将其分配给该特定用户。

示例用法

现在到了有趣的部分。请注意以下代码并根据您的需要进行更新。

const handleClick = () => {
  MixpanelAnalytics.setPeople({
    $last_visited: websiteName,
    last_visit_date: new Date().toISOString(),
    total_visits: (mixpanel.get_property('total_visits') ?? 0) + 1,
  });

  MixpanelAnalytics.track(ANALYTICS_EVENTS.VISIT_WEBSITE, {
    website_name: websiteName,
    website_url: website,
    visit_count: (mixpanel.get_property('total_visits') ?? 0) + 1,
  });
};

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

很酷吧？

最佳实践

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

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

例如

为事件定义常量。

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

export const ANALYTICS_EVENTS = {
  PAGE_VIEW: 'Page View',
  BUTTON_CLICK: 'Button Click',
  // ... other events
} as const;

类型安全

对于事件负载，请确保使用类型使用一致的结构

interface CommonEventProperties {
  timestamp?: number;
  path?: string;
  referrer?: string;
}

用户属性

始终在会话间保持一致的用户属性。

MixpanelAnalytics.setPeople({
  $email: user.email,
  $name: user.user_metadata?.full_name,
  $created: user.created_at,
  last_sign_in: new Date().toISOString(),
  user_type: 'registered',
  auth_provider: user.app_metadata?.provider || 'email',
});

否则，从长远来看，这些数据将毫无用处。

结论

请记住在客户端组件中正确处理分析初始化。

此外，请确保根据您的隐私政策和数据保护法规适当处理敏感用户数据。

希望你今天学到了新东西。

祝你有美好的一天！

CLIS.CC