Skip to main content

Google Analytics 4 Setup Guide

Overview​

Your platform now has comprehensive Google Analytics 4 (GA4) integration that tracks:

  • ✅ Page views across all routes
  • ✅ Blog article views with category tracking
  • ✅ Time spent on pages
  • ✅ Scroll depth on blog articles
  • ✅ Share and copy link actions
  • ✅ And more custom events ready to use!

Step 1: Create a Google Analytics 4 Property​

  1. Go to Google Analytics

    • Sign in with your Google account

  2. Create a new GA4 property:

    • Click Admin (bottom left)
    • Under "Property" column, click Create Property
    • Enter your property name (e.g., "AI Agentification Platform")
    • Select your timezone and currency
    • Click Next

  3. Business details:

    • Select your industry category
    • Choose business size
    • Select how you plan to use Google Analytics
    • Click Create

  4. Accept the Terms of Service

  5. Set up a Data Stream:

    • Select Web platform
    • Enter your website URL (e.g., https://agentification.academy)
    • Enter stream name (e.g., "Production Website")
    • Click Create stream

  6. Copy your Measurement ID:

    • You'll see a Measurement ID like G-XXXXXXXXXX
    • Copy this ID - you'll need it in the next step

Step 2: Add Measurement ID to Your Environment Variables​

For Development:​

  1. Open .env.development or .env.local
  2. Add this line: 
    VITE_GA_MEASUREMENT_ID=G-XXXXXXXXXX
    (Replace G-XXXXXXXXXX with your actual Measurement ID)

For Production (Vercel):​

  1. Go to your Vercel Dashboard
  2. Select your project
  3. Go to Settings → Environment Variables
  4. Add new variable:
    • Name: VITE_GA_MEASUREMENT_ID
    • Value: G-XXXXXXXXXX
    • Environment: Select "Production" (and optionally Preview, Development)
  5. Click Save
  6. Redeploy your application for changes to take effect

Step 3: Verify Installation​

Method 1: Using GA4 Real-Time Reports​

  1. Go to your GA4 property
  2. Click Reports → Realtime
  3. Visit your website in a new browser tab
  4. You should see your visit appear in real-time within ~30 seconds

Method 2: Using Browser Console​

  1. Open your website
  2. Open browser DevTools (F12)
  3. Go to Console tab
  4. You should see: Google Analytics 4 initialized
  5. Navigate between pages - you should see page views being tracked

Method 3: Using GA Debugger Chrome Extension​

  1. Install Google Analytics Debugger
  2. Enable the extension
  3. Visit your website
  4. Open browser console to see detailed GA4 event tracking

Step 4: What's Being Tracked​

Automatic Tracking:​

  • All page views - Every route change is tracked
  • Blog article views - Special tracking with article title and category
  • Time on page - Tracked when users leave or navigate away
  • Scroll depth - How far users scroll on blog articles

Custom Events Ready to Use:​

See src/services/analytics.js for all available tracking functions:

// Already implemented in ArticlePage:
trackBlogView(slug, title, category)
trackTimeOnPage(pageName, seconds)
trackScrollDepth(pageName, percentage)
trackEvent(category, action, label)

// Available for you to add:
trackCourseEnrollment(courseName, courseId)
trackVideoWatchTime(videoTitle, seconds)
trackSearch(searchTerm, resultCount)
trackUserLogin(method)
trackUserSignup(method)
trackFormSubmit(formName, formType)

Step 5: View Your Analytics​

Basic Reports (Available after 24-48 hours):​

  1. Real-time: See current visitors
  2. Engagement → Pages and screens: Most viewed pages
  3. Acquisition → User acquisition: Where users come from
  4. Demographics → Overview: User locations, languages
  5. Tech → Overview: Devices, browsers, OS

Blog-Specific Insights:​

Go to Reports → Engagement → Events:

  • view_blog - Blog article views with article details
  • time_on_page - How long users spend on blog posts
  • scroll_depth - How much of articles users read
  • share / copy_link - Article sharing behavior

Custom Reports:​

  1. Go to Explore tab
  2. Create custom reports to analyze:
    • Most popular blog categories
    • Average time spent per article
    • User journey from blog to course enrollment
    • Geographic distribution of blog readers

Step 6: Optional - Enhanced Tracking​

Add to Login/Signup Pages:​

In your LoginPage.jsx and SignupPage.jsx, add:

import { trackUserLogin, trackUserSignup } from '../src/services/analytics';

// In your login success handler:
trackUserLogin('email'); // or 'google', 'linkedin'

// In your signup success handler:
trackUserSignup('email');

Add to Course Enrollment:​

In your enrollment logic, add:

import { trackCourseEnrollment } from '../src/services/analytics';

trackCourseEnrollment(courseName, courseId);

Add Search Tracking:​

In your blog search component:

import { trackSearch } from '../src/services/analytics';

trackSearch(searchQuery, resultsCount);

Privacy & GDPR Compliance​

The GA4 setup includes:

  • ✅ IP anonymization enabled (anonymizeIp: true)
  • ✅ No personally identifiable information (PII) is tracked
  • ✅ Cookie consent is recommended (not yet implemented)

Recommended: Add a cookie consent banner to comply with GDPR/CCPA. Libraries like:

Troubleshooting​

Analytics not showing in GA4:​

  1. ✅ Check console for "Google Analytics 4 initialized" message
  2. ✅ Verify VITE_GA_MEASUREMENT_ID is set correctly
  3. ✅ Make sure it starts with G- not UA- (UA is old Universal Analytics)
  4. ✅ Wait 24-48 hours for full reports (Real-time works immediately)
  5. ✅ Check you're in the correct property in GA4

Events not showing:​

  1. ✅ Use Real-time → Events to see events immediately
  2. ✅ Check browser console for errors
  3. ✅ Verify you're calling the tracking functions correctly

Need Help?​

Next Steps​

  1. Set up GA4 property (15 minutes)
  2. Add Measurement ID to environment variables
  3. Deploy to Vercel (with new env variable)
  4. Verify tracking using Real-time reports
  5. Wait 24-48 hours for full data
  6. Create custom reports for blog performance
  7. Optional: Add cookie consent banner
  8. Optional: Integrate GA4 API into admin dashboard (see below)

Future: GA4 API Integration in Admin Dashboard​

Want to display GA4 metrics directly in your admin panel? You can use the GA4 Reporting API to fetch:

  • Top blog articles by views
  • Average time on page
  • Geographic breakdown
  • Traffic sources
  • Real-time visitor count

This would require:

  1. Setting up a Google Cloud project
  2. Enabling GA4 Reporting API
  3. Creating service account credentials
  4. Building a backend endpoint to fetch GA4 data
  5. Displaying metrics in pages/admin/Analytics.jsx

Let me know if you'd like help implementing this!

Congratulations! 🎉 Your platform now has enterprise-grade analytics tracking.