Skip to main content

Kameleoon Debug Assistant extension

note

For more information on the Kameleoon Graphic editor extension, refer to this article.

Installation of the extension​

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

  1. 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:

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

  1. 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. This shortcut will take you directly to the Tag Injector. Then, update your authorizations. A message will confirm 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​

Several tabs are available in the extension:

  • Campaigns
  • Assets
  • Timeline
  • Dev tools
  • Options

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

Dashboard​

The dashboard appears by default when the extension is opened.

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 consent has been given for Experiments/Personalizations (true may mean that you have given your consent or that your consent is not required; false means that you have refused your consent or that, pending your consent, the experiments have been blocked).
  • 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 you to monitor (among other things) the accounting of visits.

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 the experiment was activated, since several additional factors can affect this activation (for instance, the visitor may be part of the traffic excluded from the experiment, or capping options may have been set).
  • 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 this is the original, and you have not been targeted, the value is Not assigned yet.
  • Online since: The date the experiment was put 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 are supposed to be changed for a variation. It allows you to debug your campaigns and quickly see if the elements are detected on the page. Each element is represented by its selector. When the element is displayed in red, it means that the element is not detected on the page; in green, the element is detected 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​

In this section, the targeting conditions are shown 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 will be displayed.

Feature flags​

In this tab, you will find all feature flags currently detected on the page.

You can inspect each feature flag's behavior. The table includes the following information:

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

When clicking a flag ID, you can access its configuration, which includes details such as:

  • JS/CSS code injected for each variation (if any)
  • Targeting and segmentation conditions
  • Timeline and last modified date

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

Personalizations​

In this tab, you will find all personalizations running on the page

