Saturday, March 22nd 2025
Analytics
We’re excited to introduce our new analytics package, designed to help you track user interactions and gain valuable insights into user behavior. Useful for both marketing and dashboard apps.
The starter kits now include an analytics package to help you track user interactions effortlessly. With built-in support for multiple providers, you can choose the one that fits your needs best.
Features
- User Identification: Associate actions with specific users for better tracking.
- Event Tracking: Capture important user interactions and behaviors.
- Automatic Page Views: Seamless tracking of Next.js route changes without extra code.
Provider
You can select your preferred analytics provider by uncommenting it in packages/analytics/provider/index.ts
:
export { default as AnalyticsProvider } from './console';// export { default as AnalyticsProvider } from './google-analytics';// export { default as AnalyticsProvider } from './posthog';// export { default as AnalyticsProvider } from './umami';
Console (Default)
Logs events and page views to the console. Ideal for debugging during development.
Google Analytics
Industry-standard analytics tool for tracking page views and events.
NEXT_PUBLIC_ANALYTICS_GA_MEASUREMENT_ID=NEXT_PUBLIC_ANALYTICS_GA_DISABLE_LOCALHOST_TRACKING=falseNEXT_PUBLIC_ANALYTICS_GA_DISABLE_PAGE_VIEWS_TRACKING=false
PostHog
A cost-effective, developer-friendly analytics platform with powerful event tracking capabilities.
NEXT_PUBLIC_ANALYTICS_POSTHOG_KEY=NEXT_PUBLIC_ANALYTICS_POSTHOG_HOST=https://us.i.posthog.com
Umami
A lightweight, privacy-focused alternative to Google Analytics.
NEXT_PUBLIC_ANALYTICS_UMAMI_HOST=https://cloud.umami.is/script.jsNEXT_PUBLIC_ANALYTICS_UMAMI_WEBSITE_ID=NEXT_PUBLIC_ANALYTICS_UMAMI_DISABLE_LOCALHOST_TRACKING=false
Usage
User Identification:
import { useAnalytics } from '@workspace/analytics/hooks/use-analytics';const analytics = useAnalytics();const onClick = () => { analytics.identify('anonymous'); // or user.id};
Event Tracking:
import { useAnalytics } from '@workspace/analytics/hooks/use-analytics';const analytics = useAnalytics();const onClick = () => { analytics.trackEvent('buttonClicked', { button: 'addContact' });};
Or combined:
import { useAnalytics } from '@workspace/analytics/hooks/use-analytics';const analytics = useAnalytics();const onClick = () => { analytics.identify('anonymous'); // or user.id analytics.trackEvent('buttonClicked', { button: 'addContact' });};
Page Views
Route changes are automatically tracked in the AnalyticsProvider
(no additional code required).