Overview

supastarter comes with a generic analytics module that enables you to integrate analytics providers and track custom events.

Setup analytics

In the apps/web/modules/analytics/index.ts file, export the provider file of the provider you want to use:

export * from './provider/google';
// or export * from './provider/mixpanel';
// or export * from './provider/pirsch';
// or export * from './provider/plausible';
// or export * from './provider/umami';
// or export * from './provider/vercel';
// or export * from './provider/custom';

To learn how to set up your analytics provider, check out the respective documentation:

Google Analytics Mixpanel Pirsch Plausible Umami Vercel Custom

Include analytics script

To include the analytics script, add the following code to your apps/web/app/[locale]/layout.tsx file:

apps/web/app/[locale]/layout.tsx

import { AnalyticsScript } from '@analytics';
 
export default async function RootLayout() {
  // ...
  return (
    <html lang={locale}>
      <body className={`${GeistSans.variable} bg-background font-sans`}>
        {/* ... */}
        <AnalyticsScript />
      </body>
    </html>
  );
}

Now your app will include the analytics script and track page views.

Track custom events

To track custom events, import the useAnalytics hook and use the trackEvent function:

import { useAnalytics } from '@analytics';
 
export function YourComponent() {
  const { trackEvent } = useAnalytics();
 
  return <button onClick={() => trackEvent('button-clicked', { value: 'asdf' })}>Click me</button>;
}

The trackEvent function takes two arguments:

event: The name of the event
data: An object containing additional data about the event

E2E testing Google Analytics