Powering SaaS, startups, and agencies with web analytics that fuel smarter marketing

import React, { useEffect, useState } from 'react';
import { AnalyticsClient } from '@analytics/core';

// Create a new client instance
const client = new AnalyticsClient({
  apiKey: process.env.ANALYTICS_API_KEY,
  endpoint: 'https://api.analytics.com/v1'
});

export default function Analytics() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    async function fetchData() {
      try {
        // This single line is all you need
        const results = await client.query({
          metrics: ['visitors', 'pageviews', 'bounce_rate'],
          dimensions: ['page', 'referrer', 'browser'],
          timeframe: 'last_30_days'
        });
        
        setData(results);
      } catch (error) {
        console.error('Error fetching analytics:', error);
      } finally {
        setLoading(false);
      }
    }
    
    fetchData();
  }, []);
  
  if (loading) return <div>Loading analytics...</div>;
  
  return (
    <div className="analytics-dashboard">
      {/* Your visualization components */}
    </div>
  );
}