Google Analytics Setup in MakerKit

Google Analytics 4 (GA4) provides web analytics focused on marketing attribution, conversion tracking, and audience insights. Use it when your marketing team needs Google's ecosystem for ad optimization and reporting.

Prerequisites

Before starting, you need:

• A Google Analytics 4 property (create one here)
• Your GA4 Measurement ID (format: G-XXXXXXXXXX)

Find your Measurement ID in GA4: Admin > Data Streams > Select your stream > Measurement ID.

Installation

Install the Google Analytics plugin using the MakerKit CLI:

npx @makerkit/cli@latest plugins install

Select Google Analytics from the list. This creates the plugin at packages/plugins/google-analytics.

Add the plugin as a dependency to the analytics package:

pnpm add "@kit/google-analytics@workspace:*" --filter "@kit/analytics" -D

Configuration

Register the provider in your analytics configuration:

import { createGoogleAnalyticsService } from '@kit/google-analytics';
import { createAnalyticsManager } from './analytics-manager';
import type { AnalyticsManager } from './types';
export const analytics: AnalyticsManager = createAnalyticsManager({
  providers: {
    'google-analytics': createGoogleAnalyticsService,
  },
});

Add your Measurement ID to environment variables:

NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX

Environment Variables

Development Configuration

Disable localhost tracking to avoid polluting your analytics during development:

NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX
NEXT_PUBLIC_GA_DISABLE_LOCALHOST_TRACKING=true

Verification

After configuration, verify the integration:

1. Open your application in the browser
2. Open Chrome DevTools > Network tab
3. Filter by google-analytics or gtag
4. Navigate between pages and confirm requests are sent
5. Check GA4 Realtime reports to see your session

Using with Other Providers

Google Analytics can run alongside other providers. Events dispatch to all registered providers:

import { createGoogleAnalyticsService } from '@kit/google-analytics';
import { createPostHogAnalyticsService } from '@kit/posthog/client';
import { createAnalyticsManager } from './analytics-manager';
export const analytics = createAnalyticsManager({
  providers: {
    'google-analytics': createGoogleAnalyticsService,
    posthog: createPostHogAnalyticsService,
  },
});

This setup is common when marketing uses GA4 for attribution while product uses PostHog for behavior analysis.

Tracked Events

With the default configuration, Google Analytics receives:

• Page views: Automatically tracked on route changes
• User identification: When analytics.identify() is called
• Custom events: All events passed to analytics.trackEvent()

Events from the App Events system (user.signedUp, checkout.started, etc.) are forwarded to GA4 through the analytics mapping.

GDPR Considerations

Google Analytics sets cookies and requires user consent in the EU. Integrate with the Cookie Banner component to manage consent:

import { useCookieConsent, ConsentStatus } from '@kit/ui/cookie-banner';
import { analytics } from '@kit/analytics';
import { useEffect } from 'react';
function AnalyticsGate({ children }) {
  const { status } = useCookieConsent();
  useEffect(() => {
    if (status === ConsentStatus.Accepted) {
      // GA is initialized automatically when consent is given
      // You may want to delay initialization until consent
    }
  }, [status]);
  return children;
}

Consider using Umami for cookie-free, GDPR-compliant analytics.

Troubleshooting

Events not appearing in GA4

• Verify your Measurement ID is correct
• Check that NEXT_PUBLIC_GA_DISABLE_LOCALHOST_TRACKING is not true in production
• GA4 has a delay of up to 24-48 hours for some reports. Use Realtime for immediate verification

Duplicate page views

• Ensure you have not called trackPageView manually. MakerKit tracks page views automatically

Ad blockers

• Ad blockers often block Google Analytics. Consider using a proxy or server-side tracking for critical metrics

Next Steps

• Learn about Analytics and Events for custom event tracking
• Add PostHog for product analytics
• Create a custom provider for other services