Troubleshooting the Graphic editor

The following section provides instructions to troubleshoot issues with the Graphic editor and describes best practices to avoid issues in the future.

​

What scenarios do the following tips resolve?

• When changes you made to an experiment’s variants in the Graphic editor don’t appear, even though you saved and simulated them.
• When edits you made of all pages with the Graphic editor don’t appear after pushing an experiment live.
• When the Graphic editor won’t load.

​

How do Graphic editors work?

While making changes with the Graphic editor seems easy, your webpage’s architecture (for example, how it’s coded) can make editing complicated. Like most visual editors built to create experiments, Kameleoon’s Graphic editor uses CSS selector paths to identify the elements you edit. Selectors are the cornerstone of any action you take in the Graphic editor. Kameleoon uses two types of CSS selector paths:

• Simple selectors, such as the unique ID of the element: Because it’s unique, it can’t repeat on a page, and you can’t assign it to another element on the same page. Therefore, changes you make to this element in the Graphic editor affect only that element.
• Combinator selectors: Kameleoon selects the element based on a specific relationship with its parent elements.

Kameleoon’s Graphic editor follows two straightforward rules:

• If Kameleoon finds an ID for the selected element: Kameleoon uses the ID by default to identify the element when the page loads and applies the changes.
• If Kameleoon doesn’t find an ID for the selected element: Kameleoon creates a combinator selector from the closest parent element that has an ID. For instance, if a product name element lacks an ID but the header has an ID, Kameleoon creates a unique path from the header element to the product name.

​

What causes issues?

In general, single-page applications generate element IDs dynamically, so the ID values and selector paths continuously change. However, Kameleoon can track these changes. To activate the tracking option, you must set an element selection method on a page by indicating a custom attribute. To do so:

1. Click Admin > Projects.
2. Click Edit on the row of the project you want to edit.
3. Click the Setup tab, then click Edit in the Technical configuration section.
4. In the Technical configuration step, under Is your website a dynamic website (SPA or PWA)?, toggle Enable support for dynamic websites to ON.
5. Under Set a custom attribute (optional) define your desired custom attribute (for example, data-id, data-qa).
6. Click Save changes.

​

The selector path used doesn’t allow for the precise selection of an element

Not all elements have an ID. When the ID is absent, Kameleoon generates a unique path from the closest parent element with an ID to the element you want to change. Here is an example of a selector path that identifies the block that contains product thumbnail images: #ProductSection-product-template > div:first-child > div:first-child > div:nth-of-type(6) > div:first-child > ul:nth-of-type(1) > div:first-child. This path starts at the parent block, ProductSection-product-template, and goes through five other child blocks before reaching the thumbnail block. So, the selector follows Product section template > block1 > block2 > block3 > block4 > block5 > thumbnail. Generally, the broader the selector path, the more likely the selector will fail to cover all use cases on the website. Because each website is unique, the selector limitation presents distinct challenges for Graphic editors. Product pages may have varied layouts (such as different HTML markups), so they require different selectors. For instance, some product pages may have a block for ratings, while others don’t. The inconsistency in element presence breaks the original selector path Kameleoon found when creating the variant. The risk of inconsistent element changes within an experiment grows proportionally to the length and breadth of the selector path Kameleoon identifies and depends on the dynamic nature of the product webpage layout. When the risk is too great, use other selection options Kameleoon offers from the hierarchy toolbar. You may find an HTML class that’s safer to use or ask a developer or CSM to create a CSS selector or validate a choice. Alternatively, you can have AI generate a path for an element.

1. Select an element.
2. In the left sidebar, click Edit selector.
3. Click AI generation > Validate.

​

Conflicting changes

One reason for the popularity and widespread use of Graphic editors is the ease with which they allow you to start experimentation without requiring any code. Changes are straightforward in the Graphic editor, but you must be cautious about introducing conflicting changes to your variants. Conflicting changes generally refer to edits made to a child element that override edits made to a parent element. An example includes editing the color of a text element (the child), then selecting the parent and changing the color again. Kameleoon doesn’t apply or display the changes correctly because the change to the child element renders first. To avoid conflicting changes, follow these rules:

• Never combine HTML code with other native editing capabilities of the Graphic editor, unless you understand the exact results.
• If you plan to make changes to the same element, ensure you always select the element with the same CSS selector. Watch out for elements consisting of multiple elements.

​

Graphic editor fails to load

There are a few reasons the Graphic editor may fail to load.

​

The Graphic editor fails to load for anyone

​

Step 1: Verify the Kameleoon script installation

If the Graphic editor isn’t loading, and you land on the login page or another destination, check whether the Kameleoon script is correctly installed on the page. To do this:

1. Open your browser’s developer tools.
   • On Mac, press Command + Option + I
   • On Windows, press Control + Shift + C
2. Navigate to the Elements tab and press Command + F (Mac) or Control + F (Windows) and search for Kameleoon in the DOM.

Alternatively, you can:

1. Open the Network tab.
2. Filter by Kameleoon after refreshing the page to confirm that the script loads.

