Analytics Learn how to set up and use various analytics tools in your MkSaaS website
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.
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.
MkSaaS comes pre-configured with support for several popular analytics services:
Vercel Analytics provides detailed insights into your website's visitors without compromising user privacy.
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
No environment variables are required as MkSaaS integrates Vercel Analytics through website configuration:
If you don't want to use Vercel Analytics, you can disable it in the website configuration:
Speed Insights helps you monitor and improve your website's performance by measuring Core Web Vitals and user interactions.
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
No environment variables are required as MkSaaS integrates Speed Insights through website configuration:
If you don't want to use Speed Insights, you can disable it in the website configuration:
Google Analytics is a widely used analytics service that provides comprehensive website tracking and analytics capabilities.
Create a Google Analytics account at analytics.google.com
Set up a new property and get your Measurement ID (starts with "G-")
Add the following environment variable:
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID = "G-XXXXXXXXXX" Umami is a simple, privacy-focused alternative to Google Analytics. It provides essential website statistics without compromising visitor privacy.
Create a Umami account at umami.is or set up your own Umami instance
Create a new website in your Umami dashboard
Get your Website ID and script URL
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 is a lightweight, open-source, and privacy-friendly analytics tool that doesn't require cookie notices.
Create a Plausible account at plausible.io or set up your own Plausible instance
Add your website
Get your domain
Add the following environment variables:
NEXT_PUBLIC_PLAUSIBLE_DOMAIN = "YOUR-DOMAIN" 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.
PostHog is a powerful analytics tool that provides detailed insights into your website's traffic and user behavior.
Create a PostHog account at posthog.com
Create a new project
Get your Project API Key and Host Server Domain, e.g. https://your-host.posthog.com
Add the following environment variable:
NEXT_PUBLIC_POSTHOG_KEY = "YOUR-PROJECT-KEY" NEXT_PUBLIC_POSTHOG_HOST = "YOUR-HOST" Ahrefs is a powerful SEO tool that provides detailed insights into your website's traffic and backlinks.
Create a Ahrefs account at ahrefs.com
Create a new website in your Ahrefs dashboard
Get your Website ID from Web Analytics
Add the following environment variable:
NEXT_PUBLIC_AHREFS_WEBSITE_ID = "YOUR-WEBSITE-ID" OpenPanel is an open-source product analytics platform designed for tracking user behavior.
Create an OpenPanel account at openpanel.dev
Create a new project
Get your Client ID
Add the following environment variable:
NEXT_PUBLIC_OPENPANEL_CLIENT_ID = "YOUR-CLIENT-ID" DataFast is a simple, privacy-friendly analytics tool focused on speed and reliability.
Create a DataFast account at datafa.st
Add your website
Get your Website ID and domain
Add the following environment variables:
NEXT_PUBLIC_DATAFAST_WEBSITE_ID = "YOUR-WEBSITE-ID" NEXT_PUBLIC_DATAFAST_DOMAIN = "YOUR-DOMAIN"
If you want to enable the datafast revenue track, you need to enable the enableDatafastRevenueTrack feature in the website configuration.
Clarity is a privacy-friendly analytics tool that provides detailed insights into your website's traffic and user behavior.
Create a Clarity account at clarity.microsoft.com
Create a new project
Get your Project ID
Add the following environment variable:
NEXT_PUBLIC_CLARITY_PROJECT_ID = "YOUR-PROJECT-ID" Seline is an analytics platform with a focus on subscription businesses and conversion tracking.
Create a Seline account at seline.com
Set up your project
Get your token
Add the following environment variable:
NEXT_PUBLIC_SELINE_TOKEN = "YOUR-TOKEN" MkSaaS implements analytics tracking through a central Analytics component that conditionally renders individual analytics components based on environment variables and configuration:
src/analytics/analytics.tsx Each analytics component is:
Only active in production mode
Only loaded if the required environment variables are set or enabled in website configuration
This means you can enable multiple analytics services simultaneously, or just use one that fits your needs.
You can add support for additional analytics services by following these steps:
Create a new file in the src/analytics directory (e.g., my-analytics.tsx)
Implement your analytics component
Add it to the Analytics component
Here's an example of adding a custom analytics service:
src/analytics/my-analytics.tsx Then, update the Analytics component to include your new service:
src/analytics/analytics.tsx Finally, add the necessary environment variables:
NEXT_PUBLIC_MY_ANALYTICS_API_KEY = "YOUR-API-KEY"
Consider Privacy Regulations : Choose analytics tools that comply with privacy regulations like GDPR and CCPAImplement Cookie Consent : If your analytics solution uses cookies, implement a proper cookie consent mechanismUse Multiple Tools for Different Purposes : Consider combining privacy-friendly tools like Plausible or Vercel Analytics for basic metrics with more comprehensive tools for detailed analysisKeep Environment Variables Secure : Never commit your API keys to version control; use environment variables and secrets managementTest in Development : While analytics components only activate in production, test that they correctly load when the required environment variables are setMinimize Performance Impact : Use the appropriate loading strategy for scripts (afterInteractive or lazyOnload) to minimize impact on page performance Now that you understand how to set up analytics for your MkSaaS website, explore these related integrations:
enableVercelAnalytics : true ,
}
enableVercelAnalytics : false ,
}
enableSpeedInsights : true ,
}
enableSpeedInsights : false ,
}
features : { enableDatafastRevenueTrack : true , } function
Analytics
() {
if (process.env. NODE_ENV !== 'production' ) {
return null ;
}
return (
<>
{ /* google analytics */ }
< GoogleAnalytics />
{ /* umami analytics */ }
< UmamiAnalytics />
{ /* plausible analytics */ }
< PlausibleAnalytics />
{ /* ahrefs analytics */ }
< AhrefsAnalytics />
{ /* datafast analytics */ }
< DataFastAnalytics />
{ /* openpanel analytics */ }
< OpenPanelAnalytics />
{ /* seline analytics */ }
< SelineAnalytics />
{ /* vercel analytics */ }
{websiteConfig.analytics.enableVercelAnalytics && (
< VercelAnalytics />
)}
{ /* speed insights */ }
{websiteConfig.analytics.enableSpeedInsights && (
< SpeedInsights />
)}
</>
);
}
;
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}
/>
);
}
{ MyAnalytics }
from
'./my-analytics'
;
export function Analytics () {
// ...existing code
return (
<>
{ /* existing analytics components */ }
{ /* your custom analytics */ }
< MyAnalytics />
</>
);
}
Analytics | MkSaaS - Make Your AI SaaS Product in a Weekend
MkSaaS Docs