Guide: Code Editor

Introduction

 

The Code Editor is an alternative to the visual editor to quickly and easily make CSS and/or JavaScript-based changes to your campaign. As in the visual editor, you can add, rename, delete a variation or duplicate an existing one.

 

Good to know 💡

The code editor is only available for A/B tests.

 

Accessing the Code Editor

 

When you create an A/B Test, in the step Main Information, you have the option to load the Code Editor instead of the visual editor.

In any case, you must fill in both mandatory fields before saving: the name of your test and the sample URL (that will be used if you finally want to load the visual editor as well as a sample of the targeted pages in the targeting step (Where section). 

 

Guide_Code_Editor_01.png

 

For existing A/B tests, you can also load the code editor from the Main Information page. In any case, you can switch from the visual editor to the code editor from both editors and the Main Information page (the option is located on the bottom right-hand side of the editors).



Configuration of Your AB Test With the Code Editor

 

Natively, when you open the code editor in an AB Test, you discover this screen, with the following information/actions: 

 

  • One variation is created by default:
    • You can rename this variation to be easier to read in the report (ex: “Blue CTA variation” instead of “variation1”)
    • There are two tabs to enter the code: one for CSS code and the other one for JavaScript code.
  • The possibility to create new variations by clicking the “+” icon on the top right of the grey variations panel;
  • The possibility to duplicate the current variation;
  • The possibility to remove a variation (when you have two or more variations);
  • The possibility to switch to the Account Javascript tab which is unique for the whole campaign.


Guide_Code_Editor_02.png

The code editor enables you to make your changes at two levels:

 

  • The variation level
  • The campaign level

 

The Variation Level

 

At the variation level, for each variation, the two following tabs are displayed:

 

  • CSS 
  • JavaScript

 

These pieces of code will be executed on your webpage to create or generate a variation of your original version (the variation).

Each added variation will have its CSS code and its JavaScript code.

 

The Campaign Level

 

At a campaign level, you can only add Javascript. 

 

Guide_Code_Editor_04.png 

Guide_Code_Editor_03.png

 

This code will be executed on all versions, including the original. This is the equivalent of the campaign code in the Visual editor. 

The main usage of this campaign-based code is relative to trackers. The different trackers (click tracking, for example) must be fired on all the variations of your campaign to be able to measure the impact of your variation(s). 

 

To help you to use the JS code console, you can access our Code Modal shortcuts library 

 

Good to know 💡

In the visual editor, you can create trackers using the WYSIWYG option. In the code editor, you can use the same methods to get the same types of trackers.

 

  • Click: when the visitor left-clicks on the element.
  • Mousedown: when the visitor moves over the element with the mouse while holding the left-hand button down (e.g. drag and drop, text selection, scrolling).
  • Submit: when the visitor submits a form to the server after filling it in. The submit event type needs to be set on the <form> element, not on the button. The selector needs to point to the <form> element.


This is a sample of the code we generate with the method click on the element #tracked_element: 

 

const selector = '#tracked_element';

document.addEventListener('click', ({ target }) => {

if (target.matches(selector) || target.closest(selector)) {

ABTastyEvent('', null, 804214);

}

}, { capture: true });

 

All the modifications you implement in the code editor are also visible in the visual editor when you switch views. At the same time, all the JavaScript and CSS code you add directly into the visual editor will also be visible in the code editor.

 

Heads up ⚡

The modifications you implement in the visual editor which are not related to JavaScript or CSS, such as editing style, editing HTML, adding an image, or adding widgets, will not be visible in the code editor. 

 

The last editor you used will open by default the next time you load the editor, whether it is the same campaign or a different one.

 

Was this article helpful?

/