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/src/lib/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:

Include analytics script

To include the analytics script, add the following code to your apps/web/src/routes/+layout.svelte file:

<script lang="ts">
  import { AnalyticsScript } from "@analytics";
</script>
 
<slot />
<AnalyticsScript />

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

Track custom events

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

<script lang="ts">
  import { trackEvent } from "@analytics";
</script>
 
<button on:click={() => 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