Analytics

MkSaaS supports multiple analytics tools to track website traffic and user behavior. This flexible approach allows you to choose the analytics service that best fits your needs, privacy requirements, and budget.

Analytics System Structure

The analytics system in MkSaaS is designed with the following components:

This modular structure makes it easy to enable or disable specific analytics providers, and to add new ones as needed.

Setup

MkSaaS comes pre-configured with support for several popular analytics services:

Vercel Analytics

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

1. Enable Web Analytics in your Vercel project:

   • Go to the Vercel dashboard and select your project
   • Navigate to the Analytics tab
   • Click "Enable" in the Web Analytics section

2. No environment variables are required as MkSaaS integrates Vercel Analytics through website configuration:

analytics: {
  enableVercelAnalytics: true,
}

3. If you don't want to use Vercel Analytics, you can disable it in the website configuration:

analytics: {
  enableVercelAnalytics: false,
}

Vercel Analytics is implemented using the official @vercel/analytics package.

Vercel Speed Insights

Speed Insights helps you monitor and improve your website's performance by measuring Core Web Vitals and user interactions.

1. Enable Speed Insights in your Vercel project:

   • Go to the Vercel dashboard and select your project
   • Navigate to the Analytics tab
   • Click "Enable" in the Speed Insights section

2. No environment variables are required as MkSaaS integrates Speed Insights through website configuration:

analytics: {
  enableSpeedInsights: true,
}

3. If you don't want to use Speed Insights, you can disable it in the website configuration:

analytics: {
  enableSpeedInsights: false,
}

Speed Insights is implemented using the official @vercel/speed-insights package.

Google

Google Analytics is a widely used analytics service that provides comprehensive website tracking and analytics capabilities.

1. Create a Google Analytics account at analytics.google.com
2. Set up a new property and get your Measurement ID (starts with "G-")
3. Add the following environment variable:

NEXT_PUBLIC_GOOGLE_ANALYTICS_ID="G-XXXXXXXXXX"

Google Analytics is integrated using the official @next/third-parties package for Next.js.

Umami

Umami is a simple, privacy-focused alternative to Google Analytics. It provides essential website statistics without compromising visitor privacy.

1. Create a Umami account at umami.is or set up your own Umami instance
2. Create a new website in your Umami dashboard
3. Get your Website ID and script URL
4. Add the following environment variables:

NEXT_PUBLIC_UMAMI_WEBSITE_ID="your-website-id"
NEXT_PUBLIC_UMAMI_SCRIPT="https://cloud.umami.is/script.js"

For self-hosted Umami instances, use your custom script URL instead of the default one.

Plausible

Plausible is a lightweight, open-source, and privacy-friendly analytics tool that doesn't require cookie notices.

1. Create a Plausible account at plausible.io
2. Add your website
3. Get your domain
4. Add the following environment variables:

NEXT_PUBLIC_PLAUSIBLE_DOMAIN="yourdomain.com"
NEXT_PUBLIC_PLAUSIBLE_SCRIPT="https://plausible.io/js/script.js"

For self-hosted Plausible instances, use your custom script URL instead of the default one.

OpenPanel

OpenPanel is an open-source product analytics platform designed for tracking user behavior.

1. Create an OpenPanel account at openpanel.dev
2. Create a new project
3. Get your Client ID
4. Add the following 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 at datafa.st
2. Add your website
3. Get your Website ID and domain
4. Add the following environment variables:

NEXT_PUBLIC_DATAFAST_ANALYTICS_ID="your-website-id"
NEXT_PUBLIC_DATAFAST_ANALYTICS_DOMAIN="yourdomain.com"

Seline

Seline is an analytics platform with a focus on subscription businesses and conversion tracking.

1. Create a Seline account at seline.com
2. Set up your project
3. Get your token
4. Add the following environment variable:

NEXT_PUBLIC_SELINE_TOKEN="your-token"

How It Works

MkSaaS implements analytics tracking through a central Analytics component that conditionally renders individual analytics components based on environment variables and configuration:

export function Analytics() {
  if (process.env.NODE_ENV !== 'production') {
    return null;
  }
 
  return (
    <>
      {/* google analytics */}
      <GoogleAnalytics />
 
      {/* umami analytics */}
      <UmamiAnalytics />
 
      {/* plausible analytics */}
      <PlausibleAnalytics />
 
      {/* datafast analytics */}
      <DataFastAnalytics />
 
      {/* openpanel analytics */}
      <OpenPanelAnalytics />
 
      {/* seline analytics */}
      <SelineAnalytics />
      
      {/* vercel analytics */}
      {websiteConfig.analytics.enableVercelAnalytics && (
        <VercelAnalytics />
      )}
 
      {/* speed insights */}
      {websiteConfig.analytics.enableSpeedInsights && (
        <SpeedInsights />
      )}
    </>
  );
}

Each analytics component is:

• Only active in production mode
• Only loaded if the required environment variables are set or enabled in website configuration
• Implemented with minimal overhead

This means you can enable multiple analytics services simultaneously, or just use one that fits your needs.

Customization

Adding a Custom Analytics

You can add support for additional analytics services by following these steps:

1. Create a new file in the src/analytics directory (e.g., my-analytics.tsx)
2. Implement your analytics component
3. Add it to the Analytics component

Here's an example of adding a custom analytics service:

'use client';
 
import Script from 'next/script';
 
/**
 * My Custom Analytics
 * 
 * https://example.com
 */
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}
    />
  );
}

Then, update the Analytics component to include your new service:

import { MyAnalytics } from './my-analytics';
 
export function Analytics() {
  // ...existing code
 
  return (
    <>
      {/* existing analytics components */}
      
      {/* your custom analytics */}
      <MyAnalytics />
    </>
  );
}

Finally, add the necessary environment variables:

NEXT_PUBLIC_MY_ANALYTICS_API_KEY="your-api-key"

Best Practices

1. Consider Privacy Regulations: Choose analytics tools that comply with privacy regulations like GDPR and CCPA
2. Implement Cookie Consent: If your analytics solution uses cookies, implement a proper cookie consent mechanism
3. Use Multiple Tools for Different Purposes: Consider combining privacy-friendly tools like Plausible or Vercel Analytics for basic metrics with more comprehensive tools for detailed analysis
4. Keep Environment Variables Secure: Never commit your API keys to version control; use environment variables and secrets management
5. Test in Development: While analytics components only activate in production, test that they correctly load when the required environment variables are set
6. Minimize Performance Impact: Use the appropriate loading strategy for scripts (afterInteractive or lazyOnload) to minimize impact on page performance

Next Steps

Now that you understand how to set up analytics for your MkSaaS website, explore these related integrations: