Skip to content
Ttoolab Ttoolab Ttoolab Docs

A/B Tests

A/B tests let you change page elements in the browser and compare how variants perform against a goal.

What is an A/B test?

Section titled “What is an A/B test?”

An A/B test shows different versions of a page (or parts of a page) to different visitors. One variant is usually the control (unchanged), and others test specific changes.

Ttoolab applies changes client-side through the pixel — no server deploy is required for visual changes.

When to use A/B tests

Section titled “When to use A/B tests”

Use A/B tests when you want to:

  • Test headlines, CTAs, images, or layout changes
  • Compare copy or pricing presentation
  • Validate UX changes on a live page without code deploys

Use split URL or redirect tests when the change requires an entirely different page.

Supported change operations

Section titled “Supported change operations”

The pixel can apply these DOM operations per variant:

| Operation | Description | | :-------- | :---------- | | set_text | Replace element text content | | set_html | Replace element inner HTML | | set_style | Set a CSS property | | set_attribute | Set an HTML attribute | | add_class / remove_class | Toggle CSS classes | | hide / show | Toggle element visibility | | custom_css | Inject custom CSS | | custom_js | Run custom JavaScript |

Changes are applied in orderIndex order after the DOM is ready.

How to create an A/B test

Section titled “How to create an A/B test”
  1. In the Ttoolab dashboard, create a new experiment and select type A/B test.
  2. Set URL rules so the experiment runs on the correct pages.
  3. Create variants (control + at least one treatment).
  4. For each variant, add changes using CSS selectors to target elements.
  5. Define one or more goals.
  6. Set traffic allocation and targeting options.
  7. Review and publish.

How to publish

Section titled “How to publish”

Click Publish in the dashboard. Ttoolab:

  • Writes experiment config to the edge KV store
  • Updates the project manifest
  • Sets experiment status to running
  • Emits experiment.published and experiment.started webhooks (if configured)

After publishing, reload a matching page. The pixel fetches assignments on bootstrap and applies the variant changes.

How to measure results

Section titled “How to measure results”

Ttoolab automatically records exposures when a visitor is assigned. Conversions are counted when:

  • A goal condition is met (page view, click, form submit, custom event, revenue)
  • You send a matching ttoolab.track() event from your code

Check the experiment results page in the dashboard for per-variant metrics.

Read variant in code (optional)

Section titled “Read variant in code (optional)”
window.ttoolab?.ready(() => {
  const variant = window.ttoolab?.getVariant("hero-cta-test");
  if (variant === "variant-b") {
    // Optional custom logic for variant-b
  }
});

Best practices

Section titled “Best practices”
  • Use specific CSS selectors. Prefer IDs or data-* attributes over fragile class names.
  • Keep the control variant truly unchanged.
  • Avoid applying changes to elements that load asynchronously without testing timing.
  • Document your hypothesis and success metric before launching.
  • Do not stop an experiment as soon as one variant leads — wait for statistical confidence.

Next steps

Section titled “Next steps”