LogoNEXTDEVKIT Docs

Analytics

Learn how to implement analytics tracking with cookie consent in NEXTDEVKIT

🏗️ Analytics System Architecture

NEXTDEVKIT's analytics system is structured as follows:

src/
├── config/
│   └── analytics.ts              # Analytics providers configuration
├── components/
│   └── shared/
│       └── cookie/
│           ├── cookie-consent.tsx           # Cookie consent component
│           └── cookie-consent-config.ts     # Consent configuration
├── app/
│   └── [locale]/
│       └── layout.tsx             # Analytics integration in layout
└── lib/
    └── metadata.ts                # SEO metadata integration

⚙️ Analytics Configuration

Analytics Providers

Analytics providers are configured in src/config/analytics.ts:

src/config/analytics.ts
const analyticsConfig: AnalyticsConfig = {
	google: {
		enabled: !!process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID,
		label: "Google Analytics",
		config: {
			trackingId: process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID,
		},
		onAccept: () => {
			// Google Analytics initialization code
		},
	},
	umami: {
		enabled: !!process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID,
		label: "Umami Analytics",
		config: {
			url: process.env.NEXT_PUBLIC_UMAMI_SCRIPT_URL,
			websiteId: process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID,
		},
		onAccept: () => {
			// Umami Analytics initialization code
		},
	},
	plausible: {
		enabled: !!process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN,
		label: "Plausible Analytics",
		config: {
			domain: process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN,
			src: process.env.NEXT_PUBLIC_PLAUSIBLE_SCRIPT_URL,
		},
		onAccept: () => {
			// Plausible Analytics initialization code
		},
	},
};

Environment Variables

Set up the required environment variables for your analytics providers:

.env
# Google Analytics
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX

# Umami Analytics
NEXT_PUBLIC_UMAMI_WEBSITE_ID=your-website-id
NEXT_PUBLIC_UMAMI_SCRIPT_URL=https://analytics.umami.is/script.js

# Plausible Analytics
NEXT_PUBLIC_PLAUSIBLE_DOMAIN=yourdomain.com
NEXT_PUBLIC_PLAUSIBLE_SCRIPT_URL=https://plausible.io/js/script.js

📈 Analytics Providers Setup

Google Analytics Setup

  1. Create Google Analytics Account:

  2. Environment Variable:

    NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX

Umami Analytics Setup

  1. Create Umami Account:

    • Visit umami.is or set up self-hosted instance
    • Create a new website
    • Get your Website ID and script URL

  2. Environment Variables:

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

Plausible Analytics Setup

  1. Create Plausible Account:

    • Visit plausible.io or set up self-hosted instance
    • Add your website
    • Get your domain and script URL

  2. Environment Variables:

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

🍪 Cookie Consent System

NEXTDEVKIT integrates with vanilla-cookieconsent for GDPR-compliant cookie management:

'use client';

import { useEffect } from 'react';
import * as CookieConsent from 'vanilla-cookieconsent';
import 'vanilla-cookieconsent/dist/cookieconsent.css';
import getConfig from './cookie-consent-config';

const CookieConsentComponent = () => {
  useEffect(() => {
    const initCookieConsent = async () => {
      await CookieConsent.run(getConfig());
    };

    initCookieConsent().catch(console.error);
  }, []);

  return <></>;
};

export default CookieConsentComponent;

The consent configuration automatically integrates with your analytics providers:

import { getEnabledAnalytics, hasEnabledAnalytics } from "@/config/analytics";

const getConfig = () => {
  const enabledAnalytics = getEnabledAnalytics();
  const hasAnalytics = hasEnabledAnalytics();

  // Build services object dynamically based on enabled analytics
  const analyticsServices: Record<string, any> = {};

  Object.entries(enabledAnalytics).forEach(([key, provider]) => {
    analyticsServices[key] = {
      label: provider.label,
      onAccept: provider.onAccept,
    };
  });

  return {
    categories: {
      necessary: {
        enabled: true,
        readOnly: true,
      },
      ...(hasAnalytics && {
        analytics: {
          autoClear: {
            cookies: [
              { name: /^_ga/ },      // Google Analytics
              { name: "_gid" },      // Google Analytics
              { name: "__plausible" }, // Plausible
            ],
          },
          services: analyticsServices,
        },
      }),
    },
    // ... rest of configuration
  };
};

Layout Integration

Analytics are integrated into the main layout:

export async function AppProviders({
	children,
	locale,
}: PropsWithChildren<{ locale: string }>) {
	const defaultMode = appConfig.ui.theme.defaultMode;

	return (
		<html lang={locale} suppressHydrationWarning>
			<body
				className={`${geistSans.variable} ${geistMono.variable} antialiased min-w-screen overflow-x-hidden`}
			>
				// other providers
				{children}
			</body>
			<CookieConsentComponent />
		</html>
	);
}

🔧 Troubleshooting

Common Issues

Analytics Not Loading:

  • Check environment variables are set correctly
  • Verify cookie consent has been accepted
  • Check browser console for JavaScript errors
  • Ensure analytics scripts are not blocked by ad blockers

Cookie Consent Not Showing:

  • Verify hasEnabledAnalytics() returns true
  • Check if consent has already been given
  • Ensure cookie consent component is properly imported

Events Not Tracking:

  • Verify analytics providers are properly initialized
  • Check if consent was given for analytics cookies
  • Ensure event tracking functions are called correctly

🔗 Related Resources

🎯 Next Steps

Now that you understand the analytics system, explore these related features: