Skip to main content

Website development - Best practices for A/B testing

Developing a website optimized for A/B testing campaigns requires consideration of several technical and structural elements. The following sections describe the key aspects.

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 are 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 are 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, used to detect elements rendered on the page here.
  • 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 is not yet available, wait to set the correct value directly, rather than updating an outdated value afterward. Refer to the Kameleoon runWhenConditionTrue API, used to detect when information is loaded on the page here.
  • 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 are not 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 latest 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.

Refer to 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 such as click, mousedown, or hover.