关于
Segment 客户数据平台的专家模式，涵盖事件追踪、身份解析和数据治理。
name: segment-cdp description: Segment 客户数据平台的专家模式，包括 Analytics.js、服务端追踪、Protocols 追踪计划、身份解析、目标配置和数据治理最佳实践。 risk: safe source: vibeship-spawner-skills (Apache 2.0) date_added: 2026-02-27
Segment CDP
Segment 客户数据平台的专家模式，包括 Analytics.js、服务端追踪、Protocols 追踪计划、身份解析、目标配置和数据治理最佳实践。
模式
Analytics.js 浏览器集成
使用 Analytics.js 进行客户端追踪。包含 track、identify、page 和 group 调用。匿名 ID 持续存在直到 identify 与用户合并。
// Next.js - Analytics 提供者组件
// lib/segment.ts
import { AnalyticsBrowser } from '@segment/analytics-next';
export const analytics = AnalyticsBrowser.load({
writeKey: process.env.NEXT_PUBLIC_SEGMENT_WRITE_KEY!,
});
// 类型化事件辅助函数
export interface UserTraits {
email?: string;
name?: string;
plan?: 'free' | 'pro' | 'enterprise';
createdAt?: string;
company?: {
id: string;
name: string;
};
}
export function identify(userId: string, traits?: UserTraits) {
analytics.identify(userId, traits);
}
export function track<T extends Record<string, any>>(
event: string,
properties?: T
) {
analytics.track(event, properties);
}
export function page(name?: string, properties?: Record<string, any>) {
analytics.page(name, properties);
}
export function group(groupId: string, traits?: Record<string, any>) {
analytics.group(groupId, traits);
}
// React 分析 hook
// hooks/useAnalytics.ts
import { useEffect } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';
import { analytics, page } from '@/lib/segment';
export function usePageTracking() {
const pathname = usePathname();
const searchParams = useSearchParams();
useEffect(() => {
// 路由变化时追踪页面浏览
page(pathname, {
path: pathname,
search: searchParams.toString(),
url: window.location.href,
title: document.title,
});
}, [pathname, searchParams]);
}
// 在 _app.tsx 或 layout.tsx 中使用
function RootLayout({ children }) {
usePageTracking();
return <html>{children}</html>;
}
// 组件中的事件追踪
function PricingButton({ plan }: { plan: string }) {
const handleClick = () => {
track('Plan Selected', {
plan_name: plan,
page: 'pricing',
source: 'pricing_page',
});
};
return <button onClick={handleClick}>Select {plan}</button>;
}
// 认证时识别用户
function onUserLogin(user: User) {
identify(user.id, {
email: user.email,
name: user.name,
plan: user.plan,
createdAt: user.createdAt,
});
track('User Signed In', {
method: 'email',
});
}
上下文
- 浏览器追踪
- 网站分析
- 客户端事件
Node.js 服务端追踪
使用 @segment/analytics-node 进行高性能服务端追踪。非阻塞，内置批处理。对后端事件、Webhook 和敏感数据至关重要。
// lib/segment-server.ts
import { Analytics } from '@segment/analytics-node';
// 初始化一次
const analytics = new Analytics({
writeKey: process.env.SEGMENT_WRITE_KEY!,
flushAt: 20, // 刷新前的批量大小
flushInterval: 10000, // 每10秒刷新一次
});
// 类型化服务端追踪
export interface ServerContext {
ip?: string;
userAgent?: string;
locale?: string;
}
export function serverIdentify(
userId: string,
traits: Record<string, any>,
context?: ServerContext
) {
analytics.identify({
userId,
traits,
context: {
ip: context?.ip,
userAgent: context?.userAgent,
locale: context?.locale,
},
});
}
export function serverTrack(
userId: string,
event: string,
properties?: Record<string, any>,
context?: ServerContext
) {
analytics.track({
userId,
event,
properties,
timestamp: new Date(),
context: {
ip: context?.ip,
userAgent: context?.userAgent,
},
});
}
// 关闭时刷新
export async function closeAnalytics() {
await analytics.closeAndFlush();
}
// 在 API 路由中使用
// app/api/webhooks/stripe/route.ts
export async function POST(req: Request) {
const event = await req.json();
switch (event.type) {
case 'checkout.session.completed':
const session = event.data.object;
serverTrack(
session.client_reference_id,
'Order Completed',
{
order_id: session.id,
total: session.amount_total / 100,
currency: session.currency,
payment_method: session.payment_method_types[0],
},
{ ip: req.headers.get('x-forwarded-for') || undefined }
);
// 同时更新用户特征
serverIdentify(session.client_reference_id, {
total_spent: session.amount_total / 100,
last_purchase: new Date().toISOString(),
});
break;
}
}
兼容工具
Claude CodeCursor
标签
数据分析
