Convert's Code Editors explained

THIS ARTICLE WILL HELP YOU:

• Introduction
• Global Experience CSS
• Variation CSS
• Variation JS
• Global Experience JS
• Global Project Javascript
• Code Call Order (Priority)

Introduction

This article explains each of the different Code Editors within the Convert app and removes any confusion about them. After reading this, you will be able to differentiate between them and decide where your code should go.

There are 5 different editors in the Convert App that we will describe next. 

Global Experience CSS

Here's how to style an element on your site with CSS and apply the changes on the experience level:

Variation CSS

You can also apply CSS changes on the variation level.

This editor is to insert plain CSS that will be appended to the web page when the visitor is assigned that specific variation.

CSS is more persistent than changes included in the other editors, as CSS rules are permanent, and are not a victim of race conditions.

Whenever, CSS code is appended, but not working, you can append !important, to supersede all other rules already included in the page.

Variation JS

This editor is to insert any standard javascript you desire to include in the variation assigned to the visitor. 

However, the code inserted in this section needs to consider that it might be executed before the elements of the page have loaded. So, you either have to insert a special code to deal with this or execute after JavaScript's DOM Loaded event, which might bring flashing or blinking. 

Global Experience JS

In this section, you can insert standard JavaScript that will be included on the page of any visitor bucketed on the experiment. This can be done to include JavaScript code that can be shared across variations, but not triggered outside the experiment. This code is also called before any variation code.  

Global Project Javascript

This code can be found in the Configuration > Global Project Javascript area. The code in this section gets included wherever the Convert tracking code is placed. Also, this code gets called before any of the other codes included in the code sections above. Common usage is to include analytics snippets or any code you want to trigger in every experiment/experience that is included in your project.

Code Call Order (Priority)

The JavaScript call order of the code included in Convert's code editors is the following:

1. Global Project Javascript
2. Global Experience JS
3. (Variation) Custom Javascript Editor

There is also a code calling order based on the experiment id for the code within each experiment. Code from experiments with lower experiment's id is called first, later experiment code with higher ones.