Analytics Setup

Overview

Guigolo includes built-in support for three analytics services:

Google Analytics - Comprehensive traffic and user behavior tracking
Hotjar - Session recordings and heatmaps
Vercel Analytics - Real-time visitor and performance metrics

All analytics scripts are conditionally loaded only in production to avoid tracking development traffic.

Google Analytics Setup

Google Analytics provides detailed insights into your portfolio traffic, user behavior, and acquisition channels.

Create GA4 property

Go to Google Analytics
Click Admin (gear icon) → Create Property
Enter your property name and configure settings
Create a Web data stream

Get your Measurement ID

In your data stream settings, find the Measurement ID
It looks like G-XXXXXXXXXX
Copy this ID

Add to environment variables

Add your Measurement ID to your environment variables:Local development (.env.local):

NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX

Vercel:

Go to Project Settings → Environment Variables
Add NEXT_PUBLIC_GA_ID with your measurement ID
Select Production, Preview, and Development
Save and redeploy

Verify installation

After deploying to production:

Visit your live site
Open Google Analytics → Reports → Realtime
You should see your visit in real-time

Implementation Details

Google Analytics is integrated in app/layout.tsx:93-113:

app/layout.tsx

const isProd = process.env.VERCEL_ENV === "production";
const GA_ID = process.env.NEXT_PUBLIC_GA_ID;

