VS Code extension

portrait de l'auteur Julie Trenque

Written by Julie Trenque

Updated on 09/28/2022

3 min

Advanced

Manage your integrations

Analytics

CDP/DMP

CMP

CMS

Developers

Others

Was this content useful?

As experiments become more complex, ensuring that they work effectively and are bug-free becomes more difficult. Previously, developers had two options – writing JavaScript code directly in Kameleoon and using the Previsualization feature to check it or copying and pasting code into the Chrome developer console. Both of these methods were cumbersome, lowering productivity for developers, and potentially didn’t match production conditions, sometimes showing differences when simulating experiment behavior.

Developers can now write JavaScript or TypeScript code in the popular Microsoft Visual Studio Code IDE, thanks to our Kameleoon and Visual Studio extension. Any updates are automatically detected and sent to their browser via Kameleoon’s Chrome extension. Chrome then injects the new code into the Kameleoon engine and automatically reloads the page. Visual Studio Code is the first development environment we are integrating with – with others potentially added based on client requests.

Installation

You can install the extension from the Visual Studio marketplace.

The marketplace is available directly from the Visual Studio Code editor.  Bring up the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of VS Code or the View: Extensions command (Ctrl+Shift+X). And search for the extension by typing “Kameleoon” in the search bar.

Getting started

Create the project structure with a simple command

Just go to the command palette and execute the Kameleoon – Create structure command.

Press Ctrl+Shift+P to bring up the Command Palette then start typing “Kameleoon – Create structure” to filter and display the Kameleoon – Create structure command.

You then need to provide your Kameleoon Automation API credentials so that the bridge can authenticate and communicate with our platform. Once you have your credentials (you can find them in your profile), put them in the credentials.json file at the root of the repository, like this:

{   "client_id": "YOUR_CLIENT_ID",   "client_secret": "YOUR_CLIENT_SECRET"}

Finally, install the required NodeJS modules by running this command:

npm install

Import everything from your Kameleoon account

You can import all your projects, experiments, personalizations and variations using one single command Kameleoon – Import Data (all).

Note: This command does not overwrite existing files and folders.

If you don’t want to import everything (for instance if your Kameleoon account is too heavy to be loaded), you can use the github template to manually create the folders and files.

Usage

Import an experiment or a personalization from your Kameleoon account

You can  import a specific experiment or personalization by using the  Kameleoon – Import Experiment and Kameleoon – Import Personalization commands.

Create an experiment or a personalization

You can use create experiments and personalizations using the Kameleoon – Create Experiment and Kameleoon – Create Personalization commands.

Note: These commands will automatically create the files and folders for the created experiment or personalization.They are available in the Command Palette, but also as a right-click command.

Create variations for you experiment

When clicking right on an experiment folder, you can create a variation by clicking on the Kameleoon – Create Experiment Variation command.

Create segments, goals and custom datas

You can also use the extension to create segments, goals and custom datas using the Kameleoon – Create Segment, Kameleoon – Create Goal and Kameleoon – Create Custom Data commands.

Note: This command will not create the files and folders for the created segments, goals or custom datas. In the VSCE V3+, these entities are not represented by any folders or files.

See the list of your campaigns directly from the editor

The extension provides a view called Kameleoon Campaigns. This view is available in the Explorer panel. 

It allows you to see all your projects and campaigns, along  with their current state and associated variations.

  • In this article :