Analytics
Set up Analytics for your SaaS, to understand User Behaviour and User Experience.
You have to know what your users are up to. To be able to know what to improve, you want to keep track of where they are, where they spend the most time and what brings them the most value out of your application.
To be able to do so, you need to analyze their behaviour. As such, the Supaboost SaaS boilerplate comes readily installed with Analytics. You can pick any Analytics tool you want, this guide is specifically for Vercel Analytics.
As we are using Vercel, the Analytics wrapper is already readily installed. All you have to do is enable your Vercel Analytics for your project.
Setting up Analytics
In our application, we have installed the Vercel analytics package, which can be used for our Next.js application.
The codeblock below shows that the Analytics wrapper is installed within the Body and Theme Provider in the Layout.tsx file on the Supaboost App folder. It is installed here, because this way you can keep track of all pages after a user has looged in.
"use client";
import "./globals.css";
import { ThemeProvider } from "@/components/theme-provider";
import { Toaster } from "@/components/ui/toaster"
import { Analytics } from '@vercel/analytics/react';
export default function RootLayout({ children }: {children: any}) {
return (
<html lang="en" className="" suppressHydrationWarning>
<body>
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
{children}
<Analytics />
</ThemeProvider>
<Toaster />
</body>
</html>
);
}With this set up, we are able to turn on Vercel analytics.
Turning on Vercel analytics
Follow the steps below to make sure you turn on Analytics:
- Go to https://vercel.com/dashboard
- Select the project in the overview that you want to add Analytics for
- In the top menu, select Analytics
- A modal page will open that displays 'Enable Web Analytics', on this modal page select 'Next'
- Select Enable on the next page
- If you followed these steps, you will be able to see any user activity from the moment you enabled it
