Platform.do logo
Back

Analytics & Tracking Setup

Track conversions and optimize your waitlist performance with analytics

AnalyticsOptimization

Analytics & Tracking Setup

Learn how to track key metrics and optimize your waitlist conversion rates with proper analytics implementation.

Setting Up Google Analytics

First, add Google Analytics to your Next.js application:

// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <Script
          src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_ID}`}
          strategy="afterInteractive"
        />
        <Script id="google-analytics" strategy="afterInteractive">
          {`
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${process.env.NEXT_PUBLIC_GA_ID}');
          `}
        </Script>
      </head>
      <body>{children}</body>
    </html>
  );
}

Tracking Conversions

Create a utility to track important events:

// lib/analytics.ts
export const trackEvent = (action: string, category: string, label?: string, value?: number) => {
  if (typeof window !== 'undefined' && window.gtag) {
    window.gtag('event', action, {
      event_category: category,
      event_label: label,
      value: value,
    })
  }
}

export const trackWaitlistSignup = (source: string) => {
  trackEvent('signup', 'Waitlist', source)
}

Implementing Event Tracking

Add tracking to your waitlist form:

// components/WaitlistForm.tsx
'use client';

import { trackWaitlistSignup } from '@/lib/analytics';

export default function WaitlistForm({ source }: { source: string }) {
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    // Submit form
    const response = await fetch('/api/waitlist', {
      method: 'POST',
      body: JSON.stringify({ email, source })
    });

    if (response.ok) {
      // Track successful signup
      trackWaitlistSignup(source);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* Form fields */}
    </form>
  );
}

Custom Dashboard

Create a simple analytics dashboard:

// app/dashboard/page.tsx
import { getWaitlistStats } from '@/lib/database';

export default async function Dashboard() {
  const stats = await getWaitlistStats();

  return (
    <div className="grid grid-cols-3 gap-4">
      <div className="p-6 border rounded-lg">
        <h3>Total Signups</h3>
        <p className="text-4xl font-bold">{stats.total}</p>
      </div>
      <div className="p-6 border rounded-lg">
        <h3>Today</h3>
        <p className="text-4xl font-bold">{stats.today}</p>
      </div>
      <div className="p-6 border rounded-lg">
        <h3>Conversion Rate</h3>
        <p className="text-4xl font-bold">{stats.conversionRate}%</p>
      </div>
    </div>
  );
}

Key Metrics to Track

Monitor these essential metrics:

  • Conversion Rate: Visitors who sign up
  • Source Attribution: Where signups come from
  • Time to Convert: How long visitors stay before signing up
  • Drop-off Points: Where users abandon the form
  • Email Verification Rate: Percentage of verified emails

With proper analytics, you can continuously improve your waitlist performance!

Limited Access

Build Your Waitlist

Create beautiful, high-converting waitlist pages in minutes. Join thousands already on the list.

Get Early Access

Read more

Email Integration Guide

Connect your waitlist to popular email services and automate your workflow

Custom Styling Your Autonomous Business Services

Transform your Services-as-Software into unique brand experiences with semantic patterns and the .do platform

Getting Started with Waitlist.do

Learn how to set up your first waitlist in minutes