Skip to main content

Google Analytics

Add Google Analytics to track user behavior and application usage in your InstaCRUD frontend.

Overview​

Google Analytics provides insights into:

  • User traffic — Page views, sessions, users
  • User behavior — Navigation paths, time on page
  • Demographics — Location, device, browser
  • Conversions — Sign-ups, key actions

Step 1: Create Google Analytics Property​

  1. Go to Google Analytics
  2. Click Admin (gear icon)
  3. Click Create Property
  4. Configure:
    • Property name: InstaCRUD
    • Reporting time zone: Your timezone
    • Currency: Your currency
  5. Click Next and complete setup

Step 2: Create Data Stream​

  1. Select Web as platform
  2. Enter your website URL
  3. Name the stream (e.g., "InstaCRUD Frontend")
  4. Click Create stream
  5. Copy the Measurement ID (starts with G-)

Step 3: Add to Frontend​

Option A: Next.js Script Component​

Add to your root layout (frontend/src/app/layout.tsx):

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <Script
          src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_ID}`}
          strategy="afterInteractive"
        />
        <Script id="google-analytics" strategy="afterInteractive">
          {`
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${process.env.NEXT_PUBLIC_GA_ID}');
          `}
        </Script>
      </head>
      <body>{children}</body>
    </html>
  );
}

Option B: Using @next/third-parties​

Install the package:

npm install @next/third-parties

Add to layout:

import { GoogleAnalytics } from '@next/third-parties/google';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
      <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID} />
    </html>
  );
}

Step 4: Configure Environment Variable​

Add to your frontend environment:

# .env.local or environment variables
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX

Track Custom Events​

Track specific user actions:

// Helper function
export const trackEvent = (action: string, category: string, label?: string, value?: number) => {
  if (typeof window !== 'undefined' && window.gtag) {
    window.gtag('event', action, {
      event_category: category,
      event_label: label,
      value: value,
    });
  }
};

// Usage examples
trackEvent('sign_up', 'authentication', 'email');
trackEvent('create_entity', 'crud', 'client');
trackEvent('export_data', 'feature', 'csv');

Track Page Views (App Router)​

For Next.js App Router, page views are tracked automatically. For custom tracking:

'use client';

import { usePathname, useSearchParams } from 'next/navigation';
import { useEffect } from 'react';

export function Analytics() {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    if (pathname && window.gtag) {
      window.gtag('config', process.env.NEXT_PUBLIC_GA_ID, {
        page_path: pathname + (searchParams?.toString() ? `?${searchParams}` : ''),
      });
    }
  }, [pathname, searchParams]);

  return null;
}

Privacy Considerations​

For GDPR compliance, implement cookie consent before loading Analytics:

// Only load GA after consent
const [consent, setConsent] = useState(false);

useEffect(() => {
  const hasConsent = localStorage.getItem('analytics_consent') === 'true';
  setConsent(hasConsent);
}, []);

// Conditionally render GA script
{consent && <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID} />}

IP Anonymization​

GA4 anonymizes IP addresses by default. For additional privacy:

gtag('config', 'G-XXXXXXXXXX', {
  anonymize_ip: true,
});

Debugging​

Real-Time Reports​

  1. Go to Analytics dashboard
  2. Click Reports > Realtime
  3. View active users and events

Debug Mode​

Enable debug mode in browser:

gtag('config', 'G-XXXXXXXXXX', {
  debug_mode: true,
});

Or use the Google Analytics Debugger Chrome extension.

Environment-Specific Setup​

Development​

Disable tracking in development:

// Only track in production
if (process.env.NODE_ENV === 'production') {
  gtag('config', process.env.NEXT_PUBLIC_GA_ID);
}

Staging​

Use a separate property for staging to keep data clean:

# Staging
NEXT_PUBLIC_GA_ID=G-STAGING123

# Production
NEXT_PUBLIC_GA_ID=G-PROD456

Common Events to Track​

EventCategoryWhen to Fire
sign_upauthenticationUser registers
loginauthenticationUser signs in
create_entitycrudEntity created
searchfeatureSearch performed
exportfeatureData exported
errorsystemError occurs

Summary​

Google Analytics integration requires:

  1. GA4 property with web data stream
  2. Measurement ID in frontend environment
  3. Script tag in root layout
  4. Custom event tracking for key actions
  5. Privacy compliance (cookie consent)