Analytics

Expand
Copy to Clipboard'use client';
 
import { analytics } from '~/config/analytics.config';
import { ActionCallback, ActionSlug, enqueueAction, isBrowser, removeAction } from '@kit/shared';
import { usePathname, useSearchParams } from 'next/navigation';
import { useEffect } from 'react';
 
type AnalyticsMapping = {
    [K in ActionSlug]?: ActionCallback<K>;
};
 
/**
 * Hook to subscribe to app events and map them to analytics actions
 * @param mapping
 */
function useAnalyticsMapping(mapping: AnalyticsMapping) {
    useEffect(() => {
        const subscriptions = Object.entries(mapping).map(([eventType, handler]) => {
            enqueueAction(eventType as ActionSlug, handler as ActionCallback<ActionSlug>);
 
            return () => removeAction(eventType as ActionSlug, handler as ActionCallback<ActionSlug>);
        });
 
        return () => {
            subscriptions.forEach((unsubscribe) => unsubscribe());
        };
    }, [mapping]);
}
 
/**
 * Define a mapping of app events to analytics actions
 * Add new mappings here to track new events in the analytics service from app events
 */
const analyticsMapping: AnalyticsMapping = {
    user_signed_in: ({ userId, ...traits }) => {
        if (userId) {
            return analytics.identify(userId, traits);
        }
    },
    user_signed_up: ({ method }: { method: 'magiclink' | 'password' }) => {
        return analytics.trackEvent('user_signed_up', { method });
    },
    checkout_started: ({ priceId, productId }: { priceId: string; productId: string }) => {
        return analytics.trackEvent('checkout_started', { priceId, productId });
    },
    user_updated: () => {
        return analytics.trackEvent('user_updated');
    },
};
 
function AnalyticsProviderBrowser(props: React.PropsWithChildren) {
    // Subscribe to app events and map them to analytics actions
    useAnalyticsMapping(analyticsMapping);
 
    // Report page views to the analytics service
    useReportPageView((url) => analytics.trackPageView(url));
 
    // Render children
    return props.children;
}
 
/**
 * Provider for the analytics service
 */
export function AnalyticsProvider(props: React.PropsWithChildren) {
    if (!isBrowser()) {
        return props.children;
    }
 
    return <AnalyticsProviderBrowser>{props.children}</AnalyticsProviderBrowser>;
}
 
/**
 * Hook to report page views to the analytics service
 * @param reportAnalyticsFn
 */
function useReportPageView(reportAnalyticsFn: (url: string) => unknown) {
    const pathname = usePathname();
    const searchParams = useSearchParams();
 
    useEffect(() => {
        const url = [pathname, searchParams.toString()].filter(Boolean).join('?');
 
        reportAnalyticsFn(url);
    }, [pathname, reportAnalyticsFn, searchParams]);
}
Expand

Copy to Clipboard# ============================================
# 📊 ANALYTICS
# ============================================
 
# For Google Analytics
NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX
NEXT_PUBLIC_GA_DISABLE_LOCALHOST_TRACKING=true
NEXT_PUBLIC_GA_DISABLE_PAGE_VIEWS_TRACKING=false
 
# For Umami
NEXT_PUBLIC_UMAMI_HOST=https://your-umami-instance.com
NEXT_PUBLIC_UMAMI_WEBSITE_ID=1234567890
NEXT_PUBLIC_UMAMI_DISABLE_LOCALHOST_TRACKING=true