Freshmarketer provides Experiment JS/CSS Editor to add JavaScript and CSS Stylesheet globally across all variations in an experiment including the original.
This guide will help you in understanding how Experiment Code Editor works and how it can be used.
Using “Experiment code Editor”
Experiment Code Editor is the place where a JavaScript or a Stylesheet can be written which will be applied to all the variations and also the original. This option is useful when a similar change has to be made for all the experiment variations (including the original).
Experiment Code Editor - Experiment JS (Global JS)
Experiment JS in Freshmarketer lets you write JavaScript that is implemented on all variations, including the Original.
Some of the most common use cases are,
- Send data from Freshmarketer experiment to any analytics tools.
- Track goals for Custom Conversions
- Define various JavaScript variables and include functions that can be utilized by multiple variations.
Experiment Code Editor - Experiment CSS (Global CSS)
Experiment CSS in Freshmarketer lets you write Style sheets that affect all variations including the Original. You can define a class and assign a CSS property which will be applied globally to all variations and also the original.
Some of the use cases are,
- Setting a color for specific element
- Defining the hover specific property
- Adding borders to table elements.
Locating “Experiment Code Editor”
This option can be found in the overlaid A/B testing toolbar.
STEP 1: In Freshmarketer’s A/B Testing toolbar, click "<>" Experiment Code Editor on the Top right-side of the toolbar.
STEP 2: In a text editor that surfaces at the bottom of the page, the default tab will be JS =>Variation JS, besides this you can find Experiment JS. Enter the JavaScript code in a text area given below.
Variation JS : Changes will be applied only for the variation you are editing
Experiment JS : Changes will be applied for all the variations including the Original
STEP 3: To add a Style sheet, click on CSS tab and choose "Variation CSS" to apply changes only for the variation you are editing, If you would like to apply the changes for all the variations including the Original then choose "Experiment CSS" tab and enter the CSS Style sheet in the text area and choose "Apply"
Variation CSS : Changes will be applied only for the variation you are editing
Experiment CSS : Changes will be applied for all the variations including the Original
