Analytics and User Behavior Tracking

Understanding how users interact with your application is crucial for making informed decisions. Analytics provide insights into user behavior, feature adoption, conversion funnels, and areas for improvement. This guide covers implementing modern analytics while respecting user privacy.

Why Analytics Matter

• Data-Driven Decisions: Make changes based on real user behavior, not assumptions
• Feature Validation: Know which features users actually use
• Conversion Optimization: Identify and fix drop-off points in funnels
• User Segmentation: Understand different user groups and their needs
• Performance Tracking: Monitor technical metrics that impact UX
• ROI Measurement: Prove the value of product changes

Google Analytics 4 Setup

Google Analytics 4 (GA4) is the latest version, focusing on event-based tracking and privacy.

Installation with Next.js

// lib/gtag.ts
export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID;

// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
export const pageview = (url: string) => {
  window.gtag('config', GA_TRACKING_ID, {
    page_path: url,
  });
};

// https://developers.google.com/analytics/devguides/collection/gtagjs/events
export const event = ({ action, category, label, value }: {
  action: string;
  category: string;
  label: string;
  value?: number;
}) => {
  window.gtag('event', action, {
    event_category: category,
    event_label: label,
    value: value,
  });
};

// pages/_app.tsx
import { useRouter } from 'next/router';
import { useEffect } from 'react';
import Script from 'next/script';
import * as gtag from '../lib/gtag';

