Integrate analytics for your SaaS

Jonathan Wilke

Jonathan Wilke


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 (
        {/* ... */}
        <AnalyticsScript />

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

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

Ship your SaaS in months days

Save time and focus on your business with supastarter, the scalable and production-ready starter kit for your SaaS.

Get started

Stay up to date

Sign up for our newsletter and we will keep you updated on everything going on with supastarter.