> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Website development - Best practices for A/B testing

> Follow website development best practices for HTML structure, code modularity, SPA support, and event management to optimize 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](../../../../developer-docs/apis/activation-api-js/api-reference/api-reference#runwhenelementpresent).
* **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](../../../../developer-docs/apis/activation-api-js/api-reference/api-reference#runwhenconditiontrue).
* **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](../advanced-experiment-types/set-up-experiment-single-page-app) to handle dataLayer information retrieval.

Refer to the guide on [**how to set up an experiment on a single-page app**](../advanced-experiment-types/set-up-experiment-single-page-app) for best practices.

## 4. Event management

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