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, define the provider path of the provider you want to use:

// ...
 
const providerPath = "./provider/google";
// or const providerPath = './provider/mixpanel'
// or const providerPath = './provider/pirsch'
// or const providerPath = './provider/plausible'
// or const providerPath = './provider/umami'
// or const providerPath = './provider/vercel'
// or const providerPath = './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/app.vue file (if it's not already added):

<template>
  <!-- ... -->
</template>
 
<script setup lang="ts">
  const { init } = useAnalytics();
  init();
 
  // ...
</script>

This must only been done once in your application either in apps/web/app.vue or inside a layout for example if you want to only track parts of your application.

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

Track custom events

To track custom events, use the auto-imported useAnalytics() composable and use the trackEvent function:

<template>
  <button @click="trackEvent('button-clicked', { value: 'asdf' })">
    Click me
  </button>
</template>
 
<script lang="ts" setup>
  const { trackEvent } = useAnalytics();
</script>

The trackEvent function takes two arguments:

• event: The name of the event
• data: An object containing additional data about the event