{isProd && GA_ID ? (
  <>
    <Script
      src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`}
      strategy="afterInteractive"
    />
    <Script
      id="ga-init"
      strategy="afterInteractive"
      dangerouslySetInnerHTML={{
        __html: `
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', '${GA_ID}');
        `,
      }}
    />
  </>
) : null}

The strategy="afterInteractive" ensures analytics scripts load after the page becomes interactive, optimizing performance.

Hotjar Setup

Hotjar provides heatmaps, session recordings, and user feedback tools to understand how visitors interact with your portfolio.

Create Hotjar account

Sign up at Hotjar
Create a new site
Enter your domain name

Get your Site ID

In Sites & Organizations, find your site
Copy the Site ID (numeric value)
Note the script version (usually 6)

Configure environment variables

Add both Hotjar variables:Local development (.env.local):

NEXT_PUBLIC_HJ_ID=1234567
NEXT_PUBLIC_HJ_SV=6

Vercel:

Add NEXT_PUBLIC_HJ_ID with your site ID
Add NEXT_PUBLIC_HJ_SV with value 6 (or current version)
Select all environments and save

Verify installation

Deploy to production
Visit your site
Open browser console and look for Hotjar initialization
Check Hotjar dashboard for the green “Tracking” status

Implementation Details

Hotjar is integrated in app/layout.tsx:115-133:

app/layout.tsx

const HJ_ID = process.env.NEXT_PUBLIC_HJ_ID;
const HJ_SV = process.env.NEXT_PUBLIC_HJ_SV || "6";

{isProd && HJ_ID ? (
  <Script
    id="hotjar-init"
    strategy="afterInteractive"
    dangerouslySetInnerHTML={{
      __html: `
        (function(h,o,t,j,a,r){
          h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
          h._hjSettings={hjid:${HJ_ID},hjsv:${HJ_SV}};
          a=o.getElementsByTagName('head')[0];
          r=o.createElement('script');r.async=1;
          r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
          a.appendChild(r);
        })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
      `,
    }}
  />
) : null}

The HJ_SV variable has a default value of "6", so you only need to set NEXT_PUBLIC_HJ_ID if you’re using the current script version.

Vercel Analytics

Vercel Analytics provides real-time visitor metrics and Web Vitals tracking without cookies or configuration.

Setup

Vercel Analytics is already integrated via the @vercel/analytics package in app/layout.tsx:4,135:

app/layout.tsx

import { Analytics } from "@vercel/analytics/next";

// In the component:
<Analytics />

Enable in Vercel dashboard

Go to your project in Vercel
Navigate to Analytics tab
Click “Enable Analytics”

Deploy

Analytics will start tracking immediately after your next deployment.

View data

Access analytics in the Vercel dashboard:

Total visitors
Top pages
Top referrers
Web Vitals (LCP, FID, CLS)

Features

No configuration required - Works out of the box
Real-time data - See visitors as they arrive
Privacy-friendly - No cookies, GDPR compliant
Web Vitals tracking - Monitor Core Web Vitals
Unlimited events - No quota or sampling

Vercel Analytics is included free for all Vercel deployments. Unlike GA and Hotjar, it loads in all environments (production and preview).

Production-Only Loading

Analytics scripts are conditionally loaded based on the environment:

app/layout.tsx

const isProd = process.env.VERCEL_ENV === "production";

This prevents:

Tracking your own development activity
Inflating visitor counts during testing
Running analytics scripts in preview deployments

Environment Detection

Vercel automatically sets the VERCEL_ENV variable:

Environment	`VERCEL_ENV` Value	Analytics Load?
Production	`production`	✅ Yes (GA, Hotjar)
Preview	`preview`	❌ No (GA, Hotjar)
Development	`development`	❌ No (GA, Hotjar)
All	Any	✅ Yes (Vercel Analytics)

Viewing Analytics Data

Google Analytics

Key reports to monitor: Realtime Overview
See current visitors and what they’re viewing right now. Traffic Acquisition
Understand where visitors come from (your redirect links, organic search, direct, etc.). Pages and Screens
Identify which projects and pages get the most views. Events
Track user interactions if you add custom event tracking.

The redirect rules in next.config.ts automatically add UTM parameters, making it easy to track which social profiles drive traffic. Check the Source/Medium report.

Hotjar

Recordings
Watch session replays to see how users navigate your portfolio. Heatmaps
Visual representation of where users click, move, and scroll. Feedback
Collect direct feedback from visitors (requires additional setup).

Hotjar has different pricing tiers based on daily sessions. The free tier includes 35 daily sessions, which may be sufficient for personal portfolios.

Vercel Analytics

Access in Vercel dashboard: Visitors
Real-time and historical visitor counts. Top Pages
Most visited pages on your site. Top Referrers
Sites sending traffic to your portfolio. Web Vitals
Performance metrics (LCP, FID, CLS, TTFB).

Best Practices

Test before deploying

Verify analytics load correctly by:

Deploying to production
Visiting your site in incognito mode
Checking browser console for script loads
Confirming data appears in each dashboard

Set up goals and conversions

In Google Analytics, create goals for:

Project page views
External link clicks (case studies, live sites)
Time on page benchmarks

Monitor Web Vitals

Use Vercel Analytics to track Core Web Vitals and maintain good performance scores.

Respect privacy

Consider adding a privacy policy that mentions:

Google Analytics usage
Hotjar session recording
User data handling practices

Troubleshooting

Analytics Not Loading

Check environment variables are set correctly

# In Vercel, verify variables are present
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX
NEXT_PUBLIC_HJ_ID=1234567

Verify you’re in production Analytics only load when VERCEL_ENV === "production". Preview deployments won’t load GA or Hotjar.
Check browser console Look for:
- Google Analytics gtag initialization
- Hotjar hj object in window
- Any script loading errors
Clear cache and test in incognito Browser extensions and cache can block analytics scripts.

Data Not Appearing in Dashboards

Google Analytics:

Wait 24-48 hours for data to populate historical reports
Check Realtime report for immediate verification
Verify the Measurement ID matches your property

Hotjar:

Check tracking status shows “Active” in dashboard
Verify your domain matches the configured site
Some browsers block Hotjar by default

Vercel Analytics:

Enable Analytics in Vercel project settings
Wait a few minutes for data to appear
Refresh the Analytics dashboard

Get Started

Core Concepts

Components

Guides

Analytics Setup

Overview

Google Analytics Setup

Implementation Details

Hotjar Setup

Implementation Details

Vercel Analytics

Setup

Features

Production-Only Loading

Environment Detection

Viewing Analytics Data

Google Analytics

Hotjar

Vercel Analytics

Best Practices

Troubleshooting

Analytics Not Loading

Data Not Appearing in Dashboards

Build docs developers (and LLMs) love

Get Started

Core Concepts

Components

Guides

​Overview

​Google Analytics Setup

​Implementation Details

​Hotjar Setup

​Implementation Details

​Vercel Analytics

​Setup

​Features

​Production-Only Loading

​Environment Detection

​Viewing Analytics Data

​Google Analytics

​Hotjar

​Vercel Analytics

​Best Practices

​Troubleshooting

​Analytics Not Loading

​Data Not Appearing in Dashboards

Build docs developers (and LLMs) love

Overview

Google Analytics Setup

Implementation Details

Hotjar Setup

Implementation Details

Vercel Analytics

Setup

Features

Production-Only Loading

Environment Detection

Viewing Analytics Data

Google Analytics

Hotjar

Vercel Analytics

Best Practices

Troubleshooting

Analytics Not Loading

Data Not Appearing in Dashboards