Code by Karun

Vibe Code to codebykarun.com: Dual Analytics Strategy (Part 10)

•10 min read
vibe codinganalyticsfirebasevercelweb development

Part 5 of 5 in Evolution & Growth • Previously: SEO Enhancement with Structured Data

After building the complete blog with SEO optimization, I had a working site. But I had no idea what was happening on it. Were people reading articles? Which ones? How long did they spend? Were they engaging with series?

I needed analytics. But not just page view counts—I wanted deep insights into user behavior while also monitoring core web vitals. This article documents how I added a dual analytics strategy through vibe coding.

The Problem: Understanding User Behavior

A blog without analytics is like driving with your eyes closed. You're moving, but you have no idea where you're going or if anyone's following.

I needed to answer questions like:

  • Which articles get the most engagement?
  • Do people actually read series in order?
  • How far do they scroll through articles?
  • What's the time spent on each post?
  • Are my web vitals good?
  • Is the site performing well?

Two tools emerged as the answer: Firebase Analytics for custom event tracking and Vercel Analytics for performance metrics.

The Dual Analytics Approach

Why Two Analytics Platforms?

Firebase Analytics excels at:

  • Custom event tracking
  • User behavior analysis
  • Detailed engagement metrics
  • Custom parameters and dimensions
  • Real-time event monitoring

Vercel Analytics excels at:

  • Core Web Vitals (LCP, FID, CLS)
  • Page load performance
  • Real-time visitor counts
  • Zero-configuration setup
  • Built-in Next.js integration

Together, they give you the complete picture: what users do and how well your site performs.

The Initial Request

My first prompt was straightforward:

"Based on this documentation @https://vercel.com/docs/analytics/quickstart#add-the-analytics-component-to-your-app add vercel analytics too"

Notice what I did:

  • Provided documentation URL
  • Gave clear, specific task
  • Expected seamless integration

I already had Firebase Analytics set up, so this was about adding complementary tracking.

Part 1: Vercel Analytics Integration

Step 1: Package Installation

The AI started by installing the package:

npm install @vercel/analytics

Simple. One dependency, no configuration needed.

Step 2: Adding the Component

Then it modified my root layout:

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

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <AnalyticsProvider>
          {children}
        </AnalyticsProvider>
        <DevThemeToggle />
        <CookieConsent />
        <Analytics /> {/* Added here */}
      </body>
    </html>
  );
}

That's it. Three lines of code (import + component) and Vercel Analytics is live.

What This Provides

Once enabled in the Vercel dashboard:

  • Automatic page view tracking
  • Core Web Vitals monitoring (LCP, FID, CLS, TTFB)
  • Real-time visitor counts
  • Performance insights
  • Geographic distribution

All without additional code. The <Analytics /> component handles everything.

Step 3: Dashboard Setup

The deployment checklist was updated with clear instructions:

### 3. Enable Vercel Web Analytics

1. Go to your Vercel dashboard
2. Select your project
3. Click the Analytics tab
4. Click Enable Web Analytics
5. Deploy your site

After deployment, requests to `/_vercel/insights/view` 
will start tracking page views and web vitals.

This is the vibe coding pattern: document as you build.

Part 2: Firebase Analytics (The Deep Dive)

While Vercel Analytics handles the basics, Firebase gives you surgical precision on user behavior.

Custom Event Tracking

I wanted to track specific interactions:

Article Reading Behavior:

// When article loads
logEvent(analytics, 'article_view', {
  article_slug: slug,
  article_title: title,
  category: category,
});

// When user scrolls significantly
logEvent(analytics, 'article_read', {
  article_slug: slug,
  scroll_depth: 75,
  time_spent: timeInSeconds,
});

Link Click Tracking:

// When user clicks article card
onClick={() => {
  logEvent(analytics, 'link_click', {
    link_type: 'article_card',
    destination: slug,
    source_page: 'home',
  });
}}

Series Engagement:

// When series page loads
logEvent(analytics, 'series_view', {
  series_id: seriesId,
  series_title: title,
  total_articles: articleCount,
});

This level of detail is impossible with basic analytics tools.

