Real-time landing page personalization based on ad campaign data. Automatically adapt your landing page content to match the ad that brought each visitor, increasing conversion rates through message consistency.
This SaaS personalizes landing pages in real-time based on the ad a visitor clicked (UTM tags, ad IDs, etc.). Customers paste one line of JavaScript code into their funnel builder (ClickFunnels, Webflow, WordPress, Shopify, etc.), and the system automatically:
- Reads ad/UTM parameters from the URL
- Matches visitors to audience segments
- Swaps landing page text (headlines, subheadlines, bullets, CTAs) to match the ad promise
- Tracks performance vs. a control group
Think: "Google Optimize + Copy.ai" but simplified for ad-driven funnels.
✅ One-Line JavaScript Snippet - Easy integration with any website
✅ UTM-Based Segmentation - Automatic visitor segmentation based on campaign parameters
✅ Dynamic Content Swapping - Real-time replacement of headlines, subheadlines, bullets, and CTAs
✅ A/B Testing - Built-in 5-10% holdout group for performance measurement
✅ Multi-Tenant Architecture - Separate workspaces for each customer
✅ Event Tracking - Page views, clicks, conversions with revenue attribution
✅ Dashboard - Manage segments, variants, and view analytics
✅ Stripe Billing - Subscription management with trial support
🔄 AI Copy Generation - Auto-generate variant copy with GPT-4
🔄 Ad Platform Integration - Direct sync with Meta/Google Ads
🔄 WordPress/Shopify Plugins - Native integrations
- Frontend: Next.js 14 (App Router), React 18, TypeScript, Tailwind CSS
- Backend: Next.js API Routes
- Database: PostgreSQL (Supabase)
- ORM: Prisma
- Cache: Redis (Upstash/Vercel KV)
- Auth: Supabase Auth
- Payments: Stripe
- Hosting: Vercel
- AI: OpenAI GPT-4 (optional)
ad_SasS/
├── src/
│ ├── app/
│ │ ├── (auth)/ # Auth pages (login, signup)
│ │ ├── (dashboard)/ # Dashboard (protected)
│ │ │ ├── dashboard/ # Overview & stats
│ │ │ ├── segments/ # Segment management
│ │ │ ├── analytics/ # Performance tracking
│ │ │ └── subscription/ # Billing
│ │ └── api/
│ │ ├── v1/
│ │ │ ├── content/ # Content API
│ │ │ ├── events/ # Event tracking
│ │ │ └── snippet/ # JS snippet
│ │ └── stripe/ # Webhooks
│ ├── components/ # Reusable components
│ ├── lib/ # Utilities
│ └── types/ # TypeScript types
├── prisma/
│ └── schema.prisma # Database schema
└── public/
└── snippet.js # JavaScript snippet
- Node.js 18+
- PostgreSQL database
- Supabase account
- Stripe account
- Redis instance (optional for caching)
- Clone & Install
git clone <repository-url>
cd ad_SasS
npm install- Environment Setup
cp .env.example .envUpdate .env with your credentials:
# Database
DATABASE_URL="postgresql://..."
DIRECT_URL="postgresql://..."
# Supabase
NEXT_PUBLIC_SUPABASE_URL="https://..."
NEXT_PUBLIC_SUPABASE_ANON_KEY="..."
SUPABASE_SERVICE_ROLE_KEY="..."
# Redis (optional)
REDIS_URL="redis://..."
# Stripe
STRIPE_SECRET_KEY="sk_..."
STRIPE_WEBHOOK_SECRET="whsec_..."
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="pk_..."
# OpenAI (optional)
OPENAI_API_KEY="sk-..."- Database Setup
npx prisma migrate dev
npx prisma generate
npx prisma db seed # Optional: seed sample data- Run Development Server
npm run devVisit http://localhost:3000
Customer signs up → Gets API key → Installs snippet on site
Visitor clicks ad → Lands on page → Snippet reads UTMs →
Fetches personalized content → Swaps page elements → Tracks events
<script>
(function(w,d,s,id){
var js,fjs=d.getElementsByTagName(s)[0];
if(d.getElementById(id))return;
js=d.createElement(s);js.id=id;
js.src='https://yourdomain.com/snippet.js';
js.setAttribute('data-api-key','YOUR_API_KEY');
fjs.parentNode.insertBefore(js,fjs);
}(window,document,'script','lp-personalize'));
</script>- Tenant - Customer workspace with API key
- User - Team members with role-based access
- Segment - Audience segments with UTM rules
- SegmentVariant - Content variations per segment
- Event - Visitor tracking (views, clicks, conversions)
- Subscription - Stripe billing integration
POST /api/v1/content
{
"apiKey": "tenant-api-key",
"utm_source": "facebook",
"utm_campaign": "summer-sale",
"visitorId": "cookie-id"
}
Response:
{
"segment": "social-shoppers",
"content": {
"headline": "Summer Sale - 50% Off!",
"subheadline": "The deal Facebook users love",
"bullets": ["Free shipping", "30-day returns"],
"ctaText": "Shop Now"
}
}POST /api/v1/events
{
"apiKey": "tenant-api-key",
"type": "CONVERSION",
"visitorId": "cookie-id",
"revenue": 99.99,
"metadata": {...}
}- Response Time: <50ms (cached)
- Snippet Size: <5KB gzipped
- Zero Layout Shift: Content swapped before paint
- Privacy-First: No PII collected
npm run dev # Start dev server
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint
npm run type-check # TypeScript check
npm run test # Run tests
# Prisma
npm run prisma:generate # Generate client
npm run prisma:migrate # Run migrations
npm run prisma:studio # Open Prisma Studio
npm run prisma:seed # Seed database- Push to GitHub
- Import to Vercel
- Add environment variables
- Deploy
npm run build
npm run start- ✅ Customer can paste snippet and see dynamic text swap
- ✅ Segment rules apply correctly based on UTMs
- ✅ Events tracked and visible in dashboard
- ✅ Stripe billing functional
- ✅ <50ms API response time with caching
- Project setup & database schema
- Content API with Redis cache
- Rules engine for UTM matching
- Event tracking endpoint
- JavaScript snippet implementation
- Dashboard skeleton with auth
- Segment CRUD operations
- Per-tenant API keys
- Variant management UI
- Analytics charts & reporting
- Stripe integration
- A/B testing with holdout
- Polish & bug fixes
- Deployment to production
- Beta user onboarding
- Documentation
Proprietary - All Rights Reserved
For questions or issues, contact: support@yourdomain.com