function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = (url: string) => {
      gtag.pageview(url);
    };

    router.events.on('routeChangeComplete', handleRouteChange);
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router.events]);

  return (
    <>
      {/* Global Site Tag (gtag.js) - Google Analytics */}
      

Custom Event Tracking

Track specific user actions beyond pageviews to understand behavior deeply.

Common Events to Track

// Track button clicks
const handleCTAClick = () => {
  gtag.event({
    action: 'click',
    category: 'CTA',
    label: 'Get Started Button',
  });

  // Your button logic...
};

// Track form submissions
const handleFormSubmit = (formName: string) => {
  gtag.event({
    action: 'submit',
    category: 'Form',
    label: formName,
  });
};

// Track video plays
const handleVideoPlay = (videoTitle: string) => {
  gtag.event({
    action: 'play',
    category: 'Video',
    label: videoTitle,
  });
};

// Track search queries
const handleSearch = (query: string) => {
  gtag.event({
    action: 'search',
    category: 'Search',
    label: query,
  });
};

// Track downloads
const handleDownload = (fileName: string) => {
  gtag.event({
    action: 'download',
    category: 'File',
    label: fileName,
  });
};

// Track sign ups
const handleSignUp = (method: string) => {
  gtag.event({
    action: 'sign_up',
    category: 'User',
    label: method, // 'email', 'google', 'github'
  });
};

E-commerce Events

// View item
gtag.event('view_item', {
  currency: 'USD',
  value: 29.99,
  items: [{
    item_id: 'SKU_12345',
    item_name: 'Premium Plan',
    price: 29.99,
    quantity: 1,
  }],
});

// Add to cart
gtag.event('add_to_cart', {
  currency: 'USD',
  value: 29.99,
  items: [{
    item_id: 'SKU_12345',
    item_name: 'Premium Plan',
    price: 29.99,
    quantity: 1,
  }],
});

// Purchase
gtag.event('purchase', {
  transaction_id: 'T_12345',
  value: 29.99,
  currency: 'USD',
  tax: 2.40,
  shipping: 0,
  items: [{
    item_id: 'SKU_12345',
    item_name: 'Premium Plan',
    price: 29.99,
    quantity: 1,
  }],
});

User Properties and Custom Dimensions

// Set user properties
gtag.event('login', {
  method: 'Google',
});

gtag('set', 'user_properties', {
  account_type: 'premium',
  subscription_status: 'active',
  signup_date: '2024-01-15',
});

// Track user journey
gtag.event('level_up', {
  character: 'User',
  level: 5,
});

A/B Testing Implementation

Simple A/B Test Hook

// hooks/useABTest.ts
import { useEffect, useState } from 'react';

export function useABTest(experimentName: string, variants: string[]) {
  const [variant, setVariant] = useState('');

  useEffect(() => {
    // Check if user already has a variant assigned
    const storedVariant = localStorage.getItem(`ab_${experimentName}`);

    if (storedVariant && variants.includes(storedVariant)) {
      setVariant(storedVariant);
    } else {
      // Randomly assign variant
      const randomVariant = variants[Math.floor(Math.random() * variants.length)];
      localStorage.setItem(`ab_${experimentName}`, randomVariant);
      setVariant(randomVariant);

      // Track assignment
      gtag.event({
        action: 'ab_test_assigned',
        category: 'Experiment',
        label: `${experimentName}_${randomVariant}`,
      });
    }
  }, [experimentName, variants]);

  return variant;
}

// Usage
function LandingPage() {
  const ctaVariant = useABTest('cta_button_test', ['control', 'variant_a']);

  const ctaText = ctaVariant === 'variant_a' ? 'Start Free Trial' : 'Get Started';

  const handleClick = () => {
    gtag.event({
      action: 'click',
      category: 'CTA',
      label: `${ctaVariant}_${ctaText}`,
    });
  };

  return (
    
      {ctaText}
    
  );
}

Google Optimize Integration

Conversion Funnel Tracking

// Track multi-step funnel
const trackFunnelStep = (step: string, additionalData?: object) => {
  gtag.event('funnel_step', {
    funnel_name: 'signup_flow',
    step_name: step,
    ...additionalData,
  });
};

// In your signup flow
function SignupFlow() {
  useEffect(() => {
    trackFunnelStep('view_signup_page');
  }, []);

  const handleEmailEntered = () => {
    trackFunnelStep('email_entered');
  };

  const handlePasswordCreated = () => {
    trackFunnelStep('password_created');
  };

  const handleAccountCreated = () => {
    trackFunnelStep('account_created');
    gtag.event('sign_up', {
      method: 'email',
    });
  };

  // Component logic...
}

Performance Tracking

// Track Core Web Vitals
import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';

function sendToAnalytics({ name, delta, value, id }) {
  gtag.event(name, {
    event_category: 'Web Vitals',
    value: Math.round(name === 'CLS' ? delta * 1000 : delta),
    event_label: id,
    non_interaction: true,
  });
}

getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getFCP(sendToAnalytics);
getLCP(sendToAnalytics);
getTTFB(sendToAnalytics);

// Track custom performance metrics
const trackLoadTime = (componentName: string) => {
  const startTime = performance.now();

  return () => {
    const loadTime = performance.now() - startTime;
    gtag.event({
      action: 'component_load',
      category: 'Performance',
      label: componentName,
      value: Math.round(loadTime),
    });
  };
};

Privacy-Compliant Tracking

Cookie Consent Implementation

// components/CookieConsent.tsx
import { useState, useEffect } from 'react';

export function CookieConsent() {
  const [showBanner, setShowBanner] = useState(false);

  useEffect(() => {
    const consent = localStorage.getItem('cookie_consent');
    if (!consent) {
      setShowBanner(true);
    } else if (consent === 'accepted') {
      initializeAnalytics();
    }
  }, []);

  const acceptCookies = () => {
    localStorage.setItem('cookie_consent', 'accepted');
    setShowBanner(false);
    initializeAnalytics();
  };

  const declineCookies = () => {
    localStorage.setItem('cookie_consent', 'declined');
    setShowBanner(false);
  };

  if (!showBanner) return null;

  return (
    

      

        We use cookies to improve your experience and analyze site traffic.
        Learn more
      
      

        Accept
        Decline
      
    
  );
}

function initializeAnalytics() {
  // Initialize GA4 only after consent
  window.gtag('consent', 'update', {
    analytics_storage: 'granted',
  });
}

Anonymize IP Addresses

// Anonymize user IP addresses
gtag('config', 'G-XXXXXXXXXX', {
  anonymize_ip: true,
  allow_google_signals: false,
  allow_ad_personalization_signals: false,
});

Analytics Dashboard Tools

Popular Analytics Platforms

• Google Analytics 4: Free, comprehensive, industry standard
• Mixpanel: Product analytics, user cohorts, retention analysis
• Amplitude: Product intelligence, behavioral analytics
• Plausible: Privacy-focused, GDPR compliant, simple
• PostHog: Open-source, self-hosted option, session replay
• Heap: Automatic event tracking, no code changes needed

Key Metrics to Track

Acquisition Metrics

• Traffic sources (organic, paid, direct, referral)
• Landing page performance
• Campaign effectiveness

Engagement Metrics

• Session duration
• Pages per session
• Bounce rate
• Feature usage

Conversion Metrics

• Conversion rate
• Goal completions
• Funnel drop-off points
• Revenue per user

Retention Metrics

• Return visitor rate
• Churn rate
• Cohort retention
• Customer lifetime value

Best Practices

• Track what matters: Don't track everything; focus on actionable metrics
• Test your tracking: Verify events fire correctly before deploying
• Document events: Maintain a tracking plan so everyone knows what's being tracked
• Respect privacy: Be transparent and give users control
• Regular reviews: Check your analytics weekly, not just when problems arise
• Segment users: Understand different user groups separately
• Set up alerts: Get notified of unusual drops or spikes
• Clean data: Filter out bot traffic and internal visits

Conclusion

Analytics provide the insights you need to make informed product decisions, optimize user experience, and grow your business. Start with basic pageview tracking, gradually add custom events for key interactions, and always prioritize user privacy.

Remember: data is only valuable if you act on it. Set up regular reviews of your analytics, form hypotheses, test changes, and measure results. The goal isn't to collect data—it's to understand your users and build better products.