Using the Umami Analytics Provider in React Router Supabase Turbo

The Umami analytics provider in React Router Supabase Turbo is a simple way to integrate Umami Analytics into your React Router application using the Makerkit's Analytics package.

Installation

First, you need to pull the @kit/analytics package into your project using the CLI

npx @makerkit/cli@latest plugins install

When prompted, select the Umami package from the list of available packages. Once the command completes, you should see the packages/plugins/umami directory in your project.

You can now import this package into your project:

pnpm add "@kit/umami@workspace:*" --filter "@kit/analytics" -D

You can now use the Google Analytics plugin in the Analytics package. Update the packages/analytics/src/index.ts file as follows:

import { createUmamiAnalyticsService } from '@kit/umami';
import { createAnalyticsManager } from './analytics-manager';
import type { AnalyticsManager } from './types';
export const analytics: AnalyticsManager = createAnalyticsManager({
   providers: {
       umami: createUmamiAnalyticsService,
   },
});

Configuration

Please add the following environment variables to your .env file:

VITE_UMAMI_HOST=your-umami-host
VITE_UMAMI_WEBSITE_ID=your-umami-website-id

The VITE_UMAMI_HOST is the URL of your Umami instance. Since Umami can be self-hosted, this can be any valid URL - or can be Umami's cloud service.

The VITE_UMAMI_WEBSITE_ID is the ID of your website in your Umami instance. This is a required field to track events in your website.