Marketing Funnel System

A modular Vue.js/Nuxt.js application for creating customizable, multi-step marketing funnels with A/B testing support. This application allows for configurable survey flows with server-side rendering and persistent user tracking.

Features

• A/B Testing: Run multiple funnel variants with configurable weights and analyze performance
• Dynamic Funnel Configuration: Define multiple funnel variants with custom screens and flows
• Server-Side Rendering: Ensures fast initial load and proper SEO
• URL-Based Navigation: Each screen corresponds to a unique URL for direct access
• State Persistence: User variant assignment and answers persist across page reloads
• Modular Component System: Easy to extend with new screen types
• Adaptive Design: Fully responsive across all device sizes

Requirements

The system meets the following core requirements:

Navigation and URLs

• ✅ Each screen corresponds to a unique URL
  • Landing page: /
  • Other screens: /s/gender, /s/meat_preference, etc.
• ✅ Clicking "Continue" navigates to the next screen with proper URL updates

Server-side Logic

• ✅ The funnel is server-side rendered for optimal performance and SEO
• ✅ Random configuration assignment (baseline or experiment) on first visit to landing page
• ✅ Consistent configuration across page reloads
• ✅ Automatic redirection to landing page when accessing a screen URL without assigned configuration

Quick Start

Prerequisites

• Node.js 16+ and npm/yarn

Installation

# Clone the repository
git clone https://github.com/yourusername/marketing-funnel.git

# Navigate to the project
cd marketing-funnel

# Install dependencies
npm install
# or
yarn install

Development

# Start the development server
npm run dev
# or
yarn dev

Visit http://localhost:3000 to see the application.

Production

# Build for production
npm run build
# or
yarn build

# Start production server
npm run start
# or
yarn start

Project Structure

marketing-funnel/
├── components/           # Vue components
│   ├── FunnelScreen.vue  # Main screen renderer
│   ├── SingleChoiceQuestion.vue
│   ├── MultiChoiceQuestion.vue
│   └── ThankYouScreen.vue
├── composables/
│   └── core/             # Core funnel system
│       ├── useFunnel.ts  # Main API
│       ├── useFunnelNavigation.ts
│       └── useFunnelState.ts
├── configs/              # Funnel configuration
│   ├── index.ts          # Configuration loader
│   └── variants/         # Funnel variants
│       ├── baseline.ts   # Baseline variant
│       └── experiment.ts # Experimental variant
├── docs/                 # Documentation
├── pages/                # Nuxt.js pages
│   ├── index.vue         # Landing page
│   └── s/[id].vue        # Dynamic screen pages
├── public/               # Static assets
├── server/               # Server-side code
│   └── middleware/       # Server middleware
│       └── funnel.ts     # Variant assignment logic
├── tests/                # Test files
│   └── unit/             # Unit tests
└── types/                # TypeScript type definitions

Configuration System

Funnel variants are defined in configs/variants/. Each variant specifies:

• Unique identifier
• Name and description
• Weight for A/B testing distribution
• Array of screen configurations

Example Configuration

const baselineConfig = {
  id: 'baseline',
  name: 'Baseline Survey',
  description: 'Standard survey flow with basic questions',
  weight: 50,
  screens: [
    {
      id: 'index',
      component: 'LandingV1',
      props: {
        title: { text: 'Welcome to Our Survey' }
      }
    },
    {
      id: 'gender',
      component: 'SingleChoiceQuestion',
      props: {
        title: { text: "What's your gender?" },
        options: [
          { title: 'Female', value: 'female' },
          { title: 'Male', value: 'male' }
        ]
      }
    },
    // Additional screens...
  ]
}

Screen Components

The application includes several built-in screen components:

• SingleChoiceQuestion - For questions with a single answer
• MultiChoiceQuestion - For questions allowing multiple selections
• ThankYouScreen - For completion screens with result summary
• LandingV1/V2 - Welcome screens with variant-specific styling

Testing

The application includes comprehensive tests for core functionalities and components.

# Run all tests
npm run test
# or
yarn test

# Run with coverage report
npm run test:coverage
# or
yarn test:coverage

Extending the System

Adding New Screen Types

1. Create a new component in components/
2. Ensure it emits the standard events (answer, next, previous)
3. Use it in your funnel configuration

Creating New Funnel Variants

1. Create a new configuration file in configs/variants/
2. Follow the standard configuration format
3. The system will automatically detect and use the new variant

Documentation

Detailed documentation is available in the docs/ directory:

• Funnel System Documentation - Detailed system architecture and flow
• Component API Reference - Component props and events
• Test Documentation - Testing approach and coverage

License

MIT License