Skip to main content
To develop a website that’s easy to use for A/B testing campaigns, it’s crucial to consider several technical and structural elements. Here are the key aspects.

​
1. Clean and semantic HTML structure

  • Proper use of HTML tags: Use semantic tags (<header>, <footer>, <section>, <article>, and similar tags) to improve content understanding and manipulation.
  • Unique identifiers: Add clear and relevant IDs (id="unique-id") or classes (class="class-name") to elements for precise targeting.
  • Avoid unnecessary dynamic classes: Avoid auto-generated classes unless they’re meaningful (for example, from certain CSS frameworks).
  • Custom tags: If you use dynamic classes, add non-dynamic attributes like custom-id to simplify element selection.
  • Explicit names: Use clear and descriptive names for classes, IDs, and variables (for example, .cta-button, #main-header) to ensure they’re understandable, even to outsiders.

​
2. Code modularity

  • Separation of concerns: Keep HTML, CSS, and JavaScript well-separated to reduce complex dependencies. For the JavaScript part, you can expose complex logic to the window scope, so that other parts of the site can reuse it. For example, this can enable adding a product to the cart from a specific page or validating a form step efficiently.
  • Mutation Observers: Enable the use of Mutation Observers, which is an optimized way to detect elements on the page and monitor changes. Check out the specific API, runWhenElementPresent, used to detect elements rendered on the page here.
  • Logs: Allow the use of console.log as a preferable way to debug.
  • DataLayer (or equivalent object): Avoid changing the values of the same layer of the dataLayer. If the required information isn’t yet available, wait to set the correct value directly, rather than updating an outdated value afterward. Check out the specific API, runWhenConditionTrue, used to detect when information loads on the page here.
  • DOM handling: Avoid re-rendering the DOM once it has loaded, as this will overwrite the changes applied by Kameleoon and make it difficult to detect when the page has completed loading.

​
3. SPA (single-page app)

  • Cookies and LocalStorage (LS): Implement clear cookie or LS management to identify different steps of a form, for example.
  • Events rendering: To ensure that Kameleoon changes persist and aren’t overwritten, you can inform Kameleoon when the page or a specific element has finished rendering by using one of the following methods:
    • Define a window variable, for example, window.pageLoadForKam = true.
    • Trigger an event on the page that Kameleoon can listen for, for example, using “pageLoaded” or “contentUpdated”: window.addEventListener('pageLoaded', () => { runKameleoonVariationCode }).
    • Add a specific class or attribute to the <body> tag or the target element.
  • DataLayer (or equivalent object): Update the dataLayer values after every URL change, including page transitions within the same URL (for example, form steps). Instead of stacking new layers on each change, remove the old dataLayer entries before adding new ones. Removing the old entries ensures that Kameleoon retrieves the most recent values, as it waits for the dataLayer to exist before processing the data. If outdated values persist across pages, Kameleoon may execute before your site updates the dataLayer, leading to the retrieval of stale data from the previous page. Otherwise, refer to the “custom setup” section of this article to handle dataLayer info retrieval well.
Follow the guide on how to set up an experiment on a single-page app for best practices.

​
4. Event management

  • Multiple triggers: Allow for the manipulation of events: click, mousedown, hover, and similar events.