> ## 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.

# Kameleoon.API.Utils

> Reference for the Kameleoon.API.Utils helper methods for listeners, timers, hashing, URL parameters, and HTTP requests.

This module provides utility methods for common operations.

## addEventListener

The `addEventListener()` method attaches an event handler to the specified element.

```javascript theme={null}
var popin = document.createElement("div");
popin.id = "kameleoonPopin";
popin.innerHTML = "<img src='https://www.mywebsite.com/myImage.jpg'/>";
document.body.appendChild(popin);

Kameleoon.API.Utils.addEventListener(popin, "mousedown", function (event) {
  document.body.removeChild(popin);
});
```

> [!NOTE]
>
> Kameleoon resets all event listeners created via this API during engine reloads. Use this method to add listeners in SPAs to ensure proper cleanup.

**Arguments**

| Name | Type | Description |
| - | - | - |
| element | Object | Target element for the listener. This field is mandatory. |
| eventType | String | Event name. This field is mandatory. |
| callback | Function | Function to execute when the event triggers. This field is mandatory. |

## addUniversalClickListener

The `addUniversalClickListener()` method attaches a click handler that listens for mouse clicks on desktop and touchdown events on mobile devices and tablets. For mobile devices, a touchdown occurs if the engine detects a `touchstart` event followed by a `touchend` event without an intermediate `touchmove`.

```javascript theme={null}
let btn = document.querySelector("#MyButton");

Kameleoon.API.Utils.addUniversalClickListener(btn, function (event) {
  let goalID = 1234;
  Kameleoon.API.Goals.processConversion(goalID);
});
```

> [!NOTE]
>
> Kameleoon resets all listeners created via this API during engine reloads, facilitating cleanup in SPAs.

> [!NOTE]
>
> On desktop devices, right-clicks trigger this method, for example, when opening a link in a new tab.

**Arguments**

| Name | Type | Description |
| - | - | - |
| element | Object | Target element for the listener. This field is mandatory. |
| callback | Function | Function to execute when the click event triggers. This field is mandatory. |

## clearInterval

The `clearInterval()` method clears a timer you set through `setInterval()`.

```javascript theme={null}
var myInterval = Kameleoon.API.Utils.setInterval(function () {
  if (window.dataLayer != null) {
    Kameleoon.API.Utils.clearInterval(myInterval);
  }
}, 1000);
```

**Arguments**

| Name | Type | Description |
| - | - | - |
| intervalId | Number | Timer ID returned by the `setInterval()` method. This field is mandatory. |

## clearTimeout

The `clearTimeout()` method clears a timer you set through `setTimeout()`.

```javascript theme={null}
var myTimeout = Kameleoon.API.Utils.setTimeout(function () {
  var popin = document.createElement("div");
  popin.id = "kameleoonPopin";
  popin.innerHTML = "<img src='https://www.mywebsite.com/myImage.jpg'/>";
  document.body.appendChild(popin);
}, 5000);

Kameleoon.API.Utils.addEventListener(document.body, "mousedown", function () {
  Kameleoon.API.Utils.clearTimeout(myTimeout);
});
```

**Arguments**

| Name | Type | Description |
| - | - | - |
| timeoutId | Number | Timer ID returned by `setTimeout()`. |

## computeHash

The `computeHash()` method computes a hash from a string. Use this to process unique data without manipulating sensitive personal information directly.

```javascript theme={null}
var emailId = Kameleoon.API.Utils.createHash("myemail@mail.com");
Kameleoon.API.Data.setCustomData("VisitorEmail", emailId);
```

**Arguments**

| Name | Type | Description |
| - | - | - |
| string | String | The source string from which to compute the hash. |

**Return value**

