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:

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