Overview

saasbrella 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/plausible';
// or export * from './provider/posthog';
// or export * from './provider/custom';

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

Google Analytics

Learn more

Plausible

Learn more

PostHog

Learn more

Custom

Learn more

Analytics script component

The analytics script component that is part of the provider file you exported in the first step is automatically included in the application:

apps/web/modules/shared/components/Document.tsx
export function Document({ children }: PropsWithChildren) {
  return (
    <html>
      <body>
        {children}
        <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