On this page4 sections
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=false
NEXT_PUBLIC_ANALYTICS_GA_DISABLE_PAGE_VIEWS_TRACKING=falsePostHog
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.comUmami
A lightweight, privacy-focused alternative to Google Analytics.
NEXT_PUBLIC_ANALYTICS_UMAMI_HOST=https://cloud.umami.is/script.js
NEXT_PUBLIC_ANALYTICS_UMAMI_WEBSITE_ID=
NEXT_PUBLIC_ANALYTICS_UMAMI_DISABLE_LOCALHOST_TRACKING=falseUsage
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).
For full implementation details, check out the analytics documentation in our starter kits:
Ready to add analytics to your SaaS? Get started with Achromatic.
