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:

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.

.env
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.

.env
NEXT_PUBLIC_ANALYTICS_POSTHOG_KEY=NEXT_PUBLIC_ANALYTICS_POSTHOG_HOST=https://us.i.posthog.com

Umami

A lightweight, privacy-focused alternative to Google Analytics.

.env
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:

client-component.tsx
import { useAnalytics } from '@workspace/analytics/hooks/use-analytics';const analytics = useAnalytics();const onClick = () => {  analytics.identify('anonymous'); // or user.id};

Event Tracking:

client-component.tsx
import { useAnalytics } from '@workspace/analytics/hooks/use-analytics';const analytics = useAnalytics();const onClick = () => {  analytics.trackEvent('buttonClicked', { button: 'addContact' });};

Or combined:

client-component.tsx
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).