分析对于任何盈利的应用程序都至关重要，无论是拥有 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个功能。
识别
重置
因此，从较高的层面来看，用户登录后，您可以调用
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中文网其他相关文章！
