Talk to a sales representative

+1 844-822-8378
or

Write to us

Using VWO Code Editor

Friday, July 31, 2015

VWO Code Editor is an advanced feature added to the existing editor to allow you to take full control over the actual code that will run for the variations on your website. Using VWO code editor, users can modify the code of native VWO operations according to their needs.

The code editor is a powerful tool for advanced users for implementing changes on your campaign variations using code. Any advanced user with some programming skills can now perform edit operations on your website by directly modifying the JavaScript code or CSS code of your website.

Attention!

The Code Editor is currently available for A/B tests and Personalization campaigns only. All JS/CSS code you have already added to your campaigns will be automatically available in the new code editor.

Accessing VWO Code Editor

You can view the code by clicking on Variation Settings icon and then clicking on the Edit Code button. Alternatively, click the Edit Code button </> option to directly access the code editor.

Whenever you make any changes to your website pages, VWO creates a line of JavaScript code in the backend for every change you make. You can modify the generated code to implemented changes to the element. You can also write custom code into the code editor or modify existing operations and it will be saved if the code is error free. If you are using the VWO notation (mentioned in the table below) we will identify it and map it to a VWO operation. However, if the notation does not map to the default VWO operations,, it will be logged as a Custom JS/CSS operation.

JavaScript code snippets for VWO operations

The following JavaScript code is generated for every operation you perform in the VWO editor:

Operation

JavaScript Code generated

Move

vwo_$(’elementPath’).css({‘position’: ‘absolute’, ‘left’: 10, ‘right’: 20, ‘zIndex’: 10})

Resize

vwo_$(’elementPath’).css({‘display’: ‘block’, ‘width’: ‘300px’, ‘height’: ‘100px’, ‘zIndex’: 10}) 

Show/Hide (Visibility)

vwo_$(’elementPath’).css({‘visibility’: ‘hidden’});

Remove

vwo_$(’elementPath’).css({‘display’: ‘none’});

Change URL (Images)

vwo_$(‘imgPath’).attr({ ‘href’: ‘/new/path’ });

Change SRC (Links)

vwo_$(‘anchorPath’).attr({ ‘src’: ‘/new/path’ });

Change CSS (Styling)

vwo_$(‘elementPath’).css({‘property1’: value1, ‘property2’: value2..});

Content (Edit)

vwo_$(‘elementPath’).html(‘Content to put’);

Content (Edit HTML)

vwo_$(‘elementPath’).replaceWith(‘<div>Dummy HTML</div>’);

Change Background Image

vwo_$(’elementPath’).css({background-image: ‘url(/images/vwo_logso.png)’});

Paste (Before an element)

vwo_$(‘elementPath’).before(‘<div>Dummy Existing Element to Paste</div>);

Paste (After an element)

vwo_$(‘elementPath’).after(‘<div>Dummy Existing Element to Paste</div>);

Rearrange

vwo_$(‘elementPath’).insertBefore(‘elementPath1’);

Anything else you write is

Custom code to remove an element from your DOM

vwo_$(‘elementPath’).remove();

or

var dev = ‘xyz@example.com’;

alert(dev);

Attention!

VWO uses vwo_$ instead of $ (default notation for jQuery). You can only map operations corresponding to one single element. If multiple elements are selected, VWO will consider it as custom code.

Example: Using VWO code editor to modify elements

To understand the usage of VWO code editor, let us consider that you want to make two changes in a variation - move an element position and hide a CTA button. To use VWO code editor, you must first specify the URL of the page where you want to implement the changes.

  1. In the VWO editor screen, select the element and click the Move/Resize operation to move the element.
  2. Next, select the CTA button and click the Hide option to hide the button.
  3. Click the Settings icon against the variation you want to edit the variation settings.
  4. You will notice that the changes you implemented in the variation are listed under Modifications.

  5. Click Target if you want to target specific audience group for the variation. Click here to know more about targeting variation.
  6. Click Clone if you want to clone the variation. Click here to know more about how to clone a variation.
  7. Click Remove to delete the variation.
  8. Click Edit Code to open VWO code editor to modify JS/CSS generated for the element you have modified.
  9. Click Apply to make the changes live. You can also personalize the variation or clone the variation from this window.

Adding External JS/CSS libraries

You can also import custom libraries or a standard library from the quick add option on the VWO editor.

  1. Click the Settings icon of the variation you want to modify.
  2. Select the Edit Code option on the variation settings pop-up.
  3. To add your own JS library, select the JavaScript tab in the editor and click Include External JavaScript.
  4. To import your custom JavaScript, enter the file path to your custom JS and click Done.
  5. To use JavaScript from the standard VWO library, select an option from the Quick Add drop-down option and click Done. By default, VWO automatically includes the jQuery adding the custom JavaScript, .
  6. The JavaScript for the selected library is included in the variation as displayed in the following screenshot. Make your modifications to the library and click Done.
  7. To import your custom stylesheet, enter the file path to your custom CSS and click Done.
  8. To add your own stylesheet into the variation, select the CSS tab in the editor and click Include External JavaScript.
  9. To use JavaScript from the standard VWO library, select an option from the Quick Add drop-down option and click Done.
  10. The stylesheet you have selected will automatically be applied to the variation. The included CSS script will be added to the Javascript section of the variation.

Adding Campaign JS/CSS

Campaign JS/CSS is the code which will run across your website including all variations and the control. You would add global JS/CSS in situations when you want to implement a change across all your test pages including the control.

Using VWO, you can add the following two types of Campaign JS:

  • Post-campaign JS
  • Pre-campaign JS

Add Post-campaign JS

This is the default mode when you select the Campaign JS/CSS option. Here, you can define the JS code which you want VWO to execute before the campaign code executes for a page.

Here are some use cases for Global JS:

  • Sending VWO campaign data to analytics tools
  • Custom conversion goal tracking
  • Define a JS variable to capture which variation has been served to a visitor and then trigger the respective variation of a survey/notification widget

To add Post-campaign JS:

  1. Click the Settings icon for the variation and click Edit Code or click the button on the VWO Visual Editor.
  2. In the Global JS/CSS pane, under the JAVASCRIPT tab, enter the JS code you want to add to implement a change across all the variations and control of your test pages.
  3. To make changes to the CSS of the website, click the CSS tab and enter the code you want to add to implement a change across all the variations and control of your test pages.

Add Pre-campaign JS

You can add Pre-campaign JS by either clicking on Define Pre-campaign JS link or through the Javascript tab settings. Pre-campaign JS allows you to define custom JS in the Campaign JS/CSS section which will execute before applying the campaign changes on the page. Please note that the Pre-campaign JS will run on Goal pages as well.

You can use Pre-campaign JS to trigger custom conversion goals without having to change the code base at your end.

  1. Click the Settings icon for the variation and click Edit Code or click the </> button on the VWO Editor.
  2. In the Code Editor, click the Campaign JS/CSS option on the top right of the window.
  3. Under the Javascript tab, click on the Define Pre-Campaign JS option.
  4. Alternately, click the Settings icon on the Javascript tab and click Add Pre Campaign JS option.
  5. You can enter your pre-campaign JS code on the right hand panel of the window.
  6. Click Done to apply the changes.
Check Your Email!
We've sent a message to
yourmail@domain.com
with an activation link in it.
Just click the link, and we'll take it from there.
Can't find the mail?
Check your spam, junk or secondary inboxes.
Still can't find it? Let us know at support@vwo.com