Integrate analytics for your SaaS

Today we are excited to announce a new feature for supastarter: Analytics.

supastarter now comes with a built-in analytics integration for your SaaS and it includes the following providers out of the box:

Integrate analytics into your supastarter app

supastarter comes with a generic analytics module that enables you to integrate analytics provdiders 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 "./providers/pirsch";
// or export * from './providers/google';
// or export * from './providers/vercel';

We have setup guides for each provider in the supastarter documentation.

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>
      <body>
        {/* ... */}
        <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>
  );
}

Read the complete extensive guide on how to integrate analytics into your app in the supastarter documentation.

Integrate analytics for your SaaS

Integrate analytics into your supastarter app

Setup analytics

Include analytics script

Track custom events

The ultimate starter kit to build a scalable and production-ready SaaS

Stay up to date