Skip to main content

​
Overview

The Sunflower Capital website integrates two analytics solutions:
  • Vercel Analytics - Privacy-friendly, zero-config web vitals tracking
  • Google Analytics 4 - Comprehensive user behavior and traffic analysis

​
Current Implementation

Both analytics providers are integrated in the root layout:
src/app/layout.tsx
import { Analytics } from '@vercel/analytics/next';
import { GoogleAnalytics } from '@next/third-parties/google';

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`${inter.className} bg-offwhite`}>
        <main role="main" className="min-h-screen flex flex-col items-center justify-center">
          {children}
          <Analytics />
        </main>
        <GoogleAnalytics gaId="G-SR59L3T5LT" />
      </body>
    </html>
  );
}

​
Vercel Analytics

​
Features

Web Vitals

Track Core Web Vitals (LCP, FID, CLS)

Privacy-First

GDPR compliant, no cookies required

Zero Config

Works automatically on Vercel deployments

Real User Data

Monitor actual user experience metrics

​
Installation

The package is already installed:
package.json
{
  "dependencies": {
    "@vercel/analytics": "^1.5.0"
  }
}

​
Setup Steps

1

Component Already Integrated

The <Analytics /> component is already added to layout.tsx (line 96). No additional configuration needed!
2

Enable in Vercel Dashboard

  1. Go to your project in Vercel
  2. Navigate to “Analytics” tab
  3. Click “Enable Analytics”
  4. Free tier includes 1 million events/month
3

View Analytics

Analytics data appears in your Vercel dashboard after deployment:
  • Web Vitals scores
  • Page performance
  • Traffic by route
  • Geographic distribution
Vercel Analytics starts collecting data immediately after enabling. No code changes required beyond the initial <Analytics /> component.

​
Development Mode

By default, Vercel Analytics only runs in production. To enable in development:
Optional: Enable in Development
import { Analytics } from '@vercel/analytics/next';

<Analytics mode="development" />
Development mode tracking can inflate your event quota. Only enable for testing.

​
Google Analytics 4

​
Current Configuration

The site uses Google Analytics with ID: G-SR59L3T5LT
src/app/layout.tsx (line 98)
import { GoogleAnalytics } from '@next/third-parties/google';

<GoogleAnalytics gaId="G-SR59L3T5LT" />

​
Package Details

Using Next.js official Google Analytics integration:
package.json
{
  "dependencies": {
    "@next/third-parties": "^15.3.1"
  }
}
This package provides optimized, performance-friendly Google Analytics integration specifically designed for Next.js applications.
For better configuration management, consider moving the GA ID to an environment variable:
1

Update Layout Component

src/app/layout.tsx
<GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID!} />
2

Add Environment Variable Locally

Create .env.local in project root:
.env.local
NEXT_PUBLIC_GA_ID=G-SR59L3T5LT
3

Configure in Vercel

Add to Vercel project settings:
  1. Go to Project Settings → Environment Variables
  2. Add variable:
    • Key: NEXT_PUBLIC_GA_ID
    • Value: G-SR59L3T5LT
    • Environments: Production, Preview, Development
  3. Redeploy to apply changes
Environment variables starting with NEXT_PUBLIC_ are exposed to the browser. Never store sensitive data in them.

​
Features Tracked

With this integration, Google Analytics automatically tracks:
  • Page views (including SPA navigation)
  • User sessions and demographics
  • Traffic sources and referrals
  • Device and browser information
  • Geographic location
  • User engagement metrics

​
Viewing Analytics Data

1

Access Google Analytics

  1. Go to analytics.google.com
  2. Select your property (Sunflower Capital)
  3. View real-time and historical reports
2

Key Reports

Navigate to these useful reports:
  • Realtime → Monitor live visitors
  • Acquisition → Traffic sources
  • Engagement → Page views and events
  • Demographics → User characteristics

​
Privacy Considerations

Google Analytics 4 is GDPR compliant when properly configured:
  • Enable IP anonymization (enabled by default in GA4)
  • Add privacy policy link to your website
  • Consider adding cookie consent banner for EU visitors
  • Configure data retention settings in GA4 admin
In your GA4 property settings, review:
  • Data retention period (default: 2 months)
  • Google signals (cross-device tracking)
  • Data sharing settings
  • User deletion requests handling

​
Custom Events (Optional)

To track custom interactions, you can add events: 
'use client';

import { sendGAEvent } from '@next/third-parties/google';

export function ContactButton() {
  return (
    <button
      onClick={() => sendGAEvent('event', 'contact_click', {
        category: 'engagement',
        label: 'Contact Button'
      })}
    >
      Contact Us
    </button>
  );
}
Custom events require 'use client' directive since they involve browser interactions.

​
Performance Impact

Both analytics solutions are optimized for performance:

Vercel Analytics

  • ~1KB gzipped
  • No impact on Core Web Vitals
  • Loads asynchronously

Google Analytics

  • ~17KB with @next/third-parties
  • Script loaded with afterInteractive strategy
  • Minimal render-blocking

​
Troubleshooting

  • Verify Analytics is enabled in Vercel dashboard
  • Check that <Analytics /> component is in layout.tsx
  • Wait 24-48 hours for initial data collection
  • Ensure deployment is on Vercel (not local dev)
  • Verify GA ID is correct (G-SR59L3T5LT)
  • Check browser console for errors
  • Disable ad blockers when testing
  • View “Realtime” report in GA4 for immediate verification
  • Ensure @next/third-parties package is installed
Neither analytics service tracks development by default:
  • Vercel Analytics: Add mode="development" prop
  • Google Analytics: Will track but may be blocked by browser extensions
  • Consider using separate GA4 properties for dev/prod

​
Analytics Comparison

FeatureVercel AnalyticsGoogle Analytics 4
PrivacyCookieless, GDPR-friendlyCookie-based
SetupZero configRequires GA ID
Web VitalsBuilt-inManual setup needed
User JourneysLimitedComprehensive
Custom EventsBasicAdvanced
CostFree tier: 1M events/moFree (unlimited)
Data OwnershipVercelGoogle
Real-timeLimitedFull real-time dashboard
Using both provides the best of both worlds: privacy-friendly web vitals monitoring plus comprehensive user behavior analytics.

​
Next Steps

Vercel Deployment

Learn how to deploy to Vercel

Vercel Analytics Docs

Official Vercel Analytics documentation

GA4 Documentation

Google Analytics 4 help center

Next.js Third Parties

Optimize third-party scripts

Build docs developers (and LLMs) love

Get started for freeTalk to us