Kameleoon Debug Assistant extension

note

For more information on the Kameleoon Graphic editor extension, refer to the article on getting started with the Graphic editor.

Installation of the extension

Add the extension to Chrome. It can be downloaded here on the Chrome Web Store.
Open the web console (F12 on PC or command+option+I on Mac).
Click the Kameleoon tab from the web console.
Click Activate.

The login page to the Kameleoon app opens. Enter your login details.

Simplified authentication

You can also use the Kameleoon icon of the extension to start the authentication process:

Click the Kameleoon icon and a pop-up will appear.

Click Open Login Pop-up to display the login pop-up. You can use the login pop-up to enter your email and password to login.

Click the Kameleoon icon and a pop-up will appear.

If you’re already logged in on your browser, a section will appear below the Open Login Pop-up button, allowing you to log in with your current session.

Click on Log in as....

note

Logging out follows the same steps as logging in. Just click the Kameleoon icon > Log out.

Authorizations

The My websites page opens.

The extension activates and gives you the authorizations to use the extension on all websites configured in your Kameleoon account.

The first time you activate the extension, you will be redirected to your website, so you can use the extension straight away.

If you add a new website to your Kameleoon account, you will be told that you don't have permission to use the extension on the site.

Click Proceed to tag injection. The button takes you directly to the Tag Injector. Then, update your authorizations. A message confirms the update.

note

If you add a new website to your Kameleoon account, you can also update your authorizations by clicking Update list of sitecodes at the bottom of the extension dashboard.

Structure

The extension provides several tabs:

Campaigns
Assets
Timeline
Dev tools
Options

You can access a dashboard page by clicking the Kameleoon logo.

Dashboard

The dashboard appears by default when you open the extension.

Click the + icon to build and customize the dashboard, so it contains essential information.

Each widget can be enlarged, reduced, and closed.

You can increase the number of lines by clicking the three-dots menu in the top left.

The inserts at your disposal are as follows:

Consent: Indicates whether you gave consent for Experiments or Personalizations (true indicates that you gave consent or that consent is not required; false means that you refused consent or that, pending your consent, Kameleoon blocked the experiments).
Custom data: Lists the active custom data on the page, their ID, and value.
Experiments: Lists all experiments running on the page and indicates their ID, evaluates targeting (true/false), and displays the ID of the registered variation and displayed variation.
Personalizations: Same for all personalizations running on the page.
Site Code: Displays the relevant sitecode.
Visitor Code: Indicates the visitor code assigned to you, which allows monitoring of visits among other metrics.

You will find a link at the bottom of the dashboard that allows you to update sitecodes when a new website is added to your Kameleoon account.

Campaigns

Experiments

In the Experiments tab, you will find all your experiments running on the page.

You can add or remove columns by clicking Add columns to customize the table.

ID: ID of the experiment. Click to display details.
Name: Name of the experiment.
Triggered: True if the experiment was triggered on the page, else false.
Triggered In Visit: True if the experiment was triggered in the current visit, else false.
Active: True if the experiment is currently active on the page, else false.
Activated In Visit: True if the experiment was activated in the current visit, else false. Note that a triggered experiment does not necessarily imply that Kameleoon activated the experiment, as several additional factors can affect activation (for instance, the visitor being part of traffic excluded from the experiment, or set capping options).
Displayed Variation: ID of the variation displayed (No variation when not targeted; 0 when targeted but assigned to the reference).
Associated Variation: ID of the variation you have been assigned with your visitor code (0 when not targeted). You can force a variation by selecting it in the dropdown. The eye icon on the right allows you to preview it.
Date Modified: Date of the last change made to the experiment.
Assignment Time: When you were assigned to the variation. If the variation is the original, and you have not been targeted, the value is Not assigned yet.
Online since: The date the experiment went online.

Variations

When you click an experiment's ID, a menu opens. The first tab gathers all the experiment's variations, indicating their name, ID, and JS/CSS (if code has been injected in the variation).

You can switch from one variation to another by clicking the variation ID.

The Elements section lists all elements that Kameleoon changes for a variation. It allows you to debug your campaigns and quickly see if the elements are detected on the page. The element's selector represents each item. When the extension displays the element in red, the element does not appear on the page; in green, the element appears on the page.

Each item has two buttons: a copy button and a highlight button.

The copy button can be used to copy the CSS selector.

The highlight button can be used to highlight the associated element in the page. Therefore, it is not available when the element is not detected on the page.

You can also highlight all the elements on the page using the icon that appears above the list of elements.

Configuration

The experiment's entire configuration is displayed in the extension.

You will find the information that is normally in the console.

Targeting

The Targeting section displays the targeting conditions with logical links between them.

Some conditions give access to additional details when you click them. For example, for a JS condition, the JS to be executed appears.

Feature flags

The Feature flags tab contains all feature flags that Kameleoon detects on the page.

Inspect each feature flag's behavior in this tab. The table includes the following information:

ID: Feature flag's ID. Click the ID to view detailed information.
Name: Feature flag's name.
Triggered: True if the flag triggered on the page.
Triggered in visit: True if the flag triggered during the current visit.
Active: True if the flag is currently active on the page.
Activated in visit: True if the flag activated in the current session.
Displayed variation: ID of the displayed variation. No variation indicates that the user isn't targeted. 0 refers to the reference variation.
Associated variation: The variation to which Kameleoon assigns the visitor. Use the dropdown to force a variation. The eye icon allows you to preview that variation.

When you click a flag ID, you can access the configuration, which includes details such as:

JavaScript or CSS code injected for each variation (if any)
Targeting and segmentation conditions
Timeline and last modified date

The feature flag view helps debug feature flags and ensure proper delivery in real time.