v0 by Vercel

How to Integrate with Google Analytics Data API

To fetch real data from Google Analytics, you'll need to:

Set up Google Analytics API access:

Enable the Google Analytics Data API in Google Cloud Console
Create OAuth credentials or a service account
Grant appropriate permissions to access your GA data

Implement server-side authentication:

Store your credentials securely (use environment variables)
Implement the OAuth flow or service account authentication
Handle token refresh and storage

Create API endpoints to fetch data:

Build route handlers that query the GA Data API
Implement date range filtering and other parameters
Format the data for your frontend components

Here's how you would implement the actual Google Analytics API integration:

// lib/google-analytics.ts
import { google } from 'googleapis'

// Initialize the Analytics Data API client
export async function initializeAnalyticsClient() {
  // For service account authentication
  const auth = new google.auth.GoogleAuth({
    credentials: {
      client_email: process.env.GOOGLE_CLIENT_EMAIL,
      private_key: process.env.GOOGLE_PRIVATE_KEY?.replace(/\\n/g, '\n'),
    },
    scopes: ['https://www.googleapis.com/auth/analytics.readonly'],
  })

  const analyticsDataClient = google.analyticsdata({
    version: 'v1beta',
    auth,
  })

  return analyticsDataClient
}

export async function getAnalyticsData(propertyId: string, startDate: string, endDate: string) {
  const analyticsDataClient = await initializeAnalyticsClient()
  
  // Example request for visitor metrics
  const response = await analyticsDataClient.properties.runReport({
    property: `properties/${propertyId}`,
    requestBody: {
      dateRanges: [{ startDate, endDate }],
      dimensions: [{ name: 'date' }],
      metrics: [
        { name: 'activeUsers' },
        { name: 'screenPageViews' },
        { name: 'sessions' },
        { name: 'bounceRate' },
      ],
    },
  })

  // Process and format the response data
  return processAnalyticsResponse(response.data)
}

function processAnalyticsResponse(data: any) {
  // Transform the API response into the format expected by your frontend
  // ...
}

File Structure

For a complete Google Analytics dashboard, I recommend this file structure:

├── app/
│   ├── api/
│   │   ├── analytics/
│   │   │   └── route.ts
│   │   └── auth/
│   │       └── google/
│   │           └── route.ts
│   ├── dashboard/
│   │   ├── acquisition/
│   │   │   └── page.tsx
│   │   ├── audience/
│   │   │   └── page.tsx
│   │   ├── behavior/
│   │   │   └── page.tsx
│   │   ├── real-time/
│   │   │   └── page.tsx
│   │   ├── settings/
│   │   │   └── page.tsx
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   ├── analytics-dashboard.tsx
│   ├── dashboard-header.tsx
│   ├── dashboard-sidebar.tsx
│   ├── date-range-picker.tsx
│   └── ui/
│       └── ... (shadcn components)
├── lib/
│   ├── analytics.ts
│   ├── google-analytics.ts
│   └── utils.ts

This structure separates concerns and makes your code maintainable as the dashboard grows.

To deploy this dashboard, you'll need to:

Set up environment variables for your Google Analytics credentials

Deploy to Vercel or your preferred hosting platform

Configure proper authentication and authorization for your admin panel

Let me know if you need more specific implementation details for any part of this solution!

Google Analytics Dashboard for Admin Panel

I'll help you create a dashboard that fetches and displays Google Analytics data in your admin panel. Let's build a Next.js application with a clean admin interface that shows key metrics from your Google Analytics account.

Solution Overview

We'll create:

A server-side authentication flow with Google
API routes to fetch Google Analytics data
A dashboard UI to display the analytics
Charts and visualizations for key metrics

Let's start with the implementation: