# Two Variants — Complete Documentation

> Clever A/B testing to improve conversions on your website. Free for 1 website with up to 1,000 views per month.

## Overview

Two Variants is a visual A/B testing platform built for individuals and small businesses. It enables website owners to create and run split tests without writing code. The platform consists of a web dashboard for test management, a lightweight JavaScript snippet that runs on the target website, and AI-powered test recommendations. Made in the UK 🇬🇧 by Pixel Takeaway Limited.

## Pricing

- **Free** — £0/month: 1 website, 1 active test, 1,000 views/month, core analytics, visual editor, AI recommendations
- **Pro** — £9/month: 5 websites, unlimited tests, 50,000 views/month, conversion goals, statistical confidence, priority support
- **Business** — £19/month: Unlimited websites, unlimited tests, unlimited views/month, Google Analytics integration, dedicated support

Cancel anytime. No questions asked. No minimum contract.

## Competitive Comparison

| Feature | Two Variants | Optimizely | VWO | Google Optimize | Adobe Target | AB Tasty |
|---|---|---|---|---|---|---|
| AI-powered test recommendations | Yes | No | No | N/A | No | No |
| Free tier | Yes | No | Trial only | Sunset | No | No |
| Pricing transparency | Public | Sales call | Sales call | N/A | Sales call | Sales call |
| No minimum contract | Yes | Annual only | Annual only | N/A | Annual only | Annual only |
| Setup time | < 2 min | Hours | 30+ min | N/A | Hours | 30+ min |
| Learning curve | Easy | Steep | Moderate | Sunset | Steep | Moderate |
| Self-serve onboarding | Yes | Partial | Partial | N/A | No | Partial |
| Lightweight script | < 5 KB | ~80 KB | ~120 KB | N/A | ~90 KB | ~70 KB |
| Mobile-friendly editor | Yes | No | No | Sunset | No | No |
| Visual editor | Yes | Yes | Yes | Sunset | Yes | Yes |
| Conversion tracking | Yes | Yes | Yes | Sunset | Yes | Yes |
| Real-time results | Yes | Yes | Yes | Sunset | Delayed | Yes |

## AI-Powered Test Recommendations

Two Variants includes an AI-powered recommendation engine that analyses your website and suggests the most impactful A/B tests to run. The system:

1. Captures a full screenshot and content of your website
2. Analyses it from a UX/CRO expert perspective using advanced AI (multimodal analysis)
3. Returns specific, actionable test recommendations with:
   - What to change and why
   - Current state vs. suggested change
   - Expected impact level (High/Medium/Low)
   - CRO rationale for each suggestion

Examples of recommendations include CTA copy improvements (e.g., "Book Now" instead of "Book"), headline optimisation, layout changes, trust signal placement, and form simplification.

## Architecture

### Client-Side Script (twovariants.js)

The A/B testing script is a self-contained IIFE (~4 KB) that:

1. Reads the `data-site` attribute from its own script tag to identify the website
2. Assigns visitors to variant A or B using a persistent cookie (`_tv_var_{site_id}`)
3. Fetches active test configurations (modifications and goals) from the backend
4. Applies DOM modifications for variant B visitors using CSS selectors
5. Tracks page views, clicks, time on page, and goal completions
6. Reports events in batches to minimize network overhead

#### Installation

```html
<script src="https://twovariants.com/twovariants.js" data-site="YOUR_SITE_ID" defer></script>
```

#### Visitor Assignment

- 50/50 random split on first visit
- Sticky assignment via cookie (365-day expiry)
- Cookie name: `_tv_var_{site_id}` (per-site isolation)
- Visitor ID cookie: `_tv_vid` (cross-site visitor tracking)

#### Modification Types

The visual editor supports the following CSS properties:
- `color`, `backgroundColor`
- `fontSize`
- `paddingTop`, `paddingBottom`, `paddingLeft`, `paddingRight`
- `marginTop`, `marginBottom`, `marginLeft`, `marginRight`
- `borderWidth`, `borderColor`, `borderStyle`
- `display`
- `textContent` (text replacement)

Bare numeric values are automatically suffixed with `px`.

#### Event Types

