Skip to main content

Analytics Setup Guide

This guide explains how to set up and configure analytics for the Toto documentation site.

🎯 Overview​

The documentation site includes comprehensive analytics tracking to measure:

  • User engagement and behavior
  • Page performance and Core Web Vitals
  • Content popularity and navigation patterns
  • Search usage and effectiveness
  • Link clicks and external referrals

🔧 Setup Instructions​

1. Google Analytics 4 (GA4)​

Create GA4 Property​

  1. Go to Google Analytics
  2. Create a new GA4 property for docs.betoto.pet
  3. Get your Measurement ID (format: G-XXXXXXXXXX)

Configure Environment Variable​

Create a .env file in the docs-site directory:

# Copy the example file
cp env.example .env

# Edit the .env file and replace with your actual tracking ID
GA_TRACKING_ID=G-XXXXXXXXXX

Important: Replace G-XXXXXXXXXX with your actual GA4 tracking ID.

Alternative: Direct Configuration​

If you prefer to set the tracking ID directly in the config:

// In docusaurus.config.ts
const GA_TRACKING_ID = 'G-XXXXXXXXXX'; // Replace with your actual tracking ID

googleAnalytics: {
  trackingID: GA_TRACKING_ID,
  anonymizeIP: true,
},
gtag: {
  trackingID: GA_TRACKING_ID,
  anonymizeIP: true,
},

2. Firebase Analytics (Optional)​

For enhanced tracking with Firebase:

npm install firebase

Add Firebase configuration to your .env file:

FIREBASE_API_KEY=your_firebase_api_key
FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
FIREBASE_PROJECT_ID=your_project_id
FIREBASE_STORAGE_BUCKET=your_project.appspot.com
FIREBASE_MESSAGING_SENDER_ID=123456789
FIREBASE_APP_ID=1:123456789:web:abcdef123456

📈 Tracked Events​

Automatic Tracking​

  • Page Views: Every page visit
  • Documentation Section Views: Which sections users visit most
  • Time on Page: How long users spend on each page
  • Core Web Vitals: LCP, FID, CLS performance metrics
  • Page Load Times: Performance monitoring

Custom Events​

  • Link Clicks: External links and downloads
  • Search Queries: What users search for
  • Documentation Downloads: PDFs and resources
  • User Interactions: Button clicks, form submissions

🛠 Usage Examples​

Track Custom Events​

import { useAnalytics } from '@site/src/components/Analytics';

function MyComponent() {
  const { trackEvent, trackLinkClick } = useAnalytics();

  const handleButtonClick = () => {
    trackEvent('button_click', {
      button_name: 'download_guide',
      page: 'wallet_integration',
    });
  };

  return (
    <button onClick={handleButtonClick}>
      Download Guide
    </button>
  );
}
import TrackedLink from '@site/src/components/TrackedLink';

function MyComponent() {
  return (
    <TrackedLink to="https://github.com/DataTom7/toto-wallet">
      View Source Code
    </TrackedLink>
  );
}

📊 Analytics Dashboard​

Key Metrics to Monitor​

User Engagement​

  • Page Views: Total documentation visits
  • Unique Visitors: Distinct users
  • Session Duration: Average time on site
  • Bounce Rate: Single-page sessions

Content Performance​

  • Most Popular Pages: Which docs are read most
  • Search Terms: What users are looking for
  • Exit Pages: Where users leave the site
  • Documentation Section Usage: Which sections are most popular

Technical Performance​

  • Core Web Vitals: LCP, FID, CLS scores
  • Page Load Times: Performance trends
  • Error Rates: 404s and other issues
  • Mobile vs Desktop: Device usage patterns

Custom Reports​

Documentation Effectiveness​

-- Most viewed documentation sections
SELECT 
  page_path,
  COUNT(*) as page_views,
  AVG(time_on_page) as avg_time
FROM analytics_events 
WHERE event_name = 'view_documentation_section'
GROUP BY page_path
ORDER BY page_views DESC;

User Journey Analysis​

-- User flow through documentation
SELECT 
  previous_page,
  current_page,
  COUNT(*) as transitions
FROM user_journey_events
GROUP BY previous_page, current_page
ORDER BY transitions DESC;

🔒 Privacy & Compliance​

Data Protection​

  • IP Anonymization: Enabled by default
  • GDPR Compliance: Respects user privacy preferences
  • Cookie Consent: Implement if required for your region
  • Data Retention: Configure appropriate retention periods

Privacy Policy​

Update your privacy policy to include:

  • Analytics data collection
  • Purpose of data collection
  • Data retention periods
  • User rights and opt-out options

🚀 Advanced Features​

A/B Testing​

Track different versions of documentation:

trackEvent('ab_test_view', {
  test_name: 'new_navigation',
  variant: 'experimental',
  page: location.pathname,
});

User Segmentation​

Track different user types:

trackEvent('user_segment', {
  segment: 'developer',
  experience_level: 'intermediate',
  primary_interest: 'wallet_integration',
});

Conversion Tracking​

Track documentation goals:

trackEvent('conversion', {
  goal: 'download_sdk',
  value: 1,
  currency: 'USD',
});

📋 Maintenance Checklist​

Monthly Tasks​

  • Review analytics reports
  • Check for broken links (404s)
  • Analyze search queries
  • Review performance metrics
  • Update tracking configuration if needed

Quarterly Tasks​

  • Audit tracking implementation
  • Review privacy compliance
  • Analyze user journey patterns
  • Optimize based on data insights
  • Update documentation based on popular searches

🆘 Troubleshooting​

Common Issues​

Analytics Not Working​

  1. Check tracking ID is correct in .env file
  2. Verify GA_TRACKING_ID environment variable is set
  3. Check browser console for errors
  4. Ensure no ad blockers are interfering
  5. Verify gtag is loaded in browser

Missing Events​

  1. Verify event tracking code
  2. Check network tab for requests
  3. Validate event parameters
  4. Test in incognito mode
  5. Check if tracking ID is properly configured

Performance Issues​

  1. Check Core Web Vitals
  2. Monitor page load times
  3. Review bundle sizes
  4. Optimize images and assets

Environment Variable Issues​

  1. Ensure .env file exists in docs-site directory
  2. Verify GA_TRACKING_ID is set correctly
  3. Restart development server after changing .env
  4. Check that .env is not in .gitignore

📞 Support​

For analytics support:

This analytics setup provides comprehensive insights into how users interact with the Toto documentation, helping to improve content and user experience.