Here's where it gets interesting. You can't just start tracking users in 2024—you need consent.

The AI implemented a cookie consent banner:

const CookieConsent = () => {
  const { setConsent } = useAnalytics();
  const [showBanner, setShowBanner] = useState(false);

  const handleAccept = () => {
    setConsent(true);
    setShowBanner(false);
    // Analytics automatically enabled
  };

  const handleDecline = () => {
    setConsent(false);
    setShowBanner(false);
    // Analytics stays disabled
  };

  // Show banner if no consent decision made
  return showBanner ? (
    <div className="cookie-banner">
      {/* Banner UI */}
    </div>
  ) : null;
};

Key features:

  • Stores decision in localStorage
  • Respects user choice
  • Only tracks after explicit consent
  • GDPR/CCPA compliant approach

The Analytics Hook Pattern

The most elegant part was the useAnalytics hook:

export const useAnalytics = () => {
  const [hasConsent, setHasConsent] = useState<boolean | null>(null);

  useEffect(() => {
    // Check for saved consent
    const savedConsent = localStorage.getItem('analytics-consent');
    if (savedConsent) {
      setHasConsent(savedConsent === 'true');
    } else {
      setHasConsent(null); // Show banner
    }
  }, []);

  const setConsent = (consent: boolean) => {
    localStorage.setItem('analytics-consent', String(consent));
    setHasConsent(consent);
  };

  const trackEvent = (eventName: string, params?: Record<string, any>) => {
    if (hasConsent && analytics) {
      logEvent(analytics, eventName, params);
    }
  };

  return { hasConsent, setConsent, trackEvent };
};

Why this pattern is brilliant:

  • Single source of truth for consent
  • All tracking respects user choice
  • Easy to use throughout the app
  • Handles initialization timing
  • Prevents tracking before consent

Real-World Usage Example

Here's how tracking works in an article page:

