DocsExperiments
Guide

Setup experiments

Run A/B tests without another deploy. Build variants in the visual editor, preview them on your live site, and ship the winner with one click.

Install analytics first
Experiments are delivered by the Grademypage analytics script, so the script has to be installed on the page you want to test before any experiment can run. If you haven't already, walk through Setup analytics before continuing here.

How experiments work

Every experiment has a control and up to three test variants. When a visitor loads your page, the analytics script:

  1. Fetches active experiments for the URL.
  2. Deterministically buckets the visitor into a variant using a DJB2 hash of visitorId + experimentId, so the same visitor always sees the same variant.
  3. Applies DOM changes before paint, so there's no flicker.
  4. Fires an experiment_impression event and tags every subsequent event with the variant.
Bayesian, not p-values
Results use a Beta-Binomial Monte Carlo simulation (10k samples) to report "probability to beat control." No peeking penalty; read results any time.

Create an experiment

  1. Open the Experiments tab

    In the dashboard sidebar, click Experiments, then New Experiment. A two-step dialog walks you through setup.

    New Experiment
    Step 1 of 2
    Experiment name
    Hero headline test
    Primary metric
    Custom event
    Event name
    signup
    Hypothesis (optional)
    Changing the headline will lift signups ~15%.
    CancelNext
  2. Pick a primary metric

    Your metric is how you'll judge the winner. Options:

    • custom_event: any conversion or custom event you've fired.
    • session_duration: average engagement time per session.
    • bounce_rate: % of sessions with only one pageview.
  3. Set URL targeting

    Once the experiment is created, variant rules let you choose how the target URL matches: exact, contains, starts_with, or all pages.

Define variants

A variant is a list of DOM changes. Each change has a CSS selector, a change type, and a value.

TypeWhat it does
textReplaces textContent of the matched element.
htmlReplaces innerHTML; use for rich formatting.
styleSets an inline style property (e.g. backgroundColor).
classSets className; useful for theme flips.
cssInjects a <style> block applying property to selector.

Under the hood, each variant stores its changes as JSON:

[ { "selector": "#hero-title", "changeType": "text", "value": "Ship experiments in seconds" }, { "selector": "#cta-button", "changeType": "style", "property": "backgroundColor", "value": "oklch(0.62 0.22 352)" } ]

Use the visual editor

Click Open visual editor on any variant to pop a new tab with your live site plus an overlay toolbar. Click any element to edit its text, styles, or classes. No selectors to write by hand.

yourdomain.com/?gmp_edit=1
Grademypage EditorClick "Pick Element" then click any element on the pagePick ElementSend to Dashboard (2)Close
Your landing page

Click any element to select it. The pink highlight follows your cursor.

Get Started Free
How the editor loads
The editor is injected by your tracking script when it detects ?gmp_edit=1 in the URL. No install step needed.

Preview before launch

Each variant has a sharable preview URL that embeds the changes as a base64 param, so teammates can review without affecting real users:

https://yourdomain.com/?gmp_preview=<BASE64_CHANGES>
Preview mode doesn't track
Impressions and conversions are skipped while ?gmp_preview is present, so QA sessions won't pollute your results.

Read results

The results panel shows conversion rate per variant, expected lift vs. control, and the probability each variant beats control. Most teams ship when that probability crosses 95% with a minimum sample of a few hundred visitors per variant.

Script placement matters
If your experiment flips DOM content, put the analytics tag high in <head>. That gives the script a chance to apply variants before paint, preventing a flash of the control.
Goal fires from a webhook?
If your primary-metric conversion is recorded server-side (Stripe, Clerk, a queue worker), the server has no idea which variant the visitor saw. Forward the assignment from the browser through your backend. Step-by-step pattern under Attributing server-side conversions to experiments.