Analytics

MkSaaS supports multiple analytics tools to track website traffic and user behavior.

Setup

Vercel Analytics

Vercel Analytics provides detailed insights into your website's visitors without compromising user privacy.

1. Enable Web Analytics in your Vercel project dashboard > Analytics tab > Web Analytics section
2. Enable in website configuration:

analytics: {
  enableVercelAnalytics: true,
}

Vercel Speed Insights

Speed Insights helps you monitor and improve your website's performance.

1. Enable Speed Insights in your Vercel project dashboard > Analytics tab > Speed Insights section
2. Enable in website configuration:

analytics: {
  enableSpeedInsights: true,
}

Google

Google Analytics provides website tracking and analytics.

1. Create a Google Analytics account and set up a new property
2. Get your Measurement ID (starts with "G-")
3. Add the environment variable:

NEXT_PUBLIC_GOOGLE_ANALYTICS_ID="G-XXXXXXXXXX"

Umami

Umami is a simple, privacy-focused alternative to Google Analytics.

1. Create a Umami account at umami.is or self-host
2. Create a new website and get your Website ID and script URL
3. Add the environment variables:

NEXT_PUBLIC_UMAMI_WEBSITE_ID="YOUR-WEBSITE-ID"
NEXT_PUBLIC_UMAMI_SCRIPT="https://cloud.umami.is/script.js"

Plausible

Plausible is a lightweight, open-source, and privacy-friendly analytics tool.

1. Create a Plausible account at plausible.io or self-host
2. Add your website and get your domain
3. Add the environment variables:

NEXT_PUBLIC_PLAUSIBLE_DOMAIN="YOUR-DOMAIN"
NEXT_PUBLIC_PLAUSIBLE_SCRIPT="https://plausible.io/js/script.js"

PostHog

PostHog provides detailed insights into your website's traffic and user behavior.

1. Create a PostHog account and a new project
2. Get your Project API Key and Host Server Domain
3. Add the environment variables:

NEXT_PUBLIC_POSTHOG_KEY="YOUR-PROJECT-KEY"
NEXT_PUBLIC_POSTHOG_HOST="YOUR-HOST"

Ahrefs

Ahrefs provides detailed insights into your website's traffic and backlinks.

1. Create a Ahrefs account and a new website
2. Get your Website ID from Web Analytics
3. Add the environment variable:

NEXT_PUBLIC_AHREFS_WEBSITE_ID="YOUR-WEBSITE-ID"

OpenPanel

OpenPanel is an open-source product analytics platform.

1. Create an OpenPanel account and a new project
2. Get your Client ID
3. Add the environment variable:

NEXT_PUBLIC_OPENPANEL_CLIENT_ID="YOUR-CLIENT-ID"

DataFast

DataFast is a simple, privacy-friendly analytics tool focused on speed and reliability.

1. Create a DataFast account and add your website
2. Get your Website ID and domain
3. Add the environment variables:

NEXT_PUBLIC_DATAFAST_WEBSITE_ID="YOUR-WEBSITE-ID"
NEXT_PUBLIC_DATAFAST_DOMAIN="YOUR-DOMAIN"

Clarity

Clarity provides heatmaps and session recordings for understanding user behavior.

1. Create a Clarity account and a new project
2. Get your Project ID
3. Add the environment variable:

NEXT_PUBLIC_CLARITY_PROJECT_ID="YOUR-PROJECT-ID"

Seline

Seline focuses on subscription businesses and conversion tracking.

1. Create a Seline account and set up your project
2. Get your token
3. Add the environment variable:

NEXT_PUBLIC_SELINE_TOKEN="YOUR-TOKEN"

Extending New Analytics

1. Create a new file in src/analytics directory (e.g., my-analytics.tsx)
2. Implement your analytics component:

'use client';

import Script from 'next/script';

export function MyAnalytics() {
  if (process.env.NODE_ENV !== 'production') {
    return null;
  }

  const apiKey = process.env.NEXT_PUBLIC_MY_ANALYTICS_API_KEY;
  if (!apiKey) {
    return null;
  }

  return (
    <Script
      strategy="afterInteractive"
      src="https://example.com/analytics.js"
      data-api-key={apiKey}
    />
  );
}

3. Add it to the Analytics component in src/analytics/analytics.tsx:

import { MyAnalytics } from './my-analytics';

export function Analytics() {
  // ...existing code
  return (
    <>
      {/* existing analytics components */}
      <MyAnalytics />
    </>
  );
}

4. Add the environment variable:

NEXT_PUBLIC_MY_ANALYTICS_API_KEY="YOUR-API-KEY"

Video Tutorial

Next Steps