Create a Custom Code Experiment
Step by step walkthrough for creating a custom code experiment in Elevate A/B Testing, including code entry, page targeting, and preview.
Six steps, from writing the code to launching.
Before you start: the theme extension enabled, and your JavaScript and CSS written and tested in browser dev tools on your live storefront.
Open Experiments, select New Experiment, then Custom Code Experiment.
Step 1: General Info & Goal
Name the experiment and choose the metric that decides the winner.
Enter an Experiment name. Description, Hypothesis, and Assets are optional. Assets take images and documents up to 10 MB and videos up to 100 MB.
Under What do you want to measure?, choose your goal. Revenue per visitor is recommended.
Select Browse all metrics for the full list, or Add Custom Metric to track something Elevate A/B Testing does not measure by default, such as a click on the element your code adds. See Custom Events.
Step 2: Set Variations
Choose the Number of Variations, up to five including your control.
Each card, including Control, has two code fields:
Custom JavaScript
Runs on the page for visitors in this variation. Use it to add elements, change behaviour, or apply logic.
Custom CSS
Styles injected for this variation. Use it to restyle, hide, or reposition elements.
Leave the control's fields empty to compare against your store as it is. Fill them in to compare two implementations against each other.
Use the expand control on a field to edit in a larger editor.
Your JavaScript receives a context object describing the experiment. Expand the note under the code fields in the app to see what it contains.
Page targeting
Run on all pages is on by default. The code runs everywhere, and Exclude pathnames is where you keep it out of specific paths. Add one path at a time with the + control.
Turn Run on all pages off to specify where the code should run instead.
Wildcards match multiple pages. /products* matches /products, /products/123, and every other product page.
Be deliberate here. Code running where you did not intend is the main way a custom code experiment causes damage rather than data. Exclude /cart and checkout paths unless the code is meant for them.
Step 3: Traffic Allocation
Set the split between variations with the slider. Even is the default.
Isolate traffic for this experiment is optional and off by default. It reserves a share of your traffic exclusively for this experiment, so visitors in that group enter no other experiment. See Traffic Isolation.
Step 4: Audiences
Optionally narrow who enters, by device type, visitor type, UTM parameters, traffic source, or country. Select Create Custom Audience for anything more specific.
Leave this empty unless the hypothesis is about a particular audience. See Audience Targeting.
Step 5: Optional Settings
Click-Through Rate Tracking is off by default. Turn it on to track clicks on specific buttons or links inside the experiment, which is useful when your code adds a CTA and you want to know whether anyone used it.
Your variations are already set at this point. This step layers on top of them and is optional.
Step 6: Review Experiment
Check everything, then select Create Preview Experiment.
The experiment moves into Preview. Nothing is served to real visitors yet. QA it, then select Launch Experiment.
Select Save as Draft at any point to come back later.
Next steps
Preview and QA a Custom Code Experiment
Reading Results and Ending a Custom Code Experiment
Last updated