Add or remove columns by clicking on Add columns to customize the table.

  • ID: ID of the personalization. Click to display details.
  • Name: Name of the personalization.
  • Triggered: Whether you are targeted.
  • Triggered In Visit: True if the personalization was triggered in the current visit, else false.
  • Active: True if the personalization is currently active on the page, else false.
  • 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.
  • Activated In Visit: True if the personalization was activated in the current visit, else false. Note that a triggered personalization does not necessarily imply that the associated event occurred, since several additional factors can affect the execution of the personalization. For instance, capping options may prevent execution, or the visitor may be part of a control group for the personalization (in which case Kameleoon does not display the personalization).
  • Not Exposed Reason: If the personalization was triggered but not displayed/activated, this field details the reason for the non-exposition. Possible values are:
    • GLOBAL_EXCLUSION (the visitor is part of the population globally excluded from all personalizations).
    • PERSONALIZATION_EXCLUSION (the visitor is part of the population excluded from the current personalization. For example, the visitor is in the control group).
    • PRIORITY (another personalization has higher priority).
    • SCHEDULE (personalization is currently off according to its schedule).
    • PERSONALIZATION_CAPPING (the personalization has reached its global capping in terms of visitors).
    • VISITOR_CAPPING (the visitor has reached a capping preventing the display of the personalization).
    • SCENARIO (the personalization won't be displayed because scenario conditions are not fulfilled).
    • SIMULATION (in simulation mode, the non-exposition was forced, which cannot happen in production; it is available if the personalization was triggered on the current page and the active property is false, else it will be null).
  • Date Modified: Date of the last change made to the personalization.

Variations​

When you click a personalization's ID, a menu opens. The first tab indicates the variation's name and ID, and JS/CSS, if code has been injected in the variation.

The Elements section lists all the elements that are supposed to be changed for a variation. It allows you to debug your campaigns and quickly see if the elements are detected on the page. Each element is represented by its selector. When the element is displayed in red, it means that the element is not detected on the page; in green, the element is detected on the page.

Configuration​

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

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

Targeting​

In this section, the targeting conditions are shown with logical links between the conditions.

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

Assets​

Segments​

In this tab, you'll find all active segments on the page, which lets you check that you have set the correct parameters and targeting works properly.

The segment is Triggered if your visit fulfilled the conditions at some point.

If you click the segment ID, you can access the conditions' details.

Custom Data​

In this tab, you will find all the configuration parameters of a custom data, which lets you check that you have set the correct parameters.

Add or remove columns by clicking Add columns.

  • ID: ID of the custom data.
  • Name: Name of the custom data.
  • Value: If one or several values have been associated with the custom data.
  • Format: String/Boolean/Number
  • Type: Unique/List
  • Scope: Page/Visitor/Visit
  • Local: Indicates if the custom data uses the visitor's local browser.
  • Mapping Identifier: Indicates if the custom data uses a unique identifier on your side, such as an account ID or email.
  • Learnable: Indicates if the "learnable" function has been activated or not on the custom data

Goals​

In this tab, you will your goals' configurations, so you can check that they convert properly.

Add or remove columns by clicking Add columns.

  • ID: The ID of the goal.
  • Name: The name of the goal.
  • Type:
    • Click
    • Scroll
    • URL
    • Engagement
    • Time spent
    • Page views
  • Converted: Whether the goal has been converted during the current visit or not.
  • Conversions: The total number of times you have converted this goal.
  • Revenue: The total revenue associated with this goal (if applicable).

Global custom script​

You will find the global script (equivalent to script tracking in the app) here.

Timeline​

You will find all the events related to your campaigns and their timestamp in this tab.

  • Load event: When Kameleoon starts to load.
  • Consent initialized: Consent initialized for A/B Testing or Personalization.
  • Consent enabled: Consent enabled for A/B Testing and/or Personalization.
  • Consent disabled: Consent disabled for A/B Testing and/or Personalization.
  • Custom data set: The custom data has been set with value XXXX.
  • Global script executed: The global script has been executed.
  • Experiment triggered: The experiment with ID XXX has been triggered.
  • Experiment activated: The experiment with ID XXX has been activated.
  • Variation displayed: The variation with ID XXX has been displayed.
  • Personalization activated: The personalization with ID XXX has been activated.
  • Personalization triggered: The personalization with ID XXX has been triggered.
  • Loading aborted: The loading has been aborted for reason XXX/The loading has been aborted for opt-out reasons.
  • Conversion triggered: The goal XXXX with ID XXX has been triggered.

Dev tools​

Performance analysis​

This tab allows you to analyze the script's composition and understand which parts of the script could slow down the website.

  • Script size: Script size according to CDN.
  • Script size (uncompressed): Overall size.
  • Last updated: Date of the script's last update.

The Engine section (in gray) should occupy more than 35% of the total weight. If it doesn't, the Performance score below will be POOR instead of OPTIMAL.

Some additional indicators are provided as guidelines you should follow:

  • Script size < 120 KB
  • No experiments (experiments running for more than three months)
  • Less than 50 segments
  • Less than 50 goals
  • Global custom script < 30 KB

Request analysis​

With the Request analysis tab, you can easily debug all requests.

Add or remove columns by clicking Add columns.

Visits analysis​

With the Visits analysis tab, you can find information on all visits:

  • The number of visits
  • The timestamp of the beginning of each visit
  • The number of pages viewed during each visit
  • The duration of each visit

Add or remove columns by clicking on Add columns.

Code synchronization​

You can also synchronize Microsoft Visual Studio (VS Code) with the Chrome extension. It allows you to automatically send any updates to Chrome via a websocket between VS Code and our Chrome extension to test your JS and CSS code. Chrome then injects the new code in the Kameleoon engine, and reloads the page.

Refer to this article for more information on the VS Code extension.

Custom code injection​

To use the Custom Code Injection feature:

  1. Open the Kameleoon Chrome extension.
  2. Click Custom code injection to access the page for managing your custom JavaScript code.
  3. Write or paste your code into the text field.
  4. Click Inject code.

The extension will execute the injected code on the current webpage.

Tag injection​

To inject the Kameleoon tag on a website:

  1. Select your environment (development, preview, test, production).
  2. Enter the code you want to inject.
  3. Click Inject tag.

Options​

Two additional options are available.

Block Kameleoon script​

This option is useful for developers that must work on their website without any Kameleoon experiment or personalization running on the page.

Block Kameleoon tracking request​

This option is useful if you do not want your own visits and conversions to impact results.

Troubleshooting: The extension does not load all data or is not working​

In exceptional cases, our Chrome extension may need to be reinstalled. Please follow these steps:

  1. Log out of Kameleoon by clicking your avatar in the upper-right corner and logging out.
  2. Close all windows and reopen Chrome.
  3. Go here and remove the Kameleoon extension.
  4. Download the extension again.
  5. Click Install, then navigate to your site.
  6. Open the Chrome console and go to the Kameleoon extension.
  7. Click Activate and you will be redirected to Kameleoon
  8. Log in to Kameleoon and go to your My Sites page. The installation will be completed.
  9. Close your site and reopen it.

The extension should load properly, and you will see the information displayed.

note

Please note that if you're not logged out, the installation might not work.

Web plugin​

The web plugin is a "light" version of the Chrome extension that works in other popular browsers, including Safari and Firefox.

The web plugin is responsive, so you can use it on your mobile devices as well. Currently, the plugin provides information about your experiments, personalizations, segments, custom data, and your goals' performance metrics.

To use it, you just have to add "/?kameleoonLightExtension=true" after your site's URL. For example:

https://www.yourwebsite.com/?kameleoonLightExtension=true