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.

The Code Editor is available for all types of campaigns, except the A/A test.

 

Accessing the Code Editor

When you create a campaign, in the step Main Information, you have the option to load the Code Editor instead of the visual editor. You can also switch to the Code editor from the Visual editor by clicking the "Switch to Code editor" button.

In any case, you must fill in both mandatory fields before saving: the name of your campaign 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). 

 

Configuring your campaigns with the Code Editor

When you open the code editor in a campaign, 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 three tabs to enter the code: one for the CSS code of the variation, one for the JavaScript code of the variation and one for JavaScript code of the whole campaign.
  • The possibility to create new variations by clicking the "New variation" button;
  • The possibility to duplicate the current variation;
  • The possibility to remove a variation (when you have two or more variations);

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, it corresponds to the first two tabs:

  • CSS - variation
  • JavaScript - variation

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

You can also add Javascript code at the campaign level, in the third tab: 

This code will be executed on all variations, 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?

/