All docs pages

Variations#

A variation is one version of your page in an experiment. The control (letter A) shows your page unchanged. Every other variation describes how it differs: a list of declarative changes, optional CSS, optional JavaScript, or, in a split URL test, a redirect. Prefer changes: they are safe, easy to review, and revert cleanly when a visitor leaves the page.

Each variation has a key (control, b, c or your own, lowercase letters, digits, - and _), a name ("Free shipping") and a weight_bp, its share of the experiment's traffic in basis points.

Changes#

A change edits the elements that match a CSS selector:

{"op": "set_text", "selector": "#hero h1", "value": "Free shipping on every order"}

`op`	Effect	Fields
`set_text`	Replace the element's text.	`value`
`set_html`	Replace the element's inner HTML.	`value`
`set_attribute`	Set an attribute (`href`, `src`, `alt`, `aria-label`, ...). `value: null` removes it.	`name`, `value`
`add_class`, `remove_class`	Add or remove space-separated classes.	`value`
`set_style`	Set one CSS property inline, `!important` by default.	`name` (kebab-case, `font-size`), `value`, `important`
`hide`	Hide the element (`display: none`).
`remove`	Take the element out of the page.
`insert_before`, `insert_after`, `prepend`, `append`	Insert HTML before, after, at the start or at the end of the element.	`value`
`move`	Move the element before, after, to the start or to the end of another element.	`target` (selector), `position` (`before`, `after`, `prepend`, `append`)

Every change also takes:

all (default true): apply to every match; false applies to the first match only.
persist (default true): also apply to matching elements that appear later (lazy-loaded content, client rendering), and apply again when your page's own code undoes the change. With false the change applies to elements present at activation plus the first match that appears within 10 seconds.
id: an optional stable id (the visual editor sets one).

Changes apply in order, before the page is shown for elements in the initial HTML. Each change records what it replaced, so when a visitor of a single-page app navigates away, or a preview ends, the page returns to its original state. A change whose selector matches nothing does nothing; debugging shows it.

Safety rules#

Every change is checked when it is saved, from the app, the API, an agent or the visual editor:

Selectors must be valid CSS, at most 500 characters.
Attributes that hold URLs (href, src, action, srcset and others) cannot start with javascript:, vbscript: or data: (images in src and srcset may use data:image/). Event handler attributes (onclick and other on*), srcdoc and style (use set_style) cannot be set.
HTML values cannot contain <script>, <iframe>, <object>, <embed>, <frame>, <base> or <meta> elements, event handler attributes or javascript: URLs (unsafe_html). Executable code belongs in the variation's JavaScript, which is checked and recorded in the activity log.
In workspaces without an account, HTML is additionally filtered through an allowlist of tags and attributes.

Limits: 200 changes per variation, 20 KB per value, 100 KB for all changes of a variation.

CSS#

css adds a style sheet while the variation is shown and removes it on revert. common_css on the experiment applies to every visitor in the experiment, including the control (useful for a shared fix that must not bias the test). Up to 50 KB each.

.btn-buy { background: #0f7a3d; font-size: 1.1rem; }
.trust-row { display: none; }

JavaScript#

js is the body of a function that runs when the variation applies, common_js runs for every visitor in the experiment including the control, and the project's global script runs on every page before any experiment. Up to 50 KB each.

var price = document.querySelector("#price");
if (price) price.insertAdjacentHTML("afterend", "<p class='note'>Free shipping on every order</p>");
ctx.cleanup(function () { var n = document.querySelector("#price + .note"); if (n) n.remove(); });

The function receives tf (the JavaScript API) and ctx (cleanup, onElement, when, the experiment and variation). Register a cleanup for anything you add, so single-page apps and previews can revert it.

Code is checked when you save it: a syntax error answers validation_failed with the field (variations[1].js), the line and the column, through the app, the API and agents alike, and nothing is published. Code never runs on tryfast.eu, only on your site.

In a workspace without an account, custom JavaScript (variation, experiment-wide and global code, and JavaScript conditions and triggers) runs in previews only; save the workspace to an account to launch it.

Redirects#

In a split URL test ("type": "split_url") every variation except the control has a redirect:

{"type": "url", "url": "https://acme-shop.de/pricing-b", "keep_query": true, "keep_hash": true}
{"type": "params", "params": {"layout": "b"}, "keep_query": true, "keep_hash": true}

url sends the visitor to another page: an absolute https: URL or a path starting with /. It must be on the project's domains and on the same site (registrable domain, for example acme-shop.de) as the pages it leaves, so the visitor id carries over and the visitor keeps their variation. Other targets are rejected when saved.
params keeps the page and only changes query parameters.
keep_query and keep_hash (default true) carry the original query string and fragment over.

The redirect happens before the page is shown, adds no browser history entry, counts the visitor on the original page, and never loops: the destination recognises the visitor and does not redirect again, even when it matches the experiment's page rules.

Limits#

8 variations per experiment, 200 changes per variation, 50 KB of CSS and of JavaScript each. A project's script, with all running experiments, can be at most 200 KB uncompressed (bundle_too_large); the launch checklist warns above 30 KB compressed, because every visitor downloads it.

View as markdown