• If the Kameleoon script is present: Move on to the next troubleshooting step.
• If the Kameleoon script isn’t present: You must install the script on the website to proceed.

To install the Kameleoon script, refer to the Web Experimentation installation guide Alternatively, if you have the Kameleoon Chrome extension installed:

1. In Developer tools, click the double arrows > Kameleoon.
2. Click Dev tools > Tag injection.
3. Enter your sitecode under Sitecode to inject.
4. Click Inject tag.

​

Step 2: Verify domain and subdomain configuration

Ensure that the domain and all relevant subdomains have been correctly configured in Kameleoon.

1. Click Admin > Projects.
2. Click Edit on the relevant project’s row, then click the Setup tab.
3. In the Technical configuration section, click Edit.
4. Under Domains and subdomains, add all necessary domains and subdomains.
   • For subdomains, use an asterisk (*). For example, *.mywebsite.com.
5. After adding the required domains, click Save changes.
6. To modify the main domain URL if needed, open the Overview tab and click Edit in the Main information section.

​

Step 3: Check for CORS policy errors

To ensure the Graphic editor functions correctly, check your browser’s console for any CORS (cross-origin resource sharing) policy errors.

1. Open the console using the following shortcuts:
   • On Mac: Command + Option + J
   • On Windows: Control + Shift + J
2. Look for any CORS-related errors in red, as shown in the image below.

If you encounter CORS policy issues, you must whitelist the following Kameleoon domains and subdomains in your server’s CORS policy configuration:

• *.kameleoon.com
• *.kameleoon.eu
• *.kameleoon.io

For the full list of domains to allow, see Kameleoon domains to allow.

​

The Graphic editor loads for some users and not for others

​

Step 1: Clear cache

You may be viewing an outdated version of your website, which could prevent the Graphic editor from loading. To resolve this issue:

Option 1: Empty your cache

1. Open the browser inspector using one of these shortcuts:
   • On Mac: Command + Option + I
   • On Windows: Control + Shift + C
2. Right-click the browser’s refresh button and select Empty cache and hard reload.

Once complete, try relaunching the Graphic editor.

Option 2: Use private browsing (incognito mode)

You can also try opening the Graphic editor in a private browsing window to ensure that no cached files are interfering.

​

Step 2: Allow third-party cookies

Ensure that your browser allows third-party cookies, as they’re essential for the Graphic editor to work properly. To enable third-party cookies:

1. Go to your browser’s Settings.
2. Navigate to Privacy & Security.
3. Locate the Third-party Cookies section and ensure they’re allowed.

​

Step 3: Turn off ad blockers

Ad blockers can sometimes interfere with the proper functioning of the Graphic editor. To resolve this issue, try one of these solutions:

1. Turn off your ad blocker and relaunch the Graphic editor.
2. Open a private browsing window where the ad blocker might not be active and relaunch the Graphic editor.
3. Try using another browser without ad blockers and see if the Graphic editor works there.

​

Step 4: Turn off other browser extensions

Check if you have any browser extensions activated that could interfere with the proper loading of the Graphic editor. Extensions related to privacy (such as Ghostery) or performance optimizers (uBlock Origin, for example) can prevent the editor from loading correctly.

​

Step 5: Turn off the VPN

Check your VPN app settings or taskbar for active connections and toggle it off if it’s enabled. Disconnecting from the VPN allows direct access to your network without routing through a different server, which may help load the Kameleoon Graphic editor correctly.

​

Step 6: Switch to a different Wi-Fi network

If the Graphic editor still won’t launch, there could be network-related issues. Try connecting to a different network and relaunch the editor.

​

Step 7: Use the Chrome Dev browser

The Chrome Dev browser is often more compatible with tools like the Kameleoon Graphic editor. If you’re facing issues with the standard Chrome browser, switch to Chrome Dev.

​

Step 8: Install the Graphic editor extension

Installing the Kameleoon Graphic editor extension can help bypass common errors, such as CORS policy issues, and improve the editor’s loading performance.

​

Step 9: Check firewall or security tools (such as Edgesuite or WAF)

If your company uses a firewall, Web Application Firewall (WAF), or proxy tool such as Edgesuite/Akamai, it may block Kameleoon Graphic editor requests. To resolve this: Contact your IT team and ask them to whitelist Kameleoon’s domains in the firewall/WAF configuration. The domains and subdomains listed in the Kameleoon domains to allow must be accessible. Ensure the firewall allows both HTTPS traffic (GET, POST, OPTIONS) and WebSocket connections to these domains. After updating the firewall configuration, relaunch the Graphic editor to confirm whether the issue persists.

​

Data discrepancies between Kameleoon and third-party analytics platforms

Kameleoon offers many analytics integrations that measure campaign impact. However, you may see different results (such as visits, visitors, or conversions) between the Kameleoon reporting system and the third-party analytics platform. Small variations are usually normal, even if the integration is correctly set up. Different analytics platforms often define metrics differently, and their configurations can differ. Some analytics platforms don’t manage ITP issues with the Safari browser, as Kameleoon does, and bot filtering rules aren’t identical. However, investigate discrepancies greater than 7–10%.

​

FAQ