Features

Analytics

Track page views and events with pluggable analytics providers.

What It Does

Analytics is composed through @kit/analytics and provider packages (@kit/google-analytics, @kit/umami).

When To Use

You need product usage tracking.
You want to swap providers without changing app business logic.

Prerequisites

apps/<app>/config/analytics.config.ts exists.
Client filters initialize analytics provider wiring.

Important

This page describes the standard kit integration path; adapt app-specific paths and config names when your project differs.

How To Use

Configure providers

apps/dashboard/config/analytics.config.ts

import { createAnalyticsManager } from '@kit/analytics/config';
 
export const analytics = createAnalyticsManager(['google']);

Ensure filters are initialized

apps/dashboard/hooks/use-filters.ts calls useAnalyticsFilters().
AppProvider applies display_app_provider filter with { analytics }.

Provider env vars

Filter API

Analytics providers are attached through filter composition so app provider trees stay stable when analytics modules change.

Filter	Parameters	Return	Registered By (package file)	Initialized In (app entrypoint)	Environment
`display_app_provider`	`{ analytics?: AnalyticsManager }`	`React.ReactNode`	`kit/analytics/core/src/www/filters/use-filters.tsx`	`apps/dashboard/hooks/use-filters.ts` (`useAnalyticsFilters`)	`client`
`content_type_get_analytics_fetcher_query_key`	`{}`	`unknown[]`	`kit/organization/src/shared/filters/use-filters-with-organization.ts`	`apps/dashboard/hooks/use-filters.ts` (`useOrgFilters`)	`client`

Init Checklist

Keep useAnalyticsFilters() in apps/dashboard/hooks/use-filters.ts.
Keep useOrgFilters({ orgConfig }) so org-scoped analytics query keys are composed.

MCP Context


capability: analytics_integration
entrypoints:
  - apps/dashboard/config/analytics.config.ts
  - kit/analytics/core/src/config.ts
  - kit/analytics/core/src/www/filters/use-filters.tsx
  - kit/organization/src/shared/filters/use-filters-with-organization.ts
  - apps/dashboard/hooks/use-filters.ts
  - apps/dashboard/components/providers/app-provider.tsx
inputs:
  - provider_list
outputs:
  - analytics_provider_runtime
constraints:
  - provider key must exist in analytics provider registry
side_effects:
  - emits tracking events to external analytics providers

Agent Recipe

Set provider list in analytics.config.ts.
Confirm analytics filters are mounted in app client hooks.
Add provider-specific env vars and validate events in provider dashboard.

Troubleshooting

If no events arrive, confirm provider key spelling and environment variable values.
If events only fail in production, verify production env injection.

Pricing

Pricing UI components and server helpers from @kit/billing.

Google Analytics

Configure Google Analytics provider environment variables.

How is this guide?

Last updated on 3/27/2026