export default function ArticlePage({ params }) {
  const { trackEvent } = useAnalytics();

  useEffect(() => {
    // Track article view
    trackEvent('article_view', {
      article_slug: params.slug,
      category: 'coding',
    });

    // Track reading progress
    const handleScroll = () => {
      const scrollPercent = calculateScrollDepth();
      if (scrollPercent > 75) {
        trackEvent('article_read', {
          article_slug: params.slug,
          scroll_depth: scrollPercent,
        });
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return <article>{/* Content */}</article>;
}

What gets tracked:

  • Initial article view (page load)
  • Scroll depth milestones
  • Time spent on page
  • Exit points
  • Series progression

All while respecting user consent.

The Prompts That Made It Happen

Here's the conversational flow that built this:

Prompt 1: Initial Setup

"Based on this documentation @https://vercel.com/docs/analytics/quickstart add vercel analytics too"

Result: Package installed, component added, deployment docs updated.

Prompt 2: Firebase Integration (Earlier)

"Add Firebase Analytics to track user behavior with custom events for articles, series, and interactions. Include cookie consent."

Result: Complete Firebase setup with consent management.

Prompt 3: Custom Events

"Track article views, scroll depth, time spent, and link clicks with appropriate parameters."

Result: Comprehensive event tracking with meaningful data.

Prompt 4: Documentation

"Based on our conversation add a new blog for Analytics integration firebase and vercel. This can be a separate article hooked into vibe coding journey. add prompts and keep this 4-5 min read."

Result: This article you're reading right now.

What This Analytics Stack Provides

From Vercel Analytics

  • Real-time visitor count
  • Core Web Vitals monitoring
  • Page load performance
  • Geographic distribution
  • Device/browser breakdown

From Firebase Analytics

  • Custom event tracking
  • User engagement patterns
  • Reading behavior analysis
  • Series progression tracking
  • Link click analysis
  • Session duration
  • Scroll depth metrics

Combined Insights

You can correlate performance with behavior:

  • Do slow pages get less engagement?
  • Which high-traffic pages need optimization?
  • Are users bouncing from slow-loading content?
  • How do web vitals affect reading time?

The Implementation Timeline

Total time from start to working analytics:

Vercel Analytics: ~2 minutes

  • Install package
  • Add component
  • Deploy

Firebase Analytics: ~15 minutes

  • Firebase project setup
  • Environment variables
  • Custom event implementation
  • Cookie consent banner
  • Testing

Total: Under 20 minutes for both platforms.

That's the power of vibe coding: From "I need analytics" to "I have comprehensive tracking" in one conversation.

Testing Your Analytics

Vercel Analytics

  1. Deploy to Vercel
  2. Visit your site
  3. Open DevTools → Network tab
  4. Look for /_vercel/insights/view requests
  5. Check Vercel dashboard after a few minutes

Firebase Analytics

  1. Accept cookie consent
  2. Navigate through your site
  3. Open Firebase Console → Analytics → DebugView
  4. See events in real-time
  5. Check Events tab after 24 hours for aggregated data

Privacy Considerations

Both platforms are privacy-conscious:

Vercel Analytics:

  • No cookies
  • No personal data collection
  • GDPR compliant
  • Aggregated metrics only

Firebase Analytics:

  • Cookie consent required
  • Anonymous user IDs
  • No PII collected
  • Respects user opt-out
  • GDPR/CCPA compliant when implemented correctly

The cookie consent banner ensures you're respecting user privacy.

Key Takeaways

  1. Use complementary tools

    • Vercel for performance
    • Firebase for behavior
    • Together = complete picture

  2. Respect user privacy

    • Always get consent
    • Make it easy to opt-out
    • Don't track before permission

  3. Track what matters

    • Page views are basic
    • Custom events tell the story
    • Scroll depth shows engagement
    • Time spent reveals quality

  4. Vibe coding for infrastructure

    • Analytics isn't just for features
    • Infrastructure benefits from conversational development
    • Documentation and implementation happen together

  5. Start simple, grow complex

    • Vercel Analytics: 2 minutes, zero config
    • Firebase Analytics: Add when you need detail
    • Both work independently
    • Both work together

What's Next?

With analytics in place, I can now:

  • See which articles resonate
  • Understand series engagement
  • Monitor site performance
  • Make data-driven decisions
  • Optimize based on real behavior

The blog isn't just live—it's observable.

The Complete Stack

Here's everything Code by Karun tracks:

✅ Page views (Vercel + Firebase)
✅ Core Web Vitals (Vercel)
✅ Article views (Firebase)
✅ Scroll depth (Firebase)
✅ Time spent (Firebase)
✅ Link clicks (Firebase)
✅ Series views (Firebase)
✅ Geographic distribution (Vercel)
✅ Performance metrics (Vercel)
✅ User consent (Custom)
✅ Privacy compliance (Built-in)

Total setup time: ~20 minutes of conversation.

Conclusion

Analytics doesn't have to be overwhelming. With the right approach:

  • Setup is measured in minutes, not hours
  • Privacy is built-in, not bolted on
  • Insights are actionable, not just numbers
  • Implementation respects user choice

Two platforms, one comprehensive analytics strategy, built through vibe coding.

Now every visitor, every read, every interaction tells me something. The site performs well (Vercel confirms it), users engage deeply (Firebase shows it), and privacy is respected (consent proves it).

That's how you do analytics in 2024.

The Complete Journey

This concludes the Building codebykarun.com series. Across two series (Foundation and Evolution & Growth), we've documented the complete journey:

Part 1: The Foundation (5 articles)

  • Vibe coding philosophy
  • Tech stack selection
  • Initial hour of development
  • MDX content pipeline
  • Design system creation

Part 2: Evolution & Growth (5 articles)

  • Lessons learned in production
  • Best practices and templates
  • Series feature implementation
  • SEO with structured data
  • Comprehensive analytics

From concept to launch to iteration to optimization to observation—all documented through vibe coding. The complete journey of building a modern blog, one conversation at a time.

Want to see it in action? Visit Code by Karun, check your browser's Network tab for /_vercel/insights/view, and notice the cookie consent banner. That's dual analytics, respecting your privacy while tracking what matters.

Ready to start your own vibe coding journey? Go back to Part 1: What is Vibe Coding? and begin your own transformation.