- `page_view` — Fired on initial load and SPA navigations
- `click` — Batched click tracking (up to 5 per flush, debounced at 1s)
- `time_on_page` — Heartbeat every 30s + final beacon on page unload
- `goal_completion` — Triggered by page visit or element click goals

#### SPA Support

The script monitors `history.pushState`, `history.replaceState`, and `popstate` events. On navigation:
- Flushes pending click events
- Sends final time-on-page for the previous page
- Tracks a new page view
- Re-checks page visit goals
- Re-applies modifications via MutationObserver

#### Security

- Sensitive query parameters (tokens, passwords, API keys) are stripped from tracked URLs
- Password and hidden input clicks are excluded from tracking
- Class names and IDs are truncated to prevent oversized payloads
- URLs are capped at 2048 characters

### Backend

#### Edge Functions

**get-modifications** (GET, public)
- Input: `site_id` query parameter
- Returns: active test IDs, modifications, and conversion goals
- Cached for 60s via Cache-Control header

**track-event** (POST, public)
- Input: `site_id`, `visitor_id`, `variant`, `event_type`, `metadata`, `page_url`, `test_ids`
- Validates event types, visitor IDs, UUIDs, and metadata size
- Supports sendBeacon via apikey query parameter
- Inserts one row per test ID into `visitor_events`

**verify-installation** (POST, authenticated)
- Verifies script installation by fetching the target URL and checking for the `data-site` attribute
- SSRF protection: blocks internal IPs, enforces HTTP(S) only
- Requires JWT authentication and website ownership verification

**recommend-tests** (POST, authenticated)
- Accepts a website URL, screenshots it via Firecrawl, and analyses using AI
- Returns structured A/B test recommendations with impact levels and specific suggestions
- Requires JWT authentication

#### Database Schema

- `websites` — Registered websites with site_id, URL, and ownership
- `tests` — A/B tests linked to websites (status: draft/active/paused/completed)
- `test_modifications` — CSS selector + modification JSON per test
- `conversion_goals` — Goal definitions (page_visit or element_click) per test
- `visitor_events` — Raw event log with visitor_id, variant, event_type, metadata

All tables use Row Level Security. Visitor events are insert-only via service role (edge function gatekeeper).

## Conversion Goals

### Page Visit Goals
Triggered when a visitor navigates to a specific URL path. Uses normalized exact-match comparison.

### Element Click Goals
Triggered when a visitor clicks an element matching a CSS selector. Uses `Element.matches()` and `Element.closest()` for delegation support.

Goals are deduplicated per visitor per session to prevent double-counting.

## Analytics

The dashboard displays:
- Visitor counts per variant
- Click rates
- Average time on page
- Bounce rates
- Goal completion rates
- Statistical confidence indicators

## Frequently Asked Questions

**Is my data secure?**
Yes. Two Variants does not collect any personally identifiable information from visitors. All data is encrypted and stored securely. Fully GDPR compliant, ICO registered, and Cyber Essentials certified.

**What's A/B testing?**
It's like asking two friends which outfit looks better — except the friends are your website visitors, and the outfits are two versions of your page. You show version A to half your traffic and version B to the other half, then see which one gets more clicks, signups, or sales.

**How does Two Variants work?**
Add a small code snippet to your webpage, then use the visual editor to make changes — no coding needed. Traffic is split between the original and your variant, then results show which performs better.

**Do I need to know how to code?**
Not at all. The point-and-click visual editor lets you change text, colours, images, and more without touching any code.

**Will it slow down my webpage?**
No. The script is lightweight (under 5 KB) and loads asynchronously, so it won't affect page speed or Core Web Vitals scores.

**How long should I run a test?**
Run tests until you have at least 100 visitors per variant for reliable results. For most sites, that's 1–2 weeks. The results summary indicates when data is statistically meaningful.

**Can I cancel my plan at any time?**
Yes, absolutely. There are no contracts or commitments. Cancel from settings at any time, no questions asked.

## Getting Started

1. Sign up at [twovariants.com](https://twovariants.com)
2. Add your website URL
3. Copy the script tag and paste it into your site's HTML
4. Verify installation from the dashboard
5. Get AI-powered test recommendations for your website
6. Create a test and design variant B using the visual editor
7. Activate the test and monitor results