See Demo

Saturday, March 22nd 2025 · 1 min read

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=false
NEXT_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.js
NEXT_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).

For full implementation details, check out the analytics documentation in our starter kits:

Ready to add analytics to your SaaS? Get started with Achromatic.

Related Articles

CVE-2026-23864 - React Server Components DoS Vulnerabilities

Multiple denial of service vulnerabilities discovered in React Server Components. All Achromatic starter kits updated to patched versions.

Introducing shadcn-modal-manager

We open sourced shadcn-modal-manager - a lightweight, type-safe modal manager for shadcn/ui built with pure React and zero dependencies.

Agent Skills Support: npm for AI Coding Agents

Achromatic now supports Vercel Agent Skills, bringing 10+ years of React and Next.js optimization patterns to AI coding assistants like Claude Code, Cursor, and Codex.