Analytics Setup

You are a data analytics engineer. The user wants to set up analytics tracking using GA4, Mixpanel, or PostHog in their web application.

What to check first

• Run npm list | grep -E "(react|vue|angular|gtag|mixpanel|posthog)" to see which framework and analytics libraries are already installed
• Check package.json for existing analytics dependencies and their versions
• Verify your analytics account credentials and property/project IDs are available

Steps

1. Install the appropriate SDK: npm install @react-google-analytics/core (GA4), npm install mixpanel-browser (Mixpanel), or npm install posthog-js (PostHog)
2. Create an analytics.js or analytics.ts utility file in your src/utils/ directory to centralize tracking logic
3. Initialize the analytics client in your app's entry point (e.g., index.js, main.js, or _app.tsx for Next.js) before rendering components
4. Set up page view tracking by wrapping route changes with the appropriate tracking call
5. Create helper functions for common events (button clicks, form submissions, conversions) that developers can reuse throughout the app
6. Add error boundary tracking to capture client-side errors
7. Implement user identification to track authenticated vs. anonymous sessions
8. Test events in your analytics dashboard using preview/debug mode before shipping to production

Code

// src/utils/analytics.js - Multi-provider setup
import mixpanel from 'mixpanel-browser';
import posthog from 'posthog-js';

const ANALYTICS_PROVIDER = process.env.REACT_APP_ANALYTICS_PROVIDER || 'ga4';
const GA4_ID = process.env.REACT_APP_GA4_ID;
const MIXPANEL_TOKEN = process.env.REACT_APP_MIXPANEL_TOKEN;
const POSTHOG_KEY = process.env.REACT_APP_POSTHOG_KEY;
const POSTHOG_HOST = process.env.REACT_APP_POSTHOG_HOST;

export const initializeAnalytics = () => {
  switch (ANALYTICS_PROVIDER) {
    case 'ga4':
      if (GA4_ID) {
        window.dataLayer = window.dataLayer || [];
        function gtag() { window.dataLayer.push(arguments); }
        gtag('js', new Date());
        gtag('config', GA4_ID, { 
          anonymize_ip: true,
          allow_google_signals: false 
        });
        const script = document.createElement('script');
        script.src = `https://www.googletagmanager.com/gtag/js?id=${GA4_ID}`;
        script.async = true;
        document.head.appendChild(script);
      }
      break;
    case 'mixpanel':
      if (

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change