Variations
An A/B test only works if visitors can see more than one experience. In everyday language, the Control is “leave the site alone,” and a variation (also called a variant) is “show this alternative.” In CROForge, Control is the baseline variation (often empty JS and CSS). Each other variation holds optional jsCode and cssCode, a name, and a share of traffic. Once a visitor is assigned, that choice is sticky. This page is about what those experiences are; Traffic split explains how percentages become buckets.
Words used on this page
| Word | Everyday meaning | Meaning in CROForge |
|---|---|---|
| Control | The unchanged original you compare against. | The baseline variation (isControl). Usually empty JS/CSS so the live site is the control. Product rules often protect it from delete. |
| Variation / Variant | An alternative version. | A named experience with optional jsCode / cssCode and a traffic percent. You can add, rename, duplicate, or delete non-control variations. |
| JS (JavaScript) | Code that changes behavior and content in the browser. | Stored as jsCode. Smart Code runs it (eval) after CSS is injected. Use it for text, classes, and listeners — not to rebuild the whole page. |
| CSS | Rules that change how things look. | Stored as cssCode. Smart Code appends a <style> tag. Prefer CSS for visual tweaks. |
| Sticky assignment | Once you are in a group, you stay there. | The assigned variation is stored so the same visitor does not flip between Control and a variant. |
| Impression | A count of “this was shown.” | After the variation is applied, Smart Code sends an impression event that this visitor was assigned/shown that variation. |
| Flicker | A brief flash of the old page before the new one appears. | Can happen if JS/CSS runs after the original paint. Keep changes small, apply CSS early in spirit, and QA on real pages. |
| Editor URL | The page you look at while editing. | The URL used as preview chrome on the Variations step and in the code editor, so you edit against the real surface. |
| VIEW_MODE | Desktop vs tablet vs phone width. | Preview chrome hints: Desktop, Tablet, or Mobile. It does not change live assignment. |
Screenshot
Filename: variations-panel.png (Variations step with Control, variants, traffic, and editor URL). Place the file under docs/assets/placeholders/. Paste the screenshot into WordPress after you copy this article; do not add an image tag here.
What you configure
- Name — a label humans can read in the report (for example “Green CTA”).
- Traffic % — Equal or Custom split; details live on the Traffic split article.
- JS — DOM text, classes, listeners. Keep it defensive (check that the element exists).
- CSS — visual overrides. Prefer CSS over fighting layout in JS.
- Editor URL and view mode (Desktop / Tablet / Mobile) for preview chrome on this step.
How to edit variation code
Open the campaign code editor to edit JS and CSS in Monaco (one tab per language). The shipping UX is code-centric (“Create variations using Code Editor”). EDITOR_MODE includes Code and Visual, but Visual mode may not be fully available yet.
- Open the campaign → Configuration → Variations.
- Set the editor URL to a real targeted page.
- Open the code editor (route
/workspace/{id}/ab-test/{id}/edit?vIndex=). - Add, rename, duplicate, or delete non-control variations as needed. Control is often protected.
- Save, then use Live Preview before you set the campaign to Running.
Client guidelines
| Do | Don’t |
|---|---|
| Keep changes minimal and testable so a metric can actually move. | Rewrite the whole page in JS. |
| Prefer CSS for visual tweaks. | Fight the site’s CSS with !important unless you have no other option. |
| Test Desktop, Tablet, and Mobile view modes. | Assume desktop-only. |
| Coordinate with developers for complex DOM or async widgets. | Ship uncaught JS errors (they can break the page and bias the test). |
What Smart Code does when a variation is chosen
Only Running campaigns that already passed URL targeting and the audience segment reach this point. Then:
- Adds a marker class on
document.head. - Appends a
<style>tag withcssCode. - Evals / runs
jsCode. - Sends an impression event.
Flicker (a flash of the original before the variant) is a quality issue, not a targeting issue. If QA sees flicker, simplify CSS/JS, confirm Smart Code loads early, and preview on the real URL. Changing variation code on a Running campaign can also bias results — prefer pause → edit → resume.
Related reading
- Traffic split
- Variation code editor
- Preview mode (Live Preview)
- Create a campaign
- Smart Code runtime
