@codefe/analytics-sdk
v0.1.1
Published
Umami analytics helpers for Next.js apps
Downloads
23
Maintainers
josonkingReadme
@codefe/analytics-sdk
一个面向 Next.js 项目的 Umami analytics SDK。
提供的能力
- 通过 Next.js
Script组件嵌入 Umami 脚本 - 保留当前搜索会话语义
- 自动补充
unique_user_id、activity_id、query_id、product_id、event_time - 提供搜索提交、结果曝光、结果点击、引用、翻页等 helper
安装
pnpm add @codefe/analytics-sdk接入
在 Next.js app 目录下放一个 client provider:
'use client';
import { DataPlazaAnalyticsProvider } from '@codefe/analytics-sdk/next';
export function AnalyticsProvider({
children,
}: {
children: React.ReactNode;
}) {
return (
<DataPlazaAnalyticsProvider
scriptSrc={process.env.NEXT_PUBLIC_UMAMI_SCRIPT_SRC ?? ''}
websiteId={process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID ?? ''}
basePayload={{ app_name: 'my-next-app' }}
>
{children}
</DataPlazaAnalyticsProvider>
);
}然后在根布局中挂载:
import { AnalyticsProvider } from './analytics-provider';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="zh-CN">
<body>
<AnalyticsProvider>{children}</AnalyticsProvider>
</body>
</html>
);
}在 client component 里直接调用埋点 helper:
'use client';
import {
trackResultClick,
trackResultsView,
trackSearchSubmit,
} from '@codefe/analytics-sdk';
trackSearchSubmit({
text: '肺部 CT',
product_id: 'dataset',
search_position: 'home_search',
});
trackResultsView({
result_count: 24,
page: 1,
result: [{ id: 'dataset-1' }],
});
trackResultClick({
dataset_id: 'dataset-1',
dataset_name: 'Lung CT Dataset',
position: 0,
page: 1,
page_size: 24,
});事件模型
当前保留以下行为：
search_submit/search_submit_refineresults_viewresult_clickresearch_citesearch_pagination
如需更通用的多产品埋点，可以在此基础上继续拆分业务事件层。