| Name | Type | Description |
| - | - | - |
| hash | String | Resulting hash. The algorithm used is the same as the [implementation of `hashCode()` for java.lang.String](https://www.w3schools.com/java/ref_string_hashcode.asp). |

## getURLParameters

The `getURLParameters()` method parses the current URL and returns all detected parameters. This method supports both search (?) and hash (#) parameters.

```javascript theme={null}
var parameters = Kameleoon.API.Utils.getURLParameters();

if (parameters.productID != null) {
  Kameleoon.API.Events.trigger("ProductPage");
}
```

**Return value**

| Name | Type | Description |
| - | - | - |
| parameters | Object | Object with parameter names as keys and parameter values as values. |

## performRequest

The `performRequest()` method initiates a call to a remote web server.

```javascript theme={null}
Kameleoon.API.Utils.performRequest(
  "https://www.my_web_server_url.com",
  function () {
    if (this.readyState == 4 && this.status == 200) {
      eval(this.responseText);
    }
  },
  function() {
    console.log("Request cancelled");
  },
  2000
);
```

**Arguments**

| Name | Type | Description |
| - | - | - |
| url | String | The URL of the remote server. This field is mandatory. |
| readyStateHandler | Function | A callback function that the method runs when the server sends a reply. The method passes the event argument to this function ([load event](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/load_event)) and the method binds the underlying XMLHttpRequest object to the callback. So all [properties from XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#Properties) are available inside the callback via **this**. This field is optional. |
| errorHandler | Function | A callback function that the method runs when an error occurs. The method passes the event argument to this function ([error event](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequestEventTarget/onerror) or [timeout event](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/timeout)) and the method binds the underlying XMLHttpRequest object to the callback. So all [properties from XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#Properties) are available inside the callback via **this**. This field is optional. |
| timeout | Number | Wait time in milliseconds before cancelling the request. Defaults to 5000 milliseconds. |

## querySelectorAll

The `querySelectorAll()` method returns all document elements matching the specified CSS selectors as a static `NodeList` object.

```javascript theme={null}
var foundElements = Kameleoon.API.Utils.querySelectorAll(".kameleoonClassName");

foundElements.forEach(function (element) {
  element.style.display = "none";
});
```

> [!NOTE]
>
> This method supports selectors with **:contains** and **:eq**.

**Arguments**

| Name | Type | Description |
| - | - | - |
| selector | String | One or more CSS selectors. This field is mandatory. |

**Return value**

| Name | Type | Description |
| - | - | - |
| elements | Array | List of elements matching the query. |

## setInterval

The `setInterval()` method executes a function or expression at the specified interval in milliseconds.

Kameleoon resets all intervals created via this API during engine reloads. Use this method in SPAs to ensure proper cleanup.

```javascript theme={null}
var countdown = 10;
var timer = document.createElement("div");
timer.innerHTML = countdown.toString();
document.body.appendChild(timer);

var myInterval = Kameleoon.API.Utils.setInterval(function () {
  countdown--;
  timer.innerHTML = countdown.toString();

  if (countdown == 0) {
    Kameleoon.API.Utils.clearInterval(myInterval);
  }
}, 1000);
```

**Arguments**

| Name | Type | Description |
| - | - | - |
| function | Function | JavaScript function that the method runs periodically. This field is mandatory. |
| milliseconds | Number | Interval duration in milliseconds. Defaults to 200 milliseconds. |

**Return value**

| Name | Type | Description |
| - | - | - |
| intervalId | Number | Timer ID for use with `clearInterval()`. |

## setTimeout

The `setTimeout()` method executes a function or expression after the specified number of milliseconds.

Kameleoon resets all timeouts created via this API during engine reloads. Use this method in SPAs to ensure proper cleanup.

```javascript theme={null}
var myTimeout = Kameleoon.API.Utils.setTimeout(function () {
  Kameleoon.API.Events.Trigger("5 seconds elapsed");
}, 5000);
```

**Arguments**

| Name | Type | Description |
| - | - | - |
| function | Function | JavaScript function that the method runs periodically. This field is mandatory. |
| milliseconds | Number | Wait time in milliseconds before executing the function. Defaults to 200 milliseconds. |

**Return value**

| Name | Type | Description |
| - | - | - |
| timeoutId | Number | Timer ID for use with `clearTimeout()`. |