Conversion Rate Optimization (CRO)

Meta-Description: Conversion Rate Optimization für SaaS. Landing Pages, User Funnels, Micro-Conversions und datengetriebene Optimierung.

Keywords: CRO, Conversion Rate, Landing Page, User Funnel, Micro-Conversions, UX Optimization, Growth Hacking

Einführung

Conversion Rate Optimization (CRO) maximiert den Wert bestehenden Traffics. Statt mehr Besucher zu kaufen, werden bestehende Nutzer besser konvertiert. Dieser Guide zeigt systematische Ansätze für Landing Pages, Funnels und Micro-Conversions.

CRO Overview

┌─────────────────────────────────────────────────────────────┐
│              CONVERSION OPTIMIZATION FUNNEL                  │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  TOFU (Top of Funnel):                                     │
│  ┌─────────────────────────────────────────────────────┐   │
│  │  Awareness → Interest                               │   │
│  │  ├── Landing Page Views                            │   │
│  │  ├── Blog Post Reads                               │   │
│  │  ├── Social Media Clicks                           │   │
│  │  └── Target: Reduce Bounce Rate                    │   │
│  └─────────────────────────────────────────────────────┘   │
│                           ↓                                 │
│  MOFU (Middle of Funnel):                                  │
│  ┌─────────────────────────────────────────────────────┐   │
│  │  Consideration → Intent                             │   │
│  │  ├── Email Signups                                 │   │
│  │  ├── Free Trial Starts                             │   │
│  │  ├── Demo Requests                                 │   │
│  │  └── Target: Increase Lead Quality                 │   │
│  └─────────────────────────────────────────────────────┘   │
│                           ↓                                 │
│  BOFU (Bottom of Funnel):                                  │
│  ┌─────────────────────────────────────────────────────┐   │
│  │  Purchase → Retention                               │   │
│  │  ├── Trial to Paid Conversion                      │   │
│  │  ├── Checkout Completion                           │   │
│  │  ├── Upsells / Cross-sells                         │   │
│  │  └── Target: Maximize Revenue                      │   │
│  └─────────────────────────────────────────────────────┘   │
│                                                             │
│  Key Metrics:                                               │
│  ├── Conversion Rate = Conversions / Visitors × 100        │
│  ├── Micro-Conversion Rate (Email, Trial, etc.)            │
│  ├── Revenue per Visitor (RPV)                             │
│  └── Customer Acquisition Cost (CAC)                       │
│                                                             │
└─────────────────────────────────────────────────────────────┘

Landing Page Optimization

// components/landing/OptimizedHero.tsx
'use client';

import { useState } from 'react';
import { track } from '@/lib/analytics';

interface HeroProps {
  headline: string;
  subheadline: string;
  ctaText: string;
  ctaUrl: string;
  trustBadges: string[];
  videoUrl?: string;
}

