How to install and use the Kameleoon Chrome Extension?

3

min

quiz

Installation of the extension

First, 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 on the Kameleoon tab from the web console, then on the “Activate” button

Then let yourself be guided by the extension to activate it! Your login page to your Kameleoon back-office opens automatically. Enter your login details.

The “My websites” page opens.

That will activate the extension and give you the authorisations to use the extension on all websites configured in your Kameleoon account.

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

Note: If you add a new website to your Kameleoon account, you will see the following message:

Simply click on the button to update your authorizations. A message will then confirm the update.

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

Several tabs are available in the extension :

  • Campaigns
  • Assets
  • Dev tools
  • Options

You also get access to a dashboard page by clicking on the Kameleoon logo, from which you can add custom widgets.

Dashboard

The section that appears by default when the extension is opened is a dashboard.

With one click on the + icon you can build and customize this dashboard to have in front of you the information that is essential to you.

Each widget can be enlarged, reduced, closed…

You can increase the number of lines by clicking on the three-point menu at the top left.

The inserts at your disposal are as follows:

  • Consent: indicates whether consent has been given for A/B testing/personalisation (“true” may mean either that you have given your consent or that your consent is not required; “false” means either 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 (A/B tests): lists all A/B tests running on the page and indicates their ID, evaluates targeting (true/false), also indicates the ID of the registered variation and displayed variation;
  • Personalizations: same for all personalizations running on the page;
  • Site Code: you can find it at a glance!
  • Visitor Code: indicates the visitor code that has been assigned to you, which allows you to monitor (among other things) the accounting of visits.

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

Campaigns

Experiments

You will find in this tab all your experiments running on the page.

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

  • Id: ID of the test. On click you can display the details.
  • Name: Name of the test.
  • 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. This means that your visit fulfilled the experiment’s segment conditions at some point.
  • 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 this experiment, or capping options may have been set).
  • Displayed Variation: ID of the variation displayed to you (“No variation” when not targeted; “0” when targeted but assigned to the reference).
  • Associated Variation: ID of the variation on which you have been assigned with the 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 test.
  • Assignment Time: When you were assigned to the variation. If this is the original and you have not been targeted, the value is “Nos assigned yet”.
  • Online since: The date the experiment was put online.

Variations

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

Configuration

The entire configuration of the experiment is displayed in the extension.

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

Targeting

In this section, the targeting conditions are shown in a much more intelligible way than in the console, with logical links between the conditions.

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

 

Personalizations

You will find in this tab all your personalizations running on the page.

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

  • Id: ID of the personalization. On click you can display the details.
  • Name: Name of the personalization.
  • Triggered: Whether or not you are targeted.
  • Triggered In Visit: True if the personalization was triggered in the current visit, else false. This means that your visit fulfilled the personalization’s segment conditions at some point.
  • Active: True if the personalization is currently active on the page, else false.
  • Associated Variation: ID of the variation on which you have been assigned with the 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 action was displayed, since several additional factors can affect the execution of the action. For instance, capping options may prevent the execution, or the visitor may be part of a control group for this personalization (in which case Kameleoon also does not display the personalization’s action).
  • Not Exposed Reason: If personalization was triggered but not displayed / activated, this field represents 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, ie he falls into the control group for this personalization);
    • 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 some of the scenario conditions are not fulfilled);
    • SIMULATION (in the simulation mode, the non exposition was forced. This reason cannot happen in production). This property 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 on the ID of a personalization, a menu opens. The first tab indicates the name and ID of the variation, and JS/CSS if code has been injected on the variation.

Configuration

The entire configuration of the personalization is displayed in the extension.

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

Targeting

In this section, the targeting conditions are shown in a much more intelligible way than in the console, with logical links between the conditions.

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

Assets

Segments

In this tab, you will find all the the active segments on the page, which makes it possible to check that you have set the correct parameters and that the targeting works properly.

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

If you click on the segment ID on the left, you can access the details of the conditions.

Custom Data

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

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

  • Id: ID of the custom data.
  • Name: Name of the custom data. 
  • Value: If one or several value(s) have been associated to the custom data.
  • Format: String/Boolean/Number
  • Type: Unique/List
  • Scope: Page/Visitor/Visit
  • Local: Indicates if the custom data uses the local of the visitor’s browser.
  • Mapping Identifier: Indicates if the custom data uses an 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 find the configuration of each goal associated with your running experiences so you can check that they are achieved when they need to.

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

  • 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 here the global script (equivalent to script tracking in the back office).

Dev tools

Performance analysis

This tab allows to analyze the composition of the script and to understand which parts of the script can possibly slow down the website.

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

The “Engine” part (in grey) must normally occupy more than 35% of the total weight. If it is not the case, 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 (A/B tests only- running for more than 3 months;
  • Less than 50 segments;
  • Less than 50 goals;
  • Global custom script < 30 KB.

Request analysis

With this tab, you can easily debug all requests.

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

 

Visits analysis

With this tab, you can find information on all the visits you have made.

  • 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” to customize the table.

Code synchronization

You can also synchronize Microsoft Visual Studio (VS Code) with the Chrome extension. It will allow you to automatically send any update 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.

To use this feature you can follow this link: Documentation

Tag injection

Inject the Kameleoon tag on a website in no time!

Select your environment (development/ preview/test/production), select the tag and the site code to inject, click, it’s done! You can close the console afterwards, it will be as if it is natively on the page.

Options

Two additional options are available.

Block Kameleoon script

Useful for developers that need to work on their website without any Kameleoon experiment or personalization running on the page.

Block Kameleoon tracking request

Useful for not having an impact on the results with your own visits and conversions.

 

Troubleshooting: The extension does not load all data

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

  • Log out of Kameleoon (click on your name in the upper right corner and log out);
  • Close all windows and reopen Chrome;
  • Go here and remove the Kameleoon extension;
  • Download the extension again;
  • Click on “Install” then go to your site;
  • Open the Chrome console and go to the Kameleoon extension;
  • Click on “Activate” and you will be redirected to Kameleoon
  • Log in to Kameleoon and go to your “My Sites” page. The installation will be completed;
  • Close the tab of your site and access your site again.

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