Website development - Best practices for A/B testing

​

1. Clean and semantic HTML structure

• Proper use of HTML tags: Use semantic tags (such as <header>, <footer>, <section>, or <article>) 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 (such as those 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 (such as .cta-button or #main-header) to ensure they’re understandable.

​

2. Code modularity

• Separation of concerns: Keep HTML, CSS, and JavaScript well-separated to reduce complex dependencies. For JavaScript, expose complex logic to the window scope to allow reuse across different parts of the site. Exposing logic enables adding a product to the cart from a specific page or validating a form step efficiently.
• Mutation Observers: Use Mutation Observers to detect elements and monitor changes. Refer to the Kameleoon runWhenElementPresent API, which detects elements rendered on the page.
• Logs: Use console.log as a preferred way to debug.
• DataLayer (or equivalent object): Avoid changing 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. Refer to the Kameleoon runWhenConditionTrue API, which detects when information loads on the page.
• DOM handling: Avoid re-rendering the DOM once it has loaded. Re-rendering overwrites changes applied by Kameleoon and makes it difficult to detect when the page completes loading.

​

3. SPA (Single Page Application)

• Cookies and LocalStorage (LS): Implement clear cookie or LS management to identify different steps of a form.
• Events rendering: To ensure that Kameleoon changes persist and aren’t overwritten, inform Kameleoon when the page or a specific element has finished rendering by using one of the following methods:
  • Define a window variable, such as window.pageLoadForKam = true.
  • Trigger an event on the page that Kameleoon can listen for, such as “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 (such as form steps). Instead of stacking new layers on each change, remove the old dataLayer entries before adding new ones. This removal ensures that Kameleoon retrieves the up-to-date values, as it waits for the dataLayer definition before processing the data. If outdated values persist across pages, Kameleoon may execute before the dataLayer updates, leading to the retrieval of stale data from the previous page. Otherwise, refer to the “custom setup” section of the Single Page App article to handle dataLayer information retrieval.

​

4. Event management

• Multiple triggers: Allow for the manipulation of events such as click, mousedown, or hover.

​

FAQ