export function OptimizedHero({
  headline,
  subheadline,
  ctaText,
  ctaUrl,
  trustBadges,
  videoUrl
}: HeroProps) {
  const [videoPlaying, setVideoPlaying] = useState(false);

  const handleCTAClick = () => {
    track('hero_cta_clicked', {
      headline,
      ctaText
    });
  };

  const handleVideoPlay = () => {
    setVideoPlaying(true);
    track('hero_video_played');
  };

  return (
    <section className="relative py-20 lg:py-32">
      <div className="container mx-auto px-4">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          {/* Copy Side */}
          <div className="space-y-6">
            {/* Social Proof Mini */}
            <div className="flex items-center gap-2 text-sm text-gray-600">
              <span className="flex -space-x-2">
                {[1, 2, 3, 4, 5].map(i => (
                  <img
                    key={i}
                    src={`/avatars/${i}.jpg`}
                    alt=""
                    className="w-8 h-8 rounded-full border-2 border-white"
                  />
                ))}
              </span>
              <span>Join 10,000+ happy customers</span>
            </div>

            {/* Headline - Max 6 words */}
            <h1 className="text-4xl lg:text-6xl font-bold leading-tight">
              {headline}
            </h1>

            {/* Subheadline - Benefits focused */}
            <p className="text-xl text-gray-600 max-w-lg">
              {subheadline}
            </p>

            {/* CTA Group */}
            <div className="flex flex-col sm:flex-row gap-4">
              <a
                href={ctaUrl}
                onClick={handleCTAClick}
                className="btn-primary text-lg px-8 py-4 text-center"
              >
                {ctaText}
              </a>
              <span className="text-sm text-gray-500 self-center">
                No credit card required
              </span>
            </div>

            {/* Trust Badges */}
            <div className="flex flex-wrap gap-4 pt-4">
              {trustBadges.map((badge, i) => (
                <div
                  key={i}
                  className="flex items-center gap-2 text-sm text-gray-600"
                >
                  <CheckIcon className="w-5 h-5 text-green-500" />
                  {badge}
                </div>
              ))}
            </div>
          </div>

          {/* Visual Side */}
          <div className="relative">
            {videoUrl ? (
              <VideoPlayer
                url={videoUrl}
                onPlay={handleVideoPlay}
                playing={videoPlaying}
              />
            ) : (
              <img
                src="/hero-image.webp"
                alt="Product screenshot"
                className="rounded-lg shadow-2xl"
              />
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

// components/landing/SocialProof.tsx
interface Testimonial {
  quote: string;
  author: string;
  role: string;
  company: string;
  avatar: string;
  logo: string;
  metric?: string;
}

export function SocialProofSection({
  testimonials
}: {
  testimonials: Testimonial[]
}) {
  return (
    <section className="py-20 bg-gray-50">
      <div className="container mx-auto px-4">
        {/* Logos Bar */}
        <div className="text-center mb-12">
          <p className="text-sm text-gray-500 mb-6">
            Trusted by leading companies
          </p>
          <div className="flex flex-wrap justify-center items-center gap-8 opacity-60">
            {testimonials.map((t, i) => (
              <img
                key={i}
                src={t.logo}
                alt={t.company}
                className="h-8 grayscale hover:grayscale-0 transition"
              />
            ))}
          </div>
        </div>

        {/* Testimonials Grid */}
        <div className="grid md:grid-cols-3 gap-8">
          {testimonials.map((testimonial, i) => (
            <TestimonialCard key={i} {...testimonial} />
          ))}
        </div>

        {/* Aggregate Stats */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mt-16 text-center">
          <Stat value="10,000+" label="Active Users" />
          <Stat value="99.9%" label="Uptime" />
          <Stat value="4.9/5" label="Customer Rating" />
          <Stat value="24/7" label="Support" />
        </div>
      </div>
    </section>
  );
}

function TestimonialCard({
  quote,
  author,
  role,
  company,
  avatar,
  metric
}: Testimonial) {
  return (
    <div className="bg-white p-6 rounded-xl shadow-sm">
      {metric && (
        <div className="text-3xl font-bold text-blue-600 mb-4">
          {metric}
        </div>
      )}
      <blockquote className="text-gray-700 mb-4">
        "{quote}"
      </blockquote>
      <div className="flex items-center gap-3">
        <img
          src={avatar}
          alt={author}
          className="w-12 h-12 rounded-full"
        />
        <div>
          <div className="font-semibold">{author}</div>
          <div className="text-sm text-gray-500">{role}, {company}</div>
        </div>
      </div>
    </div>
  );
}

Funnel Tracking

// lib/cro/funnel.ts
export interface FunnelStep {
  id: string;
  name: string;
  pagePattern: string | RegExp;
  requiredEvents?: string[];
}

export interface FunnelConfig {
  id: string;
  name: string;
  steps: FunnelStep[];
}

export const signupFunnel: FunnelConfig = {
  id: 'signup',
  name: 'Signup Funnel',
  steps: [
    { id: 'landing', name: 'Landing Page', pagePattern: '/' },
    { id: 'pricing', name: 'Pricing Page', pagePattern: '/pricing' },
    { id: 'signup-start', name: 'Signup Started', pagePattern: '/signup', requiredEvents: ['signup_form_viewed'] },
    { id: 'signup-complete', name: 'Signup Complete', pagePattern: '/welcome', requiredEvents: ['signup_completed'] },
    { id: 'onboarding', name: 'Onboarding', pagePattern: '/onboarding' },
    { id: 'activated', name: 'Activated', pagePattern: '/dashboard', requiredEvents: ['first_action_completed'] }
  ]
};

// Funnel Analytics
export async function getFunnelAnalytics(
  funnelId: string,
  startDate: Date,
  endDate: Date
): Promise<FunnelAnalytics> {
  const funnel = funnels.get(funnelId);
  if (!funnel) throw new Error(`Funnel ${funnelId} not found`);

  const stepData = await Promise.all(
    funnel.steps.map(async (step, index) => {
      const count = await getStepCount(step, startDate, endDate);
      const previousCount = index > 0
        ? await getStepCount(funnel.steps[index - 1], startDate, endDate)
        : count;

      return {
        step: step.name,
        count,
        conversionRate: previousCount > 0 ? (count / previousCount) * 100 : 100,
        dropoffRate: previousCount > 0 ? ((previousCount - count) / previousCount) * 100 : 0
      };
    })
  );

  const overallConversion = stepData[0].count > 0
    ? (stepData[stepData.length - 1].count / stepData[0].count) * 100
    : 0;

  return {
    funnel: funnel.name,
    period: { start: startDate, end: endDate },
    steps: stepData,
    overallConversion
  };
}

// components/analytics/FunnelVisualization.tsx
'use client';

interface FunnelStep {
  step: string;
  count: number;
  conversionRate: number;
  dropoffRate: number;
}

export function FunnelVisualization({ steps }: { steps: FunnelStep[] }) {
  const maxCount = Math.max(...steps.map(s => s.count));

  return (
    <div className="space-y-4">
      {steps.map((step, index) => {
        const width = (step.count / maxCount) * 100;
        const isLastStep = index === steps.length - 1;

        return (
          <div key={step.step} className="relative">
            {/* Step Bar */}
            <div className="flex items-center gap-4">
              <div className="w-32 text-sm font-medium">{step.step}</div>
              <div className="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
                <div
                  className="h-full bg-blue-500 flex items-center justify-end px-4 transition-all"
                  style={{ width: `${width}%` }}
                >
                  <span className="text-white font-semibold">
                    {step.count.toLocaleString()}
                  </span>
                </div>
              </div>
              <div className="w-20 text-right">
                <span className={`text-sm font-medium ${
                  step.conversionRate >= 50 ? 'text-green-600' : 'text-red-600'
                }`}>
                  {step.conversionRate.toFixed(1)}%
                </span>
              </div>
            </div>

            {/* Dropoff Indicator */}
            {!isLastStep && step.dropoffRate > 0 && (
              <div className="ml-32 pl-4 py-2 text-sm text-red-500">
                ↳ {step.dropoffRate.toFixed(1)}% dropoff ({Math.round(step.count * step.dropoffRate / 100).toLocaleString()} users)
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

Micro-Conversions

// lib/cro/micro-conversions.ts
export const microConversions = {
  engagement: [
    { id: 'scroll_depth_50', name: 'Scrolled 50%', weight: 1 },
    { id: 'scroll_depth_90', name: 'Scrolled 90%', weight: 2 },
    { id: 'time_on_page_60s', name: '60s on page', weight: 2 },
    { id: 'video_played', name: 'Video Played', weight: 3 },
    { id: 'video_completed', name: 'Video Completed', weight: 5 }
  ],
  intent: [
    { id: 'pricing_viewed', name: 'Viewed Pricing', weight: 5 },
    { id: 'feature_comparison', name: 'Compared Features', weight: 4 },
    { id: 'faq_expanded', name: 'Expanded FAQ', weight: 2 },
    { id: 'live_chat_started', name: 'Started Live Chat', weight: 8 }
  ],
  lead: [
    { id: 'email_captured', name: 'Email Signup', weight: 10 },
    { id: 'demo_requested', name: 'Demo Request', weight: 15 },
    { id: 'trial_started', name: 'Trial Started', weight: 20 }
  ]
};

// Calculate Lead Score
export function calculateLeadScore(events: string[]): number {
  let score = 0;

  Object.values(microConversions).flat().forEach(conversion => {
    if (events.includes(conversion.id)) {
      score += conversion.weight;
    }
  });

  return score;
}

// hooks/useMicroConversions.ts
'use client';

import { useEffect, useCallback } from 'react';
import { track } from '@/lib/analytics';

export function useMicroConversions() {
  // Scroll Depth Tracking
  useEffect(() => {
    let maxScroll = 0;
    const milestones = [25, 50, 75, 90];
    const triggered = new Set<number>();

    const handleScroll = () => {
      const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
      const scrollPercent = Math.round((window.scrollY / scrollHeight) * 100);

      if (scrollPercent > maxScroll) {
        maxScroll = scrollPercent;

        milestones.forEach(milestone => {
          if (scrollPercent >= milestone && !triggered.has(milestone)) {
            triggered.add(milestone);
            track(`scroll_depth_${milestone}`);
          }
        });
      }
    };

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

  // Time on Page Tracking
  useEffect(() => {
    const milestones = [30, 60, 120, 300];
    let elapsed = 0;

    const interval = setInterval(() => {
      elapsed += 1;

      if (milestones.includes(elapsed)) {
        track(`time_on_page_${elapsed}s`);
      }
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  // Track specific actions
  const trackMicro = useCallback((eventId: string, metadata?: Record<string, unknown>) => {
    track(eventId, metadata);
  }, []);

  return { trackMicro };
}

Form Optimization

// components/forms/OptimizedSignupForm.tsx
'use client';

import { useState, useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { track } from '@/lib/analytics';

const signupSchema = z.object({
  email: z.string().email('Please enter a valid email'),
  password: z.string().min(8, 'Password must be at least 8 characters'),
  name: z.string().min(2, 'Name is required')
});

type SignupData = z.infer<typeof signupSchema>;

export function OptimizedSignupForm() {
  const [step, setStep] = useState(1);
  const [startTime] = useState(Date.now());

  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
    watch
  } = useForm<SignupData>({
    resolver: zodResolver(signupSchema),
    mode: 'onBlur'
  });

  // Track form interactions
  useEffect(() => {
    track('signup_form_viewed');
  }, []);

  const email = watch('email');

  useEffect(() => {
    if (email && email.includes('@')) {
      track('signup_email_entered');
    }
  }, [email]);

  const onSubmit = async (data: SignupData) => {
    const timeToComplete = Date.now() - startTime;

    track('signup_form_submitted', {
      timeToComplete,
      step
    });

    try {
      await createAccount(data);
      track('signup_completed', { timeToComplete });
    } catch (error) {
      track('signup_error', { error: (error as Error).message });
    }
  };

  // Field focus tracking
  const trackFieldFocus = (field: string) => {
    track('form_field_focused', { field });
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
      {/* Progress Indicator */}
      <div className="flex gap-2 mb-6">
        {[1, 2, 3].map(s => (
          <div
            key={s}
            className={`h-1 flex-1 rounded ${
              s <= step ? 'bg-blue-600' : 'bg-gray-200'
            }`}
          />
        ))}
      </div>

      {/* Step 1: Email */}
      {step >= 1 && (
        <div>
          <label className="block text-sm font-medium mb-2">
            Work Email
          </label>
          <input
            type="email"
            {...register('email')}
            onFocus={() => trackFieldFocus('email')}
            className="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-blue-500"
            placeholder="you@company.com"
            autoComplete="email"
          />
          {errors.email && (
            <p className="text-red-500 text-sm mt-1">{errors.email.message}</p>
          )}
        </div>
      )}

      {/* Step 2: Password */}
      {step >= 2 && (
        <div>
          <label className="block text-sm font-medium mb-2">
            Create Password
          </label>
          <input
            type="password"
            {...register('password')}
            onFocus={() => trackFieldFocus('password')}
            className="w-full px-4 py-3 border rounded-lg"
            placeholder="8+ characters"
          />
          {errors.password && (
            <p className="text-red-500 text-sm mt-1">{errors.password.message}</p>
          )}
          {/* Password Strength */}
          <PasswordStrengthMeter password={watch('password') || ''} />
        </div>
      )}

      {/* CTA Button */}
      <button
        type={step < 2 ? 'button' : 'submit'}
        onClick={() => step < 2 && setStep(step + 1)}
        disabled={isSubmitting}
        className="w-full py-4 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 disabled:opacity-50"
      >
        {isSubmitting ? 'Creating account...' : step < 2 ? 'Continue' : 'Create Free Account'}
      </button>

      {/* Trust Signals */}
      <div className="flex items-center justify-center gap-4 text-sm text-gray-500">
        <span className="flex items-center gap-1">
          <LockIcon className="w-4 h-4" />
          Secure
        </span>
        <span>No credit card required</span>
        <span>Cancel anytime</span>
      </div>
    </form>
  );
}

CRO Checklist

Fazit

Conversion Rate Optimization erfordert:

1. Datenanalyse: Funnels und Micro-Conversions tracken
2. User Research: Verstehen warum Nutzer konvertieren
3. Testing: Systematisches A/B Testing
4. Iteration: Kontinuierliche Verbesserung

Kleine Verbesserungen summieren sich zu großen Ergebnissen.

Bildprompts

1. "Conversion funnel visualization, colorful stages with dropoff points"
2. "Landing page wireframe with CRO annotations, best practices highlighted"
3. "A/B test results dashboard, winner variant celebration"

Quellen

• CXL Conversion Optimization Guide
• Unbounce Landing Page Best Practices
• Hotjar CRO Resources
• Neil Patel CRO Guide