21st.dev 数据分析终极指南：如何使用Amplitude追踪组件使用情况

21st.dev 数据分析终极指南如何使用Amplitude追踪组件使用情况【免费下载链接】21stnpm for design engineers: largest marketplace of shadcn/ui-based React Tailwind components, blocks and hooks项目地址: https://gitcode.com/gh_mirrors/21/21st21st.dev 是一个面向设计工程师的React组件市场提供基于shadcn/ui的Tailwind组件、模块和钩子。作为开发者了解用户如何与你的组件互动至关重要。本文将详细介绍如何在21st.dev项目中集成和使用Amplitude进行数据分析追踪组件使用情况。为什么需要组件使用情况追踪在组件市场中了解用户行为是优化产品体验的关键。通过数据分析你可以了解哪些组件最受欢迎 发现用户的使用模式优化组件设计和功能提高用户参与度和留存率21st.dev项目使用两种主要的数据追踪方式Amplitude用于客户端事件追踪Supabase用于服务端分析数据存储。Amplitude 集成配置Amplitude是一个强大的产品分析平台21st.dev项目通过以下方式集成首先在项目中查看Amplitude配置文件 apps/web/lib/amplitude.ts。这个文件包含了Amplitude的初始化配置和事件定义// Amplitude 初始化 export const initAmplitude () { if (typeof window ! undefined) { amplitude.init(process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY || , { defaultTracking: { sessions: true, pageViews: true, formInteractions: true, fileDownloads: true, }, }) } }核心追踪事件类型21st.dev定义了丰富的组件交互事件涵盖用户与组件的各种互动组件相关事件component_install_command_copied- 复制安装命令component_code_copied- 复制组件代码component_dependency_copied- 复制依赖项component_all_dependencies_copied- 复制所有依赖component_liked/component_unliked- 点赞/取消点赞component_shared- 分享组件component_published- 发布新组件用户行为事件components_list_sorted- 组件列表排序npm_package_viewed- 查看npm包code_view_toggled- 切换代码视图user_profile_viewed- 查看用户资料sidebar_section_viewed- 查看侧边栏部分components_searched- 搜索组件Supabase 组件分析系统除了Amplitude21st.dev还实现了基于Supabase的组件分析系统位于 apps/web/hooks/use-analytics.ts。这个系统追踪以下活动类型component_view- 组件查看component_code_copy- 代码复制component_prompt_copy- AI提示复制component_cli_download- CLI下载防重复追踪机制系统实现了智能的防重复追踪机制确保24小时内同一用户对同一组件的同一操作只记录一次// 检查24小时内是否有重复事件 const oneDayAgo new Date() oneDayAgo.setDate(oneDayAgo.getDate() - 1) const { data: existingEvents } await supabase .from(component_analytics) .select(id) .eq(component_id, component_id) .eq(activity_type, activity_type) .or( user_id.eq.${user_id ? user_id : }, anon_id.eq.${!user_id anonId ? anonId : }, ) .gte(created_at, oneDayAgo.toISOString()) .limit(1)归因追踪系统21st.dev还实现了归因追踪系统用于追踪用户订阅的来源位于 apps/web/lib/attribution-tracking.ts。归因来源类型magic- Magic MCP功能component_library- 组件库settings- 设置页面header- 页面头部具体来源详情magic_header- Magic头部按钮magic_landing_hero- Magic首页英雄区域magic_console- Magic控制台premium_component_cta- 高级组件CTAsettings_billing- 设置中的账单页面实际应用示例1. 组件页面追踪在组件详情页 apps/web/app/[username]/[component_slug]/page.client.tsx 中系统使用useSupabaseAnalytics钩子来追踪用户交互import { useSupabaseAnalytics } from /hooks/use-analytics import { trackEvent, AMPLITUDE_EVENTS } from /lib/amplitude // 追踪代码复制事件 const handleCopyCode () { trackEvent(AMPLITUDE_EVENTS.COPY_CODE, { component_id: component.id, component_name: component.name, }) analytics.capture(component.id, AnalyticsActivityType.COMPONENT_CODE_COPY, userId) }2. 复制代码按钮追踪查看 apps/web/components/ui/copy-code-card-button.tsx 可以看到实际的追踪实现import { trackEvent, AMPLITUDE_EVENTS } from ../../lib/amplitude import { useSupabaseAnalytics } from /hooks/use-analytics const { capture } useSupabaseAnalytics() const handleCopy () { trackEvent(AMPLITUDE_EVENTS.COPY_INSTALL_COMMAND, { component_id, command_type: install, }) capture(component_id, AnalyticsActivityType.COMPONENT_CLI_DOWNLOAD, userId) }数据分析仪表板21st.dev为创作者提供了数据分析仪表板位于 apps/web/app/studio/[username]/analytics/page.client.tsx。这个仪表板显示组件浏览量统计代码复制次数用户互动趋势组件性能指标最佳实践和技巧1. 开发环境优化系统在开发模式下跳过分析追踪避免污染生产数据// 开发模式下跳过分析 if (process.env.NODE_ENV development) { return }2. 匿名用户追踪对于未登录用户系统生成匿名ID进行追踪const generateAnonId () { return ( Math.random().toString(36).substring(2, 15) Math.random().toString(36).substring(2, 15) ) }3. 事件属性丰富化在追踪事件时尽量包含有意义的属性trackEvent(AMPLITUDE_EVENTS.COPY_CODE, { component_id: component.id, component_name: component.name, component_type: component.type, user_tier: user?.plan || free, timestamp: new Date().toISOString(), })总结21st.dev的数据分析系统提供了一个完整的解决方案结合了Amplitude的实时事件追踪和Supabase的持久化数据存储。通过这个系统你可以实时监控用户与组件的互动分析趋势了解组件受欢迎程度优化体验基于数据改进产品追踪转化了解用户订阅来源无论你是组件创作者还是平台管理员这些数据分析工具都能帮助你更好地理解用户行为做出数据驱动的决策。通过合理利用这些追踪功能你可以显著提升组件的质量和用户体验。记住好的数据分析始于清晰的追踪策略。在21st.dev项目中你已经有了强大的工具基础现在只需要专注于收集正确的数据并从中提取有价值的见解。【免费下载链接】21stnpm for design engineers: largest marketplace of shadcn/ui-based React Tailwind components, blocks and hooks项目地址: https://gitcode.com/gh_mirrors/21/21st创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考