Skip to main content

JavaScript / TypeScript SDK

With the Kameleoon JavaScript SDK, you can run experiments and activate feature flags. Integrating our SDK into your web application is easy, and its footprint (memory and network usage) is low.

Getting started: For help getting started, see the developer guide.

Changelog: Details on the latest version of JavaScript / TypeScript SDK can be found in the changelog.

SDK methods: For the full reference documentation of the JavaScript SDK, see the reference section.

Developer guide​

This section will help you get started as well as introduce you to some of the more advanced concepts.

Getting started​

Installation​

The Kameleoon SDK Installation tool is best method to install the SDK quickly. The SDK Installer helps you install the SDK of your choice, generate a basic code sample, and configure external dependencies if needed.

To use the SDK Installation tool, install and run it globally:

npm install --global @kameleoon/sdk-installer
kameleoon-sdk

Or run it directly with npx:

npx @kameleoon/sdk-installer
note

You can also inject the JavaScript SDK into your app as a single file using the <script> tag. You can then access all SDK methods using the global object KameleoonSDK.

Example:

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My App</title>
    <script src="https://static.kameleoon.com/kameleoonSDK-4.9.1.js"></script>
    <script type="module" src="app.js"></script>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>
app.js
const { KameleoonClient, CustomData } = KameleoonSDK;

To always use the latest version of a major release, use the following script, where 4 is the current major version:

https://static.kameleoon.com/kameleoonSDK-4-latest.js

To always stay on a specific version, specify the full version number instead. For example, for version 4.9.1, which is the earliest version available as a static script, use the following:

https://static.kameleoon.com/kameleoonSDK-4.9.1.js

Versions can be referenced on the release page.

Initialize the Kameleoon Client​

Here is a step-by-step guide for configuring the JavaScript SDK for your application.

import {
  Environment,
  KameleoonClient,
  SDKConfigurationType,
} from '@kameleoon/javascript-sdk';

// -- Optional configuration
const configuration: Partial<SDKConfigurationType> = {
  updateInterval: 20,
  environment: Environment.Production,
  domain: '.example.com',
};

const client = new KameleoonClient({ siteCode: 'my_site_code', configuration });

// -- Waiting for the client initialization using `async/await`
async function init(): Promise<void> {
  await client.initialize();
}

init();

// -- Waiting for the client initialization using `Promise.then()`
client
  .initialize()
  .then(() => {})
  .catch((error) => {});

To start, developers need to create an entry point for the JavaScript SDK by creating a new instance of Kameleoon Client.

Use KameleoonClient to run feature experiments and retrieve the status of feature flags and their variations.

KameleoonClient initialization is performed asynchronously to ensure that the Kameleoon API call was successful. For initialization, use the method initialize(). Use async/await, Promise.then() or any other method to handle asynchronous client initialization.

Arguments​
NameTypeDescription
siteCode (required)stringThis is a unique key of the Kameleoon project you are using with the SDK. This field is mandatory.
configuration (optional)Partial<SDKConfigurationType>Client's configuration
externals (optional)ExternalsTypeExternal implementation of SDK dependencies (External dependencies)
stubMode (optional)booleanWhen set to true, the client will operate in stub mode and perform no operations. In this mode, all method calls execute no actions, ensuring that no external actions or side effects occur.
Configuration Parameters​
NameTypeDescriptionDefault Value
updateInterval (optional)numberSpecifies the refresh interval, in minutes, that the SDK fetches the configuration for the active experiments and feature flags. The value determines the maximum time it takes to propagate changes, such as activating or deactivating feature flags or launching experiments, to your production servers. If left unspecified, the default interval is set to 60 minutes. Additionally, we offer a streaming mode that uses server-sent events (SSE) to push new configurations to the SDK automatically and apply new configurations in real-time, without any delays.60
environment (optional)Environment | stringfeature flag environmentEnvironment.Production
targetingDataCleanupInterval (optional)numberinterval in minutes for cleaning up targeting data, minimum value is 1 minuteundefined (no cleanup will be performed)
cookieDomain (optional)stringdomain to which the cookie belongs.undefined
networkDomain (optional)stringcustom domain the SDKs uses for all outgoing network requests. Commonly used for proxying. The format is second_level_domain.top_level_domain (for example, example.com). If an invalid format is specified, the SDK uses the default Kameleoon value.undefined
requestTimeout (optional)numbertimeout in milliseconds for all SDK network requests, if timeout is exceeded request will fail immediately10_000 (10 seconds)
trackingInterval (optional)numberSpecifies the interval for tracking requests in milliseconds. All visitors who were evaluated for any feature flag or had associated data are included in this tracking request, which is performed once per interval. The minimum value is 100 ms and the maximum value is 1_000 ms1_000 (1 second)
defaultDataFile (optional)stringThe defaultDatafile feature ensures the Kameleoon SDK is always READY by providing a fallback configuration when no cached data file exists. Developers can preload a valid configuration by fetching it from https://sdk-config.kameleoon.eu/v3/<sitecode> and passing it as defaultDatafile during initialization. When a dateModified timestamp (in milliseconds) is provided and is newer than the cached version, the SDK will use the default datafile instead of the cached version. If dateModified is omitted, the default datafile is only applied when no cached version exists. This ensures the SDK always has a valid configuration, whether default, cached, or updated.undefined
note

Do not use several client instances in one application, as it is not fully supported yet. Several client instances may lead to local storage configuration being overwritten and cause bugs.

Activating a feature flag​

Assigning a unique ID to a user​

To assign a unique ID to a user, use the getVisitorCode() method. If a visitor code doesn’t exist (from the request headers cookie), the method generates a random unique ID or uses a defaultVisitorCode that you generated. The ID is then set in a response headers cookie.

If you are using Kameleoon in Hybrid mode, calling the getVisitorCode() method ensures that the unique ID (visitorCode) is shared between the application file engine.js (previously named kameleoon.js), and the SDK.

Retrieving a flag configuration​

To implement a feature flag in your code, you must first create a feature flag.

To determine if a feature flag is active for a specific user, you need to retrieve its configuration. Use the getFeatureFlagVariationKey() or isFeatureFlagActive() method to retrieve the configuration based on the featureKey.

Use the isFeatureFlagActive() method if you want to retrieve the configuration of a simple feature flag that has only an ON or OFF state.

The getFeatureFlagVariationKey() method retrieves a feature experiment's configuration with several feature variations. You can use the method to get a variation key for a given user by providing the visitorCode and featureKey as mandatory arguments.

Feature flags can have associated variables that you can use to customize their behavior. To retrieve these variables, use the getFeatureFlagVariables() method. This method checks whether the user is targeted, finds the visitor’s assigned variation, saves it to storage, and sends a tracking request.

note

To check if a feature flag is active, you only need to use one method. Choose isFeatureFlagActive if you want to know if a feature flag is on or off. For more complex scenarios, like dynamically changing the feature's behavior, use getFeatureFlagVariables.

Adding data points to target a user or filter / breakdown visits in reports​

To target a user, ensure you’ve added relevant data points to their profile before retrieving the feature variation or checking if the flag is active. Use the addData() method to add these data points to the user’s profile.

To retrieve data points collected on other devices or to access past data points about a user (which would have been collected client-side if you are using Kameleoon in Hybrid mode), use the getRemoteVisitorData() method. This method asynchronously fetches data from our servers. However, it is important to call getRemoteVisitorData() before retrieving the variation or checking if the feature flag is active, as this data might be required to assign a user to a given feaure flag variation.

To learn more about available targeting conditions, read our detailed article on the subject.

Additionally, the data points you add to the visitor profile will be available when analyzing your experiments, allowing you to filter and break down your results by factors like device and browser. Kameleoon Hybrid mode automatically collects a variety of data points on the client-side, making it easy to break down your results based on these pre-collected data points. See the complete list here.

If you need to track additional data points beyond what's collected automatically, you can use Kameleoon's Custom Data feature. Custom Data allows you to capture and analyze specific information relevant to your experiments. To ensure your results are accurate, filter out bots using the userAgent data type. You can learn more about this here. Don't forget to call the flush() method to send the collected data to Kameleoon servers for analysis.

Tracking flag exposition and goal conversions​

Kameleoon will automatically track visitors’ exposition to flags as soon as you call one of these methods:

  • getFeatureFlagVariationKey()
  • getFeatureFlagVariable()
  • getFeatureFlagVariables()
  • isFeatureFlagActive()

When a user completes a desired action (for example, making a purchase), it counts as a conversion. To track conversions, you must use the trackConversion() method, and provide the visitorCode and goalId parameters.

Sending events to analytics solutions​

To track conversions and send exposure events to your customer analytics solution, you must first implement Kameleoon in Hybrid mode. Then, use the getEngineTrackingCode() method.

The getEngineTrackingCode method retrieves the unique tracking code required to send exposure events to your analytics solution. Using this method allows you to record events and send them to your desired analytics platform.

Using a custom bucketing key​

By default, Kameleoon uses a unique, anonymous visitor ID (visitorCode) to assign users to feature flag variations. This ID is typically generated and stored on the user's device (in a browser cookie for client-side and server-side SDKs—in persistent storage for mobile SDKs). However, in certain scenarios you may need to ensure all users of the same organization see the same variant of a feature flag.

The Custom Bucketing Key option allows you to override this default behavior by providing your own custom identifier for bucketing. This override ensures that Kameleoon's assignment logic uses your specified key instead of the default visitorCode.

Use cases​

Using a custom bucketing key is essential for maintaining consistency and accuracy in your feature flag assignments, particularly in these situations:

  • Account-level or organizational experiments: For B2B products or scenarios where you want to assign all users from the same organization to the same variation, you can use an identifier like an accountId. Custom bucketing keys are crucial for A/B testing features that impact an entire team or company.

By implementing a custom bucketing key, you ensure greater consistency and accuracy in your experiments, leading to more reliable results and a better user experience.

Technical details​

When you configure a custom bucketing key for a feature flag, you provide Kameleoon with a specific identifier from your application's data:

client.addData(visitorCode, new CustomData(index, 'newVisitorCode'));
tip

More information in addData()

  • Providing the custom key: You provide your custom identifier to the Kameleoon SDK using the addData() method. In this method, you will pass your chosen custom bucketing key as a CustomData object. Here, newVisitorCode refers to the identifier you wish to use for your bucketing (for example, the new userId or accountId).
caution

For the custom bucketing key to function correctly, it must also be defined and configured for the feature flag during the flag creation or editing process. Without this corresponding configuration, the SDK's bucketing will not apply your custom key. For detailed instructions on how to set this up in Kameleoon, refer to this article.

  • Bucketing logic: Once a custom bucketing key is provided through the addData() method, all hash calculations for assigning users to variations will use this newVisitorCode (your custom key) instead of the default visitorCode. Using the newVisitorCode means that the bucketing decision is tied to your custom identifier, ensuring consistent assignments across various contexts where that identifier is present.
  • Data tracking and analytics: It's crucial to note that while the newVisitorCode (your custom key) is used for bucketing decisions, all subsequent data (tracking events and conversions, for example) is sent and associated with the original visitorCode. This separation ensures that your analytics accurately reflect individual user journeys and interactions within your experiment's broader context, even when bucketing is performed at a higher level (like an account) or across multiple devices/sessions. Your original visitor data remains intact for comprehensive reporting.

Technical requirementes​

To effectively use a custom bucketing key:

  • The key must be a string.
  • It must be unique for the entity you intend to bucket (for example, if using a userId, each user's ID should be unique).
  • The key must be available to the SDK at the exact moment the feature flag decision is evaluated for that user or request.

Targeting conditions​

The Kameleoon SDKs support a variety of predefined targeting conditions that you can use to target users in your campaigns. For the list of conditions supported by this SDK, see use visit history to target users.

You can also use your own external data to target users.

Logging​

The SDK generates logs to reflect various internal processes and issues.

Log levels​

The SDK supports configuring limiting logging by a log level.

import { KameleoonClient, KameleoonLogger, LogLevel } from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({ siteCode: 'my_site_code', configuration });

// The `NONE` log level does not allow logging.
client.setLogLevel(LogLevel.NONE);
// Or use directly KameleoonLogger
KameleoonLogger.setLogLevel(LogLevel.NONE);

// The `ERROR` log level only allows logging issues that may affect the SDK's primary behavior.
client.setLogLevel(LogLevel.ERROR);
// Or use directly KameleoonLogger
KameleoonLogger.setLogLevel(LogLevel.ERROR);

// The `WARNING` log level allows logging issues which may require additional attention.
// It extends the `ERROR` log level.
// The `WARNING` log level is a default log level.
client.setLogLevel(LogLevel.WARNING);
// Or use KameleoonLogger
KameleoonLogger.setLogLevel(LogLevel.WARNING);

// The `INFO` log level allows logging general information on the SDK's internal processes.
// It extends the `WARNING` log level.
client.setLogLevel(LogLevel.INFO);
// Or use KameleoonLogger
KameleoonLogger.setLogLevel(LogLevel.INFO);

// The `DEBUG` level logs additional details about the SDK’s internal processes and extends the `INFO` level
// with more granular. diagnostic output.
// This information is not intended for end-user interpretation but can be sent to our support team
// to assist with internal troubleshooting.
client.setLogLevel(LogLevel.DEBUG);
// Or use KameleoonLogger
KameleoonLogger.setLogLevel(LogLevel.DEBUG);

Custom handling of logs​

The SDK writes its logs to the console output by default. This behaviour can be overridden.

note

Logging limiting by a log level is performed apart from the log handling logic.

import { KameleoonClient, KameleoonLogger, IExternalLogger, LogLevel } from '@kameleoon/javascript-sdk';

export class CustomLogger implements IExternalLogger {
  // `log` method accepts logs from the SDK
  public log(level: LogLevel, message: string): void {
    // Custom log handling logic here. For example:
    switch (level) {
      case LogLevel.DEBUG:
        console.debug(message);
        break;
      case LogLevel.INFO:
        console.info(message);
        break;
      case LogLevel.WARNING:
        console.warn(message);
        break;
      case LogLevel.ERROR:
        console.error(message);
        break;
    }
  }
}

const client = new KameleoonClient({
  siteCode: 'my_site_code',
  externals: {
    logger: new CustomLogger(),
  },
});

// Log level filtering is applied separately from log handling logic.
// The custom logger will only accept logs that meet or exceed the specified log level.
// Ensure the log level is set correctly.
client.setLogLevel(LogLevel.DEBUG);
// Or use KameleoonLogger
KameleoonLogger.setLogLevel(LogLevel.DEBUG);

Domain information​

You provide a domain as the domain in the KameleoonClient configuration, which is used for storing Kameleoon visitor code in cookies. Domains are important when working with the getVisitorCode and setLegalConsent methods. The domain you provide is stored in the cookie as the Domain= key.

Setting the domain​

The domain you provide indicates if the URL address can use the cookie. For example, if your domain is www.example.com. the cookie is only available from a www.example.com URL. This means pages with the app.example.com domain can't use the cookie.

For more fllexibility with subdomains, you can specify the domain with a period (.). For example, the domain .example.com allows the cookie to function on both app.example.com and login.example.com.

note

You can't use regular expressions, special symbols, protocol, or port numbers in the domain. Additionally, a specific list of subdomains can't be used with the prefix ..

Here's a small domain cheat sheet:

DomainAllowed URLsDisallowed URLs
www.example.com✅www.example.com❌ app.example.com
✅ example.com❌ .com
.example.com = example.com✅ example.com❌ otherexample.com
✅ www.example.com
✅ app.example.com
✅ login.example.com
https://www.example.com⛔ bad domain⛔ bad domain
www.example.com:4408⛔ bad domain⛔ bad domain
.localhost.com = localhost⛔ bad domain⛔ bad domain

Developing on localhost​

localhost is always considered a bad domain, making testing the domain when developing on localhost difficult.

There are two ways to avoid this issue:

  • Don't specify the domain field in the SDK client while testing.
  • Create a local domain for localhost. For example:
    • Navigate to /etc/hosts on Linux or to c:\Windows\System32\Drivers\etc\hosts on Windows.
    • Open hosts with file super user or administrator rights.
    • Add a domain to the localhost port, for example: 127.0.0.1 app.com
    • Now you can run your app locally on app.com:{my_port} and specify .app.com as your domain

External dependencies​

SDK external dependencies use the dependency injection pattern to give you the ability to provide your own implementations for certain parts of an SDK.

note

In the JavaScript SDK, all external dependencies have default implementations, which use a native browser API so there's no need to provide them unless another API is required for specific use cases.

Here's the list of available external dependencies:

DependencyInterfaceRequired/OptionalAPI UsedDescription
storageIExternalStorageOptionalBrowser localStorageUsed for storing all the existing and collected SDK data.
requesterIExternalRequesterOptionalBrowser fetchUsed for performing all network requests.
eventSourceIExternalEventSourceOptionalBrowser EventSourceUsed for receiving Server Sent Events for Real Time Update capabilities.
visitorCodeManagerIExternalVisitorCodeManagerOptionalBrowser cookieUsed for storing and synchronizing visitor codes.
loggerILoggerOptionalCustom implementationUsed for custom handling of logs from the SDK. Lets you define how logs are processed and their output.

The following example implements external dependencies. To import an interface from an SDK, create a class that implements the interface and pass the instantiated class to the SDK.

Storage​

import { IExternalStorage, KameleoonClient } from '@kameleoon/javascript-sdk';

// --- External Storage implementation ---
// - JavaScript `Map` is used as an example storage
const storage = new Map();

class MyStorage<T> implements IExternalStorage<T> {
  public read(key: string): T | null {
    // - Read data using `key`
    const data = storage.get(key);

    // - Return `null` if there's no data
    if (!data) {
      return null;
    }

    // - Return obtained data
    return data;
  }

  public write(key: string, data: T): void {
    // - Write data using `key`
    storage.set(key, data);
  }
}

// --- Create KameleoonClient ---
const client = new KameleoonClient({
  siteCode: 'my_site_code',
  externals: {
    storage: new MyStorage(),
  },
});

EventSource​

import {
  IExternalEventSource,
  KameleoonClient,
  EventSourceOpenParametersType,
} from '@kameleoon/javascript-sdk';

// --- External EventSource implementation ---
// - Example uses native browser `EventSource`
class MyEventSource implements IExternalEventSource {
  private eventSource?: EventSource;

  public open({
    eventType,
    onEvent,
    url,
  }: EventSourceOpenParametersType): void {
    // - Initialize `EventSource`
    const eventSource = new EventSource(url);

    this.eventSource = eventSource;
    // - Add event listener with provided event type and event callback
    this.eventSource.addEventListener(eventType, onEvent);
  }

  public close(): void {
    // - Cleanup open event source
    if (this.eventSource) {
      this.eventSource.close();
    }
  }

  public onError(callback: (error: Event) => void): void {
    // - Set error callback
    if (this.eventSource) {
      this.eventSource.onerror = callback;
    }
  }
}

// --- Create KameleoonClient ---
const client = new KameleoonClient({
  siteCode: 'my_site_code',
  externals: {
    eventSource: new MyEventSource(),
  },
});

VisitorCodeManager​

import {
  IExternalVisitorCodeManager,
  SetDataParametersType,
  KameleoonClient,
  KameleoonUtils,
} from '@kameleoon/javascript-sdk';

// --- External Visitor Code Manager implementation ---
// - Example uses browser `document.cookie` API
class MyVisitorCodeManager implements IExternalVisitorCodeManager {
  public getData(key: string): string | null {
    const cookieString = document.cookie;

    // - Return `null` if no cookie was found
    if (!cookieString) {
      return null;
    }

    // - Parse cookie using the provided `key`
    return KameleoonUtils.getCookieValue(cookieString, key);
  }

  public setData({
    visitorCode,
    domain,
    maxAge,
    key,
    path,
  }: SetDataParametersType): void {
    // - Set cookie with provided parameters
    let resultCookie = `${key}=${visitorCode}; Max-Age=${maxAge}; Path=${path}`;

    if (domain) {
      resultCookie += `; Domain=${domain}`;
    }

    document.cookie = resultCookie;
  }
}

// --- Create KameleoonClient ---
const client = new KameleoonClient({
  siteCode: 'my_site_code',
  externals: {
    visitorCodeManager: new MyVisitorCodeManager(),
  },
});

Requester​

import {
  RequestType,
  IExternalRequester,
  KameleoonResponseType,
  SendRequestParametersType,
  KameleoonClient,
} from '@kameleoon/javascript-sdk';

// --- External Requester Implementation
export class MyRequester implements IExternalRequester {
  public async sendRequest({
    url,
    parameters,
  }: SendRequestParametersType<RequestType>): Promise<KameleoonResponseType> {
    // - Using native browser `fetch`
    return await fetch(url, parameters);
  }
}

// --- Create KameleoonClient ---
const client = new KameleoonClient({
  siteCode: 'my_site_code',
  externals: {
    requester: new MyRequester(),
  },
});
tip

Return mocked result

Logger​

import { KameleoonClient, KameleoonLogger, IExternalLogger, LogLevel } from '@kameleoon/javascript-sdk';

// --- Custom Logger Implementation
export class CustomLogger implements IExternalLogger {
  public log(level: LogLevel, message: string): void {
    // Custom log handling logic here.
  }
}

// --- Create KameleoonClient ---
const client = new KameleoonClient({
  siteCode: 'my_site_code',
  externals: {
    logger: new CustomLogger(),
  },
});

Error Handling​

Almost every KameleoonClient method may throw an error occassionaly. These errors are deliberately predefined KameleoonErrors that extend the native JavaScript Error class, providing useful messages and special type fields with a type KameleoonException.

KameleoonException is an enum containing all possible error variants.

To know exactly what variant of KameleoonException the method may throw, check the Throws section in the method description on this page, or hover over the method in your IDE to see the jsdocs description.

Handling errors makes your application more stable and avoids technical issues.

import {
  KameleoonError,
  KameleoonClient,
  KameleoonException,
} from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({ siteCode: 'my_site_code' });

async function init(): Promise<void> {
  try {
    await client.initialize();

    const customData = new CustomData(0, 'my_data');
    client.addData(visitorCode, customData);
  } catch (error) {
    // -- Type guard for inferring error type, as native JavaScript `catch`
    //    only infers `unknown`
    if (error instanceof KameleoonError) {
      switch (error.type) {
        case KameleoonException.VisitorCodeMaxLength:
          // -- Handle an error
          break;
        case KameleoonException.StorageWrite:
          // -- Handle an error
          break;
        case KameleoonException.Initialization:
          // -- Handle an error
          break;
        default:
          break;
      }
    }
  }
}

init();

Cross-device experimentation​

To support visitors who access your app from multiple devices, Kameleoon allows you to synchronize previously collected visitor data across each of the visitor's devices and reconcile their visit history across devices through cross-device experimentation. We recommend reading our article on cross-device experimentation for more information on how Kameleoon handles data across devices and detailed use cases.

Synchronizing custom data across devices​

Although custom mapping synchronization is used to align visitor data across devices, it is not always necessary. Below are two scenarios where custom mapping sync is not required:

Same user ID across devices If the same user ID is used consistently across all devices, synchronization is handled automatically without a custom mapping sync. It is enough to call the getRemoteVisitorData() method when you want to sync the data collected between multiple devices.

Multi-server instances with consistent IDs In complex setups involving multiple servers (for example, distributed server instances), where the same user ID is available across servers, synchronization between servers (with getRemoteVisitorData()) is sufficient without additional custom mapping sync.

Customers who need additional data can refer to the getRemoteVisitorData() method description for further guidance. In the below code, it is assumed that the same unique identifier (in this case, the visitorCode, which can also be referred to as userId) is used consistently between the two devices for accurate data retrieval.

note

If you want to sync collected data in real time, you need to choose the scope Visitor for your custom data.

Device One
import { KameleoonClient, CustomData } from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({ siteCode: 'my_site_code' });

async function init(): Promise<void> {
  await client.initialize();

  // -- Custom Data with index `0` was set to `Visitor` scope
  //    in Kameleoon.
  const customDataIndex = 0;
  const customData = new CustomData(customDataIndex, 'my_data');

  client.addData('my_visitor', customData);
  client.flush();
}

init();
Device Two
import { KameleoonClient } from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({ siteCode: 'my_site_code' });

async function init(): Promise<void> {
  await client.initialize();

  // -- Before working with data, make `getRemoteVisitorData` call
  await getRemoteVisitorData({ visitorCode: 'my_visitor_code' });

  // -- New SDK code will have access to CustomData with `Visitor` scope
  //    defined on Device One.
  //    So, "my_data" is now available for targeting and tracking "my_visitor".
}

init();

Using custom data for session merging​

Cross-device experimentation allows you to combine a visitor's history across each of their devices (history reconciliation). History reconciliation allows you to merge different visitor sessions into one. To reconcile visit history, you can use CustomData to provide a unique identifier for the visitor. For more information, see our dedicated documentation.

After cross-device reconciliation is enabled, calling getRemoteVisitorData() with the parameter userId retrieves all known data for a given user.

Sessions with the same identifier will always be shown the same variation in an experiment. In the Visitor view of your experiment's results pages, these sessions will appear as a single visitor.

The SDK configuration ensures that associated sessions always see the same variation of the experiment. However, there are some limitations regarding cross-device variation allocation. We've outlined these limitations here.

Follow the activating cross-device history reconciliation guide to set up your custom data on the Kameleoon platform.

Afterwards, you can use the SDK normally. The following methods that may be helpful in the context of session merging:

  • getRemoteVisitorData() with added UniqueIdentifier(true) - to retrieve data for all linked visitors.
  • trackConversion() or flush() with added UniqueIdentifier(true) data - to track some data for specific visitor that is associated with another visitor.
tip

As the custom data you use as the identifier must be set to Visitor scope, you need to use cross-device custom data synchronization to retrieve the identifier with the getRemoteVisitorData() method on each device.

Here's an example of how to use custom data for session merging.

Login Page
import { KameleoonClient } from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({
  siteCode: 'my_site_code',
});

async function init(): Promise<void> {
  await client.initialize();

  const anonymousVisitor = getVisitorCode();
  // -- Saving `visitorCode` in `window` to re-use it later.
  window.anonymousVisitor = anonymousVisitor;

  // -- Getting a variation, assume it's variation `A`
  const variation = client.getFeatureFlagVariationKey(
    anonymousVisitor,
    'my_feature_key',
  );
}

init();
Application Page
import { CustomData, UniqueIdentifier } from '@kameleoon/javascript-sdk';

async function init(): Promise<void> {
  // -- At this point anonymous visitor has logged in,
  //    and we have a user ID to use as a visitor identifier
  // -- Associating both visitors with an identifier Custom Data,
  //    where index `1` is the Custom Data's index, configured
  //    as a unique identifier in Kameleoon.
  const userIdentifierData = new CustomData(1, 'my_user_id');
  // -- Taking `visitorCode` from `window` object
  client.addData(window.anonymousVisitor, userIdentifierData);
  // -- Flushing data for the anonymous `visitorCode`
  client.flush(window.anonymousVisitor);

  // -- Informing the SDK that the visitor is a unique identifier
  client.addData('my_user_id', new UniqueIdentifier(true));

  // -- Retrieving the variation for the user ID ensures
  //    consistency with the anonymous visitor's variation.
  //    Both the anonymous visitor and the user ID will be
  //    assigned variation `A`.
  const variation = client.getFeatureFlagVariationKey(
    'my_user_id',
    'my_feature_key',
  );

  // -- `my_user_id` and `anonymousVisitor` are now linked.
  //    They can be tracked as a single visitor.
  client.trackConversion({
    visitorCode: 'my_user_id',
    goalId: 123,
    revenue: 100,
  });

  // -- Additionally, linked visitors share previously
  //    collected remote data.
  const data = await client.getRemoteVisitorData({
    visitorCode: 'my_user_id',
  });
}

init();

Utilities​

The SDK has a set of utility methods that you can use to simplify your development process. All methods are represented as static members of KameleoonUtils class.

simulateSuccessRequest​

Use the simulateSuccessRequest method to simulate a successful request to the Kameleoon server. It can be useful for custom Requester implementations, when a developer needs to simulate a successful request (for example, disabling tracking).

import {
  KameleoonUtils,
  IExternalRequester,
  SendRequestParametersType,
  RequestType,
  KameleoonResponseType,
} from '@kameleoon/javascript-sdk';

// - Example of `Requester` with disabled tracking
class Requester implements IExternalRequester {
  public async sendRequest({
    url,
    parameters,
    requestType,
  }: SendRequestParametersType<RequestType>): Promise<KameleoonResponseType> {
    if (requestType === RequestType.Tracking) {
      return KameleoonUtils.simulateSuccessRequest<RequestType.Tracking>(
        requestType,
        null,
      );
    }

    return await fetch(url, parameters);
  }
}
Arguments​
NameTypeDescription
requestType (required)RequestTypeA type of request
data (required)SimulateRequestDataType[RequestType]A type of request data, which is different depending on RequestType

Data type SimulateRequestDataType is defined as follows:

  • RequestType.Tracking - null
  • RequestType.ClientConfiguration - ClientConfigurationDataType
  • RequestType.RemoteData - JSONType
Return value​

Promise<KameleoonResponseType> - returns a promise with the response of the request

getCookieValue​

Use the getCookieValue method to parse a common cookie string (key_1=value_1; key_2=value_2; ...) and get the value of a specific cookie key. This method is useful when working with a custom implementation of VisitorCodeManager.

import { KameleoonUtils } from '@kameleoon/javascript-sdk';

const cookies = 'key_1=value_1; key_2=value_2';
const key = 'key_1';

const value = KameleoonUtils.getCookieValue(cookies, key); // = `value_1`
Arguments​
NameTypeDescription
cookie (required)stringCookie string in a form key_1=value_1; key_2=value_2
key (required)stringString representation of a key to find a value by
Return value​

string | null - returns a string with a cookie value or null if the key was not found

Reference​

This is the full reference documentation for the Kameleoon JavaScript SDK.

Initialization​

initialize()​

An asynchronous method for KameleoonClient initialization by fetching Kameleoon SDK related data from server or by retrieving data from local source if data is up-to-date or update interval has not been reached.

note

  • If the SDK configuration could not be retrieved but there is an older configuration available in SDK storage, the SDK uses the older configuration as a fallback and the initialize does not throw an error.

  • SDK supports an offline mode.

In offline mode if tracking requests from any of the following methods fail due to internet connectivity issues, the SDK automatically resends the request as soon as it detects that the internet connection has been re-established:

import {
  KameleoonClient,
  KameleoonError,
  KameleoonException,
} from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({ siteCode: 'my_site_code' });

async function init(): Promise<void> {
  try {
    await client.initialize();
  } catch (err) {
    if (err instanceof KameleoonError) {
      switch (err.type) {
        case KameleoonException.StorageWrite:
        // -- Handle error case
        case KameleoonException.ClientConfiguration:
        // -- Handle error case
        default:
          break;
      }
    }
  }
}

init();
Return value​

Promise<boolean> - A promise that resolves to a boolean indicating whether the SDK was successfully initialized. Usually, if an unresolvable issue occurs, the initialize method will throw an error instead of resolving the promise. Therefore, the boolean value is almost always true and typically does not provide much additional information.

Exceptions thrown​
TypeDescription
KameleoonException.StorageWriteCouldn't update storage data
KameleoonException.ClientConfigurationCouldn't retrieve client configuration from Kameleoon API
KameleoonException.MaximumRetriesReachedMaximum retries reached, request failed

Feature flags and variations​

getVariation()​

  • 📨 Sends Tracking Data to Kameleoon (depending on the track parameter)
  • 🎯 Events: EventType.Evaluation

Retrieves the VariationType assigned to a given visitor for a specific feature flag.

This method takes a visitorCode and featureKey as mandatory arguments. The track argument is optional and defaults to true.

It returns the assigned VariationType for the visitor. If the visitor is not associated with any feature flag rules, the method returns the default VariationType for the given feature flag.

Ensure that proper error handling is implemented in your code to manage potential exceptions.

note

The default variation refers to the variation assigned to a visitor when they do not match any predefined delivery rules for a feature flag. In other words, it is the fallback variation applied to all users who are not targeted by specific rules. It's represented as the variation in the "Then, for everyone else..." section in a management interface.

import { KameleoonClient } from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({
  siteCode: 'my_site_code',
});

async function init(): Promise<void> {
  await client.initialize();

  // -- Get visitor code
  const visitorCode = client.getVisitorCode();

  // -- Get variation with tracking
  const variation = client.getVariation({
    visitorCode,
    featureKey: 'my_feature_key',
  });

  // -- Get variation without tracking
  const variation = client.getVariation({
    visitorCode,
    featureKey: 'my_feature_key',
    track: false,
  });

  // -- An Example variation:
  // {
  //  key: 'variation_key',
  //  id: 123,
  //  experimentId: 456,
  //  variables: Map {
  //    'variable_key' => {
  //      key: 'variable_key',
  //      type: VariableType.BOOLEAN,
  //      value: true,
  //    }
  //  },
  // }
}

init();
Arguments​

An object of type GetVariationParamsType with the following properties:

NameTypeDescriptionDefault
visitorCode (required)stringUnique identifier of the user.
featureKey (required)stringKey of the feature you want to expose to a user.
track (optional)booleanAn optional parameter to enable or disable tracking of the feature evaluation.true
Return value​
TypeDescription
VariationAn assigned VariationType to a given visitor for a specific feature flag.
Exceptions thrown​
TypeDescription
KameleoonException.InitializationMethod was executed before the kameleoonClient completed it's initialize call.
KameleoonException.VisitorCodeEmptyThe visitor code is empty.
KameleoonException.VisitorCodeMaxLengthThe visitor code exceeded the maximum length (255 characters).
KameleoonException.FeatureFlagConfigurationNotFoundException indicating that the requested feature key wasn't found in the internal configuration of the SDK. This usually means that the feature flag is not activated in the Kameleoon app (but code implementing the feature is already deployed on your application).
KameleoonException.FeatureFlagEnvironmentDisabledException indicating that feature flag is disabled for the visitor's current environment (for example, production, staging, or development).

getVariations()​

  • 📨 Sends Tracking Data to Kameleoon (depending on the track parameter)
  • 🎯 Events: EventType.Evaluation

Retrieves a map of VariationType objects assigned to a given visitor across all feature flags.

This method iterates over all available feature flags and returns the assigned VariationType for each flag associated with the specified visitor. It takes visitorCode as a mandatory argument, while onlyActive and track are optional.

  • If onlyActive is set to true, the method getVariations() will return feature flags variations provided the user is not bucketed with the off variation.
  • The track parameter controls whether or not the method will track the variation assignments. By default, it is set to true. If set to false, the tracking will be disabled.

The returned map consists of feature flag keys as keys and their corresponding VariationType as values. If no variation is assigned for a feature flag, the method returns the default VariationType for that flag.

Proper error handling should be implemented to manage potential exceptions.

note

The default variation refers to the variation assigned to a visitor when they do not match any predefined delivery rules for a feature flag. In other words, it is the fallback variation applied to all users who are not targeted by specific rules. It's represented as the variation in the "Then, for everyone else..." section in a management interface.

import { KameleoonClient } from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({
  siteCode: 'my_site_code',
});

async function init(): Promise<void> {
  await client.initialize();

  // -- Get visitor code
  const visitorCode = client.getVisitorCode();

  // -- Get all feature flag variations with tracking
  const variations = client.getVariations({
    visitorCode,
  });

  // -- Get active feature flag variations with tracking
  const variations = client.getVariations({
    visitorCode,
    onlyActive: true,
  });

  // -- Get active feature flag variations without tracking
  const variations = client.getVariations({
    visitorCode,
    onlyActive: true,
    track: false,
  });

  // -- An Example variations:
  // Map {
  // 'feature_key' => {
  //    key: 'variation_key',
  //    id: 123,
  //    experimentId: 456,
  //    variables: Map {
  //      'variable_key' => {
  //        key: 'variable_key',
  //        type: VariableType.BOOLEAN,
  //        value: true,
  //      }
  //    },
  //   }
  // }
}

init();
Arguments​

An object of type GetVariationParamsType with the following properties:

NameTypeDescriptionDefault
visitorCode (required)stringUnique identifier of the user.
onlyActive (optional)booleanAn optional parameter indicating whether to return variations for active (true) or all (false) feature flags.false
track (optional)booleanAn optional parameter to enable or disable tracking of the feature evaluation.true
Return value​
TypeDescription
Map<string, VariationType>Map that contains the assigned VariationType objects of the feature flags using the keys of the corresponding features.
Exceptions thrown​
TypeDescription
KameleoonException.InitializationMethod was executed before the kameleoonClient completed it's initialize call.
KameleoonException.VisitorCodeEmptyThe visitor code is empty.
KameleoonException.VisitorCodeMaxLengthThe visitor code exceeded the maximum length (255 characters).

isFeatureFlagActive()​

  • 📨 Sends Tracking Data to Kameleoon (depending on the track parameter)
  • 🎯 Events: EventType.Evaluation

The method isFeatureFlagActive() returns a boolean value indicating whether the visitor identified by visitorCode has the specified featureKey active. This method checks for targeting, determines the variation for the visitor, and saves this information to storage. Additionally, it sends a tracking request.

There is also an overload of this method that allows you to pass a track parameter, which you can use to disable tracking of the feature evaluation.

note

Only visitors with an active feature flag must be targetted.

import { KameleoonClient, CustomData } from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({
  siteCode: 'my_site_code',
  configuration: { domain: '.example.com' },
});

async function init(): Promise<void> {
  await client.initialize();

  // -- Get visitor code
  const visitorCode = client.getVisitorCode();

  // -- Add CustomData with index `0` containing visitor id to check the targeting
  client.addData(visitorCode, new CustomData(0, 'visitor_id'));

  // -- Check if the feature flag is active for visitor
  const isActive = client.isFeatureFlagActive(visitorCode, 'my_feature_key');

  // -- Check if the feature flag is active for visitor without tracking
  const isActive = client.isFeatureFlagActive({ visitorCode, featureKey: 'my_feature, track: false});
}

init();
Arguments​

There are two overloads available for this method:

  1. Two parameters overload:
danger

This overload is deprecated and will be removed in the next major update. Please use the new overload with an object parameter.

NameTypeDescription
visitorCode (required)stringunique visitor identification string, can't exceed 255 characters in length
featureKey (required)stringa unique key for feature flag
  1. Object parameter overload of type IsFeatureFlagActiveParamsType:
NameTypeDescriptionDefault
visitorCode (required)stringunique visitor identification string, can't exceed 255 characters in length-
featureKey (required)stringa unique key for feature flag-
track (optional)booleana boolean indicator of whether to track the feature evaluationtrue
Return value​

boolean - a boolean indicating whether the feature flag with featureKey is active for the visitor with visitorCode

Exceptions thrown​
TypeDescription
KameleoonException.InitializationMethod was executed before the kameleoonClient completed its initialize call.
KameleoonException.VisitorCodeMaxLengthThe visitor code exceeded the maximum length (255 characters).
KameleoonException.VisitorCodeEmptyThe visitor code is empty.
KameleoonException.NotTargetedCurrent visitor is not targeted.
KameleoonException.FeatureFlagConfigurationNotFoundNo feature flag was found for provided featureKey.
KameleoonException.DataInconsistencyAllocated variation was found, but there is no feature flag with according featureKey

getFeatureFlags()​

🚫 Doesn't send Tracking Data to Kameleoon

The getFeatureFlags() method returns a list of feature flags stored in the client configuration.

import { KameleoonClient } from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({ siteCode: 'my_site_code' });

async function init(): Promise<void> {
  await client.initialize();

  // -- Get all feature flags
  const featureFlags = client.getFeatureFlags();
}

init();
Return value​

FeatureFlagType[] - list of feature flags. Each feature flag item contains an id and key.

Exceptions thrown​
TypeDescription
KameleoonException.InitializationMethod was executed before the kameleoonClient completed its initialize call.

setForcedVariation()​

The method allows you to programmatically assign a specific VariationType to a user, bypassing the standard evaluation process. This is especially valuable for controlled experiments where the usual evaluation logic is not required or must be skipped. It can also be helpful in scenarios like debugging or custom testing.

When a forced variation is set, it overrides Kameleoon's real-time evaluation logic. Processes like segmentation, targeting conditions, and algorithmic calculations are skipped. To preserve segmentation and targeting conditions during an experiment, set forceTargeting=false instead.

info

Simulated variations always take precedence in the execution order. If a simulated variation calculation is triggered, it will be fully processed and completed first.

A forced variation is treated the same as an evaluated variation. It is tracked in analytics and stored in the user context like any standard evaluated variation, ensuring consistency in reporting.

The method may throw exceptions under certain conditions (e.g., invalid parameters, user context, or internal issues). Proper exception handling is essential to ensure that your application remains stable and resilient.

caution

It’s important to distinguish forced variations from simulated variations:

  • Forced variations: Are specific to an individual experiment.
  • Simulated variations: Affect the overall feature flag result.
import { KameleoonClient } from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({
  siteCode: 'my_site_code',
  configuration: { domain: '.example.com' },
});

async function init(): Promise<void> {
  await client.initialize();

  // -- Get visitor code
  const visitorCode = client.getVisitorCode();

  // -- Forcing the variation "on" for the "featureKey1" feature flag for the visitor
  client.setForcedVariation({
    visitorCode: visitorCode,
    experimentId: 9516,
    variationKey: 'on',
    forceTargeting: false,
  });

  // -- Resetting the forced variation for the "featureKey1" feature flag for the visitor
  client.setForcedVariation({
    visitorCode: visitorCode,
    experimentId: 9516,
    variationKey: null,
  });
}

init();
Arguments​

An object of type SetForcedVariationParametersType with the following properties:

NameTypeDescriptionDefault
visitorCode (required)stringUnique identifier of the user.
experimentId (required)numberExperiment Id that will be targeted and selected during the evaluation process.
variationKey (required)string | nullVariation Key corresponding to a VariationType that should be forced as the returned value for the experiment. If the value is null, the forced variation will be reset.
forceTargeting (optional)booleanIndicates whether targeting for the experiment should be forced and skipped (true) or applied as in the standard evaluation process (false).true
Exceptions thrown​
TypeDescription
KameleoonException.VisitorCodeEmptyThe visitor code is empty.
KameleoonException.VisitorCodeMaxLengthThe visitor code exceeded the maximum length (255 characters).
KameleoonException.InitializationException indicating that the SDK is not fully initialized yet.
KameleoonException.FeatureFlagExperimentNotFoundException indicating that the requested experiment id has not been found in the SDK's internal configuration. This is usually normal and means that the rule's corresponding experiment has not yet been activated on Kameleoon's side.
KameleoonException.FeatureFlagVariationNotFoundException indicating that the requested variation key(id) has not been found in the internal configuration of the SDK. This is usually normal and means that the variation's corresponding experiment has not yet been activated on Kameleoon's side.
KameleoonException.StorageReadCouldn't read storage data.
KameleoonException.StorageWriteCouldn't update storage data.
info

In most cases, you only need to handle the basic error, KameleoonException, as demonstrated in our example. However, if you need to respond to different types of errors, you can handle each one separately based on your requirements. Additionally, for enhanced reliability, you can (or should) also handle general language errors by including Error.

Visitor data​

getVisitorCode()​

The getVisitorCode() method obtains a visitor code from the browser cookie. If the visitor code doesn't exist, the method generates a random visitor code (or uses the defaultVisitorCode value if you provided one) and sets the new visitor code in a cookie.

info

The getVisitorCode() method allows you to set simulated variations for a visitor. When cookies (from a request or document) contain the key kameleoonSimulationFFData, the standard evaluation process is bypassed. Instead, the method directly returns a VariationType based on the provided data.

View Details

You can apply simulations in two ways:

  • Automatically (recommended): If you use Kameleoon Web Experimentation or our SDK in Hybrid mode, the cookie will be created automatically when simulating a variant's display using our Simulation Panel.
  • Manually: Set the kameleoonSimulationFFData cookie yourself.

It’s important to distinguish simulated variations from forced variations:

  • Simulated variations: Affect the overall feature flag result.
  • Forced variations: Are specific to an individual experiment.

⚙️ Manual setup

Please ensure that your kameleoonSimulationFFData cookie follows this format:

  • kameleoonSimulationFFData={"featureKey":{"expId":10,"varId":20}}: Simulates the variation with varId of experiment expId for the given featureKey.
  • kameleoonSimulationFFData={"featureKey":{"expId":0}}: Simulates the default variation (defined in the Then, for everyone else in Production, serve section) for the given featureKey.

⚠️ To ensure proper functionality, the cookie value must be encoded as a URI component using a method such as encodeURIComponent.

import { KameleoonClient } from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({
  siteCode: 'my_site_code',
  configuration: { domain: '.example.com' },
});

async function init(): Promise<void> {
  await client.initialize();

  // -- Get visitor code
  const visitorCode = client.getVisitorCode();

  // -- Get visitor code with default value
  const visitorCode = client.getVisitorCode('my_default_visitor_code');
}

init();
Arguments​
NameTypeDescription
defaultVisitorCode (optional)stringvisitor code used if there is no visitor code in cookies
note

If you don't provide a defaultVisitorCode and there is no visitor code stored in a cookie, the visitor code will be randomly generated.

Return value​

string - result visitor code

Exceptions thrown​
TypeDescription
KameleoonException.VisitorCodeMaxLengthThe visitor code length was exceeded
KameleoonException.VisitorCodeEmptyThe visitor code is empty

addData()​

The addData() method adds targeting data to storage so other methods can use the data to decide whether to target the current visitor.

The addData() method does not return any value and does not interact with Kameleoon back-end servers on its own. Instead, all the declared data is saved for future transmission using the flush method. This approach reduces the number of server calls made, as the data is typically grouped into a single server call. Note that the trackConversion method also sends out any previously associated data, just like the flush method. The same is true for the getFeatureFlagVariationKey and getFeatureFlagVariable methods, if an experimentation rule is triggered.

tip

Each visitor can only have one instance of associated data for most data types. However, CustomData is an exception. Visitors can have one instance of associated CustomData per customDataIndex.

note

  • userAgent data will not be stored in storage like other data, and it will be sent with every tracking request for bot filtration.

  • For the data types you can use for targeting, see the supported targeting conditions.

import {
  KameleoonClient,
  BrowserType,
  CustomData,
  Browser,
} from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({ siteCode: 'my_site_code' });

async function init(): Promise<void> {
  await client.initialize();

  // -- Create Kameleoon Data Types
  const browserData = new Browser(BrowserType.Chrome);
  const customData = new CustomData(0, 'my_data');

  // -- Add one Data item to Storage
  client.addData('my_visitor_code', browserData);

  // -- Add Data to Storage using variadic style
  client.addData('my_visitor_code', browserData, customData);

  // -- Add Data to Storage in array
  const dataArr = [browserData, customData];
  client.addData('my_visitor_code', ...dataArr);
}

init();
Arguments​
NameTypeDescription
visitorCode (required)stringunique visitor identification string, can't exceed 255 characters.
kameleoonData (optional)KameleoonDataType[]number of instances of any type of KameleoonData, can be added solely in array or as sequential arguments
note

  • kameleoonData is a variadic argument. It can be passed as one or several arguments (see the example).

  • The index or ID of the custom data can be found in your Kameleoon account. Note that this index starts at 0, which means that the first custom data you create for a given site will be assigned 0 as its ID, not 1.

Exceptions thrown​
TypeDescription
KameleoonException.VisitorCodeMaxLengthThe visitor code exceeded the maximum length of 255 characters.
KameleoonException.VisitorCodeEmptyThe visitor code is empty.
KameleoonException.StorageWriteCouldn't update storage data.
KameleoonException.InitializationMethod was executed before the kameleoonClient completed its initialize call.
note

Check the Data Types reference for more details on how to manage different data types.

flush()​

flush() takes the Kameleoon data associated with a visitor and schedules the data to be sent in the next tracking request. The time of the next tracking request is defined by the SDK Configuration trackingInterval parameter. Visitor data can be added using the addData and getRemoteVisitorData methods.

If you don't specify a visitorCode, the SDK flushes all of its stored data to the remote Kameleoon servers. If any previously failed tracking requests were stored locally in offline mode, the SDK attempts to send the stored requests before executing the latest request.

import { KameleoonClient } from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({
  siteCode: 'my_site_code',
  configuration: { domain: '.example.com' },
});

async function init(): Promise<void> {
  await client.initialize();

  // -- Get visitor code
  const visitorCode = client.getVisitorCode();

  const customData = new CustomData(0, 'my_data');
  client.addData(visitorCode, customData);

  // -- Flush added custom data for visitor
  client.flush(visitorCode);

  // -- Instantly flush added custom data for visitor
  client.flush({ visitorCode, instant: true });

  // -- Flush data for all the visitors
  client.flush();

  // -- Instantly flush data for all the visitors
  client.flush({ instant: true });
}

init();
Arguments​
NameTypeDescriptionDefault
visitorCode (optional)stringunique visitor identification string, can't exceed 255 characters, if not passed, all data will be flushed (sent to the remote Kameleoon servers).-

Or an object with the type FlushParamsType, containing:

NameTypeDescriptionDefault
visitorCode (optional)stringunique visitor identification string, can't exceed 255 characters, if not passed, all data will be flushed (sent to the remote Kameleoon servers).-
instant (optional)booleanBoolean flag indicating whether the data should be sent instantly (true) or according to the scheduled tracking interval (false).-
Exceptions thrown​
TypeDescription
KameleoonException.VisitorCodeMaxLengthThe visitor code exceeded the maximum length (255 characters).
KameleoonException.VisitorCodeEmptyThe visitor code is empty.
KameleoonException.InitializationMethod was executed before the kameleoonClient completed it's initialize call.

getRemoteData()​

The getRemoteData() method returns data that is stored for a specified site code in a remote Kameleoon server.

You can use this method to retrieve user preferences, historical data, or any other data relevant to your application's logic. By storing this data on our highly scalable servers using our Data API, you can efficiently manage massive amounts of data and retrieve it for each of your visitors or users.

import { KameleoonClient } from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({ siteCode: 'my_site_code' });

async function init(): Promise<void> {
  await client.initialize();

  // -- Get remote data
  const jsonData = await getRemoteData('my_data_key');

  const data = JSON.parse(jsonData);
}

init();
Arguments​
NameTypeDescription
key (required)stringunique key with which data is associated.
Return value​

JSONType - promise with data retrieved for a specific key

Exceptions thrown​
TypeDescription
KameleoonException.RemoteDataCouldn't retrieve data from the Kameleoon server.

getRemoteVisitorData()​

getRemoteVisitorData() is an asynchronous method for retrieving Kameleoon Visits Data for the visitorCode from the Kameleoon Data API. The method adds data to storage for other methods to use when making targeting decisions.

Data obtained using this is important when you want to:

  • use data collected from other devices.
  • access a user's history, such as previously visited pages during past visits.
  • use data that is only accessible on the client-side, like datalayer variables and goals that only convert on the front-end.

Read this article for a better understanding of possible use cases.

caution

By default, getRemoteVisitorData() automatically retrieves the latest stored custom data with scope=Visitor and attaches them to the visitor without the need to call the method addData(). It is particularly useful for synchronizing custom data between multiple devices.

import {
  KameleoonClient,
  KameleoonDataType,
  VisitorDataFiltersType,
} from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({ siteCode: 'my_site_code' });

async function init(): Promise<void> {
  await client.initialize();

  // -- Get remote visitor data and add it to storage
  const kameleoonDataList: KameleoonDataType[] = await getRemoteVisitorData({
    visitorCode: 'my_visitor_code',
  });

  // -- Get remote visitor data without adding it to storage
  const kameleoonDataList: KameleoonDataType[] = await getRemoteVisitorData({
    visitorCode: 'my_visitor_code',
    shouldAddData: false,
  });

  // -- Get remote visitor data without adding it to storage,
  //    and customizing filters for retrieving visits data
  const filters: VisitorDataFiltersType = {
    currentVisit: true,
    previousVisitAmount: 10,
    customData: true,
    geolocation: true,
    conversions: true,
  };

  const kameleoonDataList: KameleoonDataType[] = await getRemoteVisitorData({
    visitorCode: 'my_visitor_code',
    shouldAddData: false,
    filters,
  });
}

init();
Arguments​

An object with the type RemoteVisitorDataParamsType containing:

NameTypeDescriptionDefault Value
visitorCode (required)stringunique visitor identification string, can't exceed 255 characters length-
shouldAddData (optional)booleanboolean flag identifying whether the retrieved custom data should be added to storage automatically (without calling the addData method afterwards)true
filters (optional)VisitorDataFiltersTypefilters for specifying what data should be retrieved from visits, by default only customData is retrieved from the current and latest previous visit{ previousVisitAmount: 1, currentVisit: true customData: true }, other filters parameters are set to false
Return value​

KameleoonDataType[] - promise with list of Kameleoon Data retrieved

Exceptions thrown​
TypeDescription
KameleoonException.VisitorCodeMaxLengthThe visitor code exceeded the maximum length (255 characters)
KameleoonException.VisitorCodeEmptyThe visitor code is empty
KameleoonException.RemoteDataCouldn't retrieve data from Kameleoon server
KameleoonException.VisitAmountVisit amount must be a number between 1 and 25
KameleoonException.InitializationMethod was executed before initialize was done for kameleoonClient
Using parameters in getRemoteVisitorData()​

The getRemoteVisitorData() method offers flexibility, allowing you to define various parameters when retrieving data on visitors. Whether you're targeting based on goals, experiments, or variations, the same approach applies across all data types.

For example, if you want to retrieve data on visitors who completed a goal "Order transaction", you can specify parameters within the getRemoteVisitorData() method to refine your targeting. For instance, if you want to target only users who converted on the goal in their last five visits, you can set the previousVisitAmount parameter to 5 and conversions to true.

The flexibility shown in this example is not limited to goal data. You can use parameters within the getRemoteVisitorData() method to retrieve data on a variety of visitor behaviors.

note

Here is the list of available VisitorDataFiltersType filters:

NameTypeDescriptionDefault
previousVisitAmount (optional)numberNumber of previous visits to retrieve data from. Number between 1 and 251
currentVisit (optional)booleanIf true, current visit data will be retrievedtrue
customData (optional)booleanIf true, custom data will be retrieved.true
pageViews (optional)booleanIf true, page data will be retrieved.false
geolocation (optional)booleanIf true, geolocation data will be retrieved.false
device (optional)booleanIf true, device data will be retrieved.false
browser (optional)booleanIf true, browser data will be retrieved.false
operatingSystem (optional)booleanIf true, operating system data will be retrieved.false
conversions (optional)booleanIf true, conversion data will be retrieved.false
experiments (optional)booleanIf true, experiment data will be retrieved.false
kcs (optional)booleanIf true, Kameleoon Conversion Score (KCS) will be retrieved. Requires the AI Predictive Targeting add-onfalse
visitorCode (optional)booleanIf true, Kameleoon will retrieve the visitorCode from the most recent visit and use it for the current visit. This is necessary if you want to ensure that the visitor, identified by their visitorCode, always receives the same variant across visits for Cross-device experimentation.true
personalization (optional)booleanIf true, personalization data will be retrieved. This is required for the personalization conditionfalse
cbs (optional)booleanIf true, Contextual Bandit score data will be retrieved.false

getVisitorWarehouseAudience()​

getVisitorWarehouseAudience is an asynchronous method that retrieves all audience data associated with the visitor in your data warehouse using the specified visitorCode and warehouseKey. The warehouseKey is typically your internal user ID. The customDataIndex parameter corresponds to the Kameleoon custom data that Kameleoon uses to target your visitors. Refer to the warehouse targeting documentation for additional details.

import {
  KameleoonClient,
  KameleoonDataType,
  CustomData,
} from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({ siteCode: 'my_site_code' });

async function init(): Promise<void> {
  await client.initialize();

  // -- Get visitor warehouse audience data using `warehouseKey`
  //    and add it to storage
  const customData: CustomData = await getVisitorWarehouseAudience({
    visitorCode: 'my_visitor',
    customDataIndex: 10,
    warehouseKey: 'my_key',
  });

  // -- Get visitor warehouse audience data using `visitorCode`
  //    and add it to storage
  const customData: CustomData = await getVisitorWarehouseAudience({
    visitorCode: 'my_visitor',
    customDataIndex: 10,
  });
}

init();
Arguments​

Parameters object consisting of:

NameTypeDescription
visitorCode (required)stringunique visitor identification string, can't exceed 255 characters length
customDataIndex (required)numbernumber representing the index of the custom data you want to use to target your Warehouse Audiences
warehouseKey (optional)stringunique key to identify the warehouse data (usually, your internal user ID)
Return value​

Promise<CustomData | null> - promise containing CustomData with the associated warehouse data or null if there was no data

Exceptions thrown​
TypeDescription
KameleoonException.VisitorCodeMaxLengthThe visitor code exceeded the maximum length (255 characters)
KameleoonException.VisitorCodeEmptyThe visitor code is empty
KameleoonException.RemoteDataCouldn't retrieve data from Kameleoon server

setLegalConsent()​

note

Consent information is synchronized between the Kameleoon Engine (application file engine.js) and the JS SDK. This synchronization means that once consent is set on either the Engine or the SDK, it's automatically set for both. This feature eliminates the need for manual consent handling and ensures that SDKs operate in compliance with user preferences.

If you use Kameleoon in Hybrid mode, we recommend reading the consent section in our Hybrid experimentation article

When handling legal consent, it's important to use the getVisitorCode method from KameleoonClient, not the deprecated method from KameleoonUtils. Additionally, this method does not accept domain as an argument. Instead, pass it to the KameleoonClient constructor. Refer to the above example.

The setLegalConsent method specifies whether the visitor has given legal consent to use personal data. Setting the legalConsent parameter to false limits the types of data that you can include in tracking requests. This method helps you adhere to legal and regulatory requirements while responsibly managing visitor data. You can find more information on personal data in the consent management policy.

import { KameleoonClient } from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({
  siteCode: 'my_site_code',
  configuration: { domain: '.example.com' },
});

async function init(): Promise<void> {
  await client.initialize();

  const visitorCode = client.getVisitorCode();
  client.setLegalConsent(visitorCode, true);
}

init();
Arguments​
NameTypeDescription
visitorCode (required)stringunique visitor identification string, can't exceed 255 characters. length
consent (required)booleana boolean value representing the legal consent status. true indicates that the visitor has given legal consent. false indicates that the visitor has never provided or has withdrawn legal consent.
Exceptions thrown​
TypeDescription
KameleoonException.VisitorCodeMaxLengthThe visitor code length exceeded the maximum length (255 characters)
KameleoonException.VisitorCodeEmptyThe visitor code is empty

Goals and third-party analytics​

trackConversion()​

  • 📨 Sends Tracking Data to Kameleoon

Use this method to track a conversion for a specific goal and user. This method requires visitorCode and goalId. In addition, this method also accepts an optional revenue, negative and metadata arguments. The visitorCode is usually identical to the one that was used when triggering the experiment.

The trackConversion() method doesn't return any value. This method is non-blocking as the server call is made asynchronously.

import { KameleoonClient, CustomData } from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({
  siteCode: 'my_site_code',
  configuration: { domain: '.example.com' },
});

async function init(): Promise<void> {
  const experimentId = 123;
  await client.initialize();

  // -- Get visitor code
  const visitorCode = client.getVisitorCode();

  // -- Track conversion
  client.trackConversion({
    visitorCode,
    revenue: 20000,
    goalId: 123,
    metadata: [new CustomData(0, 'value')],
    negative: true,
  });
}

init();
Arguments​

Parameters object consisting of:

NameTypeDescriptionDefault
visitorCode (required)stringUnique identifier of the user.
goalId (required)numberID of the goal.
negative (optional)booleanDefines if the revenue is positive or negative.false
revenue (optional)numberRevenue of the conversion.0
metadata (optional)CustomData[]Metadata of the conversion.undefined
note

Support for metadata in conversions is currently only available to customers participating in our beta program. Additionally, metadata values are accessible exclusively through raw data exports. For more information, see our guide on accessing raw export data.

If the metadata parameter is provided, Kameleoon will use these specified values for the current conversion instead of what was previously collected using the addData() method. If the parameter is omitted, Kameleoon will use the last tracked values for those CustomData prior to the conversion and within the same visit.

Kameleoon will only consider the metadata values that are explicitly passed as parameters to the trackConversion() method.

In the example below, Kameleoon will associate the conversion only with the custom data value explicitly provided as a parameter (here: index 5 with the value 'Amex Credit Card').

kameleoonClient.addData(visitorCode, new CustomData(5, 'Credit Card'), new CustomData(9, 'Express Delivery'));
kameleoonClient.trackConversion({
    visitorCode,
    goalId: 1000,
    metadata: [new CustomData(5, 'Amex Credit Card')]
});
Exceptions thrown​
TypeDescription
KameleoonException.VisitorCodeMaxLengthThe visitor code exceeded the maximum length (255 characters).
KameleoonException.VisitorCodeEmptyThe visitor code is empty.
KameleoonException.StorageWriteCouldn't update storage data.

getEngineTrackingCode()​

The getEngineTrackingCode() method returns the Kameleoon tracking code for the current visitor. The tracking code is based on the feature experiments that were triggered during the last five seconds.

import { KameleoonClient } from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({ siteCode: 'my_site_code' });

async function init(): Promise<void> {
  await client.initialize();

  // -- Trigger feature experiment
  // -- E.g., result `variationKey` id is `200`, and implicit experiment id is `100`.
  client.getFeatureFlagVariationKey('visitor_code', 'my_feature_key');

  // -- Get tracking code
  const engineCode = client.getEngineTrackingCode('visitor_code');

  // -- Result engine code will look like this
  // `
  // window.kameleoonQueue = window.kameleoonQueue || [];
  // window.kameleoonQueue.push(['Experiments.assignVariation', 100, 200, true]);
  // window.kameleoonQueue.push(['Experiments.trigger', 100, true]);
  // `

  // -- Insert tracking code into the page
  const script = document.createElement('script');
  script.textContent = engineCode;
  document.body.appendChild(script);
}

init();
note

The result tracking code can be inserted directly into the html <script> tag.

For example:

<!DOCTYPE html>
<html lang="en">
  <body>
    <script>
      const engineTrackingCode = `
        window.kameleoonQueue = window.kameleoonQueue || [];
        window.kameleoonQueue.push(['Experiments.assignVariation', 100, 200, true]);
        window.kameleoonQueue.push(['Experiments.trigger', 100, true]);
      `;
      const script = document.createElement('script');

      script.textContent = engineTrackingCode;
      document.body.appendChild(script);
    </script>
  </body>
</html>
Arguments​
NameTypeDescription
visitorCode (required)stringunique visitor identification string, can't exceed 255 characters.
Return value​

string containing engine tracking code

Exceptions thrown​
TypeDescription
KameleoonException.VisitorCodeMaxLengthThe visitor code length exceeded the maximum length (255 characters).
KameleoonException.VisitorCodeEmptyThe visitor code is empty.

Events​

onEvent()​

Method onEvent() fires a callback when a specific event is triggered. The callback function can access the data associated with the event. The SDK methods in this documentation note which event types they trigger, if any.

note

You can only assign one callback to each EventType.

import {
  KameleoonClient,
  EventType,
  EvaluationEventDataType,
} from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({ siteCode: 'my_site_code' });

async function init(): Promise<void> {
  await client.initialize();

  // -- Define logic to be executed on SDK event
  client.onEvent(EventType.Evaluation, (eventData: EvaluationEventDataType) => {
    // -- My Logic
  });
}

init();
Events​

Events are defined in the EventType enum. Depending on the event type, the eventData parameter will have a different type.

TypeeventData typeDescription
EventType.EvaluationEvaluationEventDataTypeTriggered when the SDK evaluates any variation for a feature flag. It is triggered regardless of the result variation.
EventType.ConfigurationUpdateConfigurationUpdateEventDataTypeTriggered when the SDK receives a configuration update from the server (when using real-time streaming).
Arguments​
NameTypeDescription
event (required)EventTypea variant of the event to associate with the callback.
callback (required)(eventData: EventDataType<EventType>) => voida callback function with the eventData parameter that is called when a configuration update occurs.
Exceptions thrown​
TypeDescription
KameleoonException.InitializationMethod was executed before the kameleoonClient completed the initialize call.
Sending exposure events to external tools​

Kameleoon offers built-in integrations with various analytics and CDP solutions, such as Mixpanel, Google Analytics 4, Segment.... To ensure that you can track and analyze your server-side experiments, Kameleoon provides a method, getEngineTrackingCode(), that returns the JavasScript code to be inserted in your page. The code automatically sends the exposure events to your analytics solution. The SDK builds a tracking code for your active analytics solution based on the experiments that the visitor has triggered in the last five seconds. For more information about hybrid experimentation, please refer to this article.

The getEngineTrackingCode() method returns the Kameleoon tracking code for the current visitor. The tracking code is based on the experiments that were triggered during the last five seconds.

note

To benefit from this feature, you will need to implement both the JavaScript SDK and our Kameleoon JavaScript tag. We recommend you implement the Kameleoon asynchronous tag, which you can install before closing the <body> tag in your HTML page, as it will only be used for tracking purposes.

Data types​

Kameleoon Data types are helper classes used to store data in storage in predefined forms.

During the flush execution, the SDK collects all data and sends it with the tracking request.

Data available in the SDK is not available for targeting and reporting in the Kameleoon app until you add the data (for example, by using the addData() methodt). See use visit history to target users for more information.

note

If you are using hybrid mode, call getRemoteVisitorData() to automatically fill all data that Kameleoon has previously collected.

Browser​

note

Since JavaScript SDK 4.10.0, Browser is automatically detected based on the User-Agent string. However, you can still manually override it if needed.

Browser contains browser information.

note

Each visitor can only have one Browser. Adding second a Browser overwrites the first one.

NameTypeDescription
browser (required)BrowserTypepredefined browser type (Chrome, InternetExplorer, Firefox, Safari, Opera, Other).
version (optional)numberversion of the browser, floating point number represents major and minor version of the browser.
import {
  KameleoonClient,
  BrowserType,
  Browser,
} from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({ siteCode: 'my_site_code' });

async function init(): Promise<void> {
  await client.initialize();

  // -- Add new browser data to client
  const browser = new Browser(BrowserType.Chrome, 86.1);
  client.addData('my_visitor_code', browser);
}

init();

UniqueIdentifier​

UniqueIdentifier data is used as marker for unique visitor identification.

If you add UniqueIdentifier for a visitor, visitorCode is used as the unique visitor identifier, which is useful for Cross-device experimentation. Associating a UniqueIdentifier with a visitor notifies the SDK that the visitor is linked to another visitor.

The isUniqueIdentifier can be helpful in unique situations; for example, if you cannot access the anonymous visitorCode given to a visitor, but you can use an internal ID linked to that visitor through session merging.

note

Each visitor can only have one UniqueIdentifier. Adding another UniqueIdentifier overwrites the first one.

NameTypeDescription
value (required)booleanvalue that specifies if the visitor is associated with another visitor, false implies that the visitor is not associated with any other visitor.
import { KameleoonClient, UniqueIdentifier } from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({ siteCode: 'my_site_code' });

async function init(): Promise<void> {
  await client.initialize();

  // -- Add unique identifier to a visitor
  client.addData('my_visitor_code', new UniqueIdentifier(true));
}

init();

Conversion​

The Conversion data set stored here can be used to filter experiment and personalization reports by any goal associated with it.

tip
  • Each visitor can have multiple Conversion objects.
  • You can find the goalId in the Kameleoon app.

ConversionParametersType conversionParameters - an object with conversion parameters described below

NameTypeDescriptionDefault
goalId (required)numberID of the goal.
revenue (optional)floatRevenue of the conversion0
negative (optional)booleanDefines if the revenue is positive or negative.false
metadata (optional)CustomData[]Metadata of the conversion.undefined
import {
  KameleoonClient,
  ConversionParametersType,
  Conversion,
  CustomData,
} from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({ siteCode: 'my_site_code' });

async function init(): Promise<void> {
  await client.initialize();
  // -- Defined conversion parameters
  const conversionParameters: ConversionParametersType = {
    goalId: 123,
    revenue: 10000,
    negative: true,
    metadata: [new CustomData(0, 'value')],
  };

  // -- Add new conversion data to client
  const conversion = new Conversion(conversionParameters);
  client.addData('my_visitor_code', conversion);
}

init();

Cookie contains information about the cookie stored on the visitor's device.

note

  • Generally, the JavaScript SDK will attempt to use a localStorage cookie for the conditions. If localStorage is not possible, the SDK can use Cookie data as an alternative.

  • Each visitor can only have one Cookie. Adding a second Cookie overwrites the first one.

NameTypeDescription
cookie (required)CookieType[]A list of CookieType objects consisting of cookie keys and values.
import { KameleoonClient, CookieType, Cookie } from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({ siteCode: 'my_site_code' });

async function init(): Promise<void> {
  await client.initialize();

  // -- Add new cookie data to client
  const cookieData: CookieType[] = [
    { key: 'key_1', value: 'value_1' },
    { key: 'key_2', value: 'value_2' },
  ];
  const cookie = new Cookie(cookieData);
  client.addData('my_visitor_code', cookie);
}

init();
Methods​

Cookie data has a static utility method, fromString, that you can use to create a cookie by parsing a string that contains valid cookie data.

The method accepts string as a parameter and returns an initialized Cookie instance.

import { Cookie } from '@kameleoon/javascript-sdk';

const cookieString = 'key_1=value_1; key_2=value_2';
const cookie: Cookie = Cookie.fromString(cookieString);

// -- The result cookie will contain the following cookie array
// [
//    { key: 'key_1', value: 'value_1' },
//    { key: 'key_2', value: 'value_2' },
// ]

GeolocationData​

GeolocationData contains the visitor's geolocation details.

note

Each visitor can only have one GeolocationData. Adding a second GeolocationData overwrites the first one.

An object parameter with the type GeolocationInfoType contains the following fields:

NameTypeDescription
country (required)stringThe country of the visitor.
region (optional)stringThe region of the visitor.
city (optional)stringThe city of the visitor.
postalCode (optional)stringThe postal code of the visitor.
coordinates (optional)[number, number]Coordinates array tuple of two location values (longitude and latitude). Coordinate number represents decimal degrees.
import {
  KameleoonClient,
  GeolocationData,
  GeolocationInfoType,
} from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({ siteCode: 'my_site_code' });

async function init(): Promise<void> {
  await client.initialize();

  // -- Add geolocation data
  const geolocationInfo: GeolocationInfoType = {
    country: 'France',
    region: 'Île-de-France',
    city: 'Paris',
    postalCode: '75008',
    coordinates: [48.8738, 2.295],
  };
  const geolocationData = new GeolocationData(geolocationInfo);
  client.addData('my_visitor_code', geolocationData);
}

init();

CustomData​

CustomData allows any type of data to be easily associated with each visitor. It can then be used as a targeting condition in segments or as a filter/breakdown in experiment reports. To learn more about custom data, please refer to this article.

NameTypeDescription
index (required)numberThe unique index of the custom data.
value (required)string[]The custom data value. It must be stringified to match the string type. Note: value is variadic.
note

  • Each visitor is allowed only one CustomData for each unique index. Adding another CustomData with the same index will replace the existing one.

  • The custom data ‘index’ can be found in the Custom Data dashboard under the “INDEX” column.

  • To prevent the SDK from sending data with the selected index to Kameleoon servers for privacy reasons, enable the option: Use this data only locally for targeting purposes when creating custom data.

import { KameleoonClient, CustomData } from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({ siteCode: 'my_site_code' });

async function init(): Promise<void> {
  await client.initialize();

  const dataItemOne = 'abc';
  const dataItemTwo = JSON.stringify(100);
  const dataItemThree = JSON.stringify({ a: 200, b: 300 });

  const customDataIndex = 0;

  // -- Create custom data using single parameter
  const customData = new CustomData(customDataIndex, dataItemOne);

  // -- Create custom data using variadic number of parameters
  const customData = new CustomData(customDataIndex, dataItemOne, dataItemTwo);

  // -- Create custom data using an array of values
  const dataList = [dataItemOne, dataItemTwo, dataItemThree];
  const customData = new CustomData(customDataIndex, ...dataList);

  // -- Add custom data
  client.addData('my_visitor_code', customData);
}

init();

Device​

note

Since JavaScript SDK 4.10.0, Device is automatically detected based on the User-Agent string. However, you can still manually override it if needed.

Device contains information about your device.

note

Each visitor can have only one Device. Adding a second Device overwrites the first one.

NameTypeDescription
deviceType (required)DeviceTypepossible variants for device type (PHONE, TABLET, DESKTOP)
import { KameleoonClient, DeviceType, Device } from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({ siteCode: 'my_site_code' });

async function init(): Promise<void> {
  await client.initialize();

  // -- Add device data
  const device = new Device(DeviceType.Desktop);
  client.addData('my_visitor_code', device);
}

init();

OperatingSystem​

note

Since JavaScript SDK 4.10.0, OperatingSystem is automatically detected based on the User-Agent string. However, you can still manually override it if needed.

OperatingSystem contains information about the operating system on the visitor's device.

note

Each visitor can only have one OperatingSystem. Adding a second OperatingSystem overwrites the first one.

NameTypeDescription
operatingSystem (required)OperatingSystemTypepossible variants for device type: WINDOWS_PHONE, WINDOWS, ANDROID, LINUX, MAC, and IOS
import {
  KameleoonClient,
  OperatingSystem,
  OperatingSystemType,
} from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({ siteCode: 'my_site_code' });

async function init(): Promise<void> {
  await client.initialize();

  // -- Add operating system data
  const operatingSystem = new OperatingSystem(OperatingSystemType.Windows);
  client.addData('my_visitor_code', operatingSystem);
}

init();

PageView​

note

Since JavaScript SDK 4.10.0, PageView is automatically detected based on the window.location?.href and document.title. However, you can still manually override it if needed.

PageView contains information about your web page.

note

Each visitor can have one PageView per unique URL. Adding a second PageView with the same URL notifies the SDK that the visitor re-visited the page.

PageViewParametersType pageViewParameters - an object with page view parameters described below

NameTypeDescription
urlAddress (required)stringurl address of the page to track.
title (required)stringtitle of the web page.
referrer (optional)number[]an optional parameter containing a list of referrer indices, has no default value.
note

You can find the index or referrer ID in your Kameleoon account. Note that this index starts at 0, meaning the first acquisition channel you create for a given site will be assigned 0 as its ID, not 1.

import {
  KameleoonClient,
  PageViewParametersType,
  PageView,
} from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({ siteCode: 'my_site_code' });

async function init(): Promise<void> {
  await client.initialize();

  // -- Define page view parameters
  const pageViewParameters: PageViewParametersType = {
    urlAddress: 'www.example.com',
    title: 'my example',
    referrers: [123, 456],
  };

  // -- Add page view data
  const pageView = new PageView(pageViewParameters);
  client.addData('my_visitor_code', pageView);
}

init();

UserAgent​

UserAgent lets you store information on the visitor's user-agent. Server-side experiments are more likely to be affected by bot traffic than client-side experiments. Kameleoon uses the IAB/ABC International Spiders and Bots List to tackle this issue and recognize known bots and spiders. Kameleoon also uses the UserAgent field to filter out bots and other unwanted traffic that might distort your conversion metrics. For more details, see our help article on bot filtering.

If you use internal bots, we suggest that you pass the value curl/8.0 of the userAgent to exclude them from our analytics.

note

Visitor can only have one UserAgent. Adding a second UserAgent overwrites the first one.

NameTypeDescription
value (required)stringvalue used for comparison
caution

If you run Kameleoon in an hybrid mode, your server-side experiments are automatically protected against bot traffic. This protection occurs because Kameleoon collects the user-agent automatically on the front-end. Therefore, you don't need to pass the user-agent or any other parameter to filter bots and spiders.

If you use internal bots, we suggest that you pass the value curl/8.0 of the userAgent to exclude them from our analytics.

import { KameleoonClient, UserAgent } from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({ siteCode: 'my_site_code' });

async function init(): Promise<void> {
  await client.initialize();

  // -- Add user agent data
  const userAgent = new UserAgent('my_unique_value');
  client.addData('my_visitor_code', userAgent);
}

init();

ApplicationVersion​

note

This data type is only available for React Native apps or Ionic mobile apps.

ApplicationVersion contains the semantic version number of your mobile app built with React Native or Ionic.

note

A Visitor can only have one ApplicationVersion. Adding a second ApplicationVersion overwrites the first one.

NameTypeDescription
version (required)stringVersion of mobile application. This field follows only semantic versioning. Acceptable formats are major, major.minor, or major.minor.patch
import { KameleoonClient, ApplicationVersion } from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({ siteCode: 'my_site_code' });

async function init(): Promise<void> {
  await client.initialize();

  // -- Add application version
  const applicationVersion = new ApplicationVersion('1.2');
  client.addData('my_visitor_code', applicationVersion);
}

init();

Returned Types​

VariationType​

VariationType contains information about the assigned variation to the visitor (or the default variation, if no specific assignment exists).

NameTypeDescription
keystringkey of the variation.
idnumber or nullid of the variation or null if the visitor landed on the default variation.
experimentIdnumber or nullid of the experiment or null if the visitor landed on the default variation.
variablesMap<string, KameleoonVariableType>map of variables for the variation, where key is the variable key and value is the variable object.
note
  • Ensure that your code handles the case where id or experimentId is null, indicating a default variation.
  • The variables map might be empty if no variables are associated with the variation.
// Retrieving the variation key
const variationKey = variation.key;

// Retrieving the variation id
const variationId = variation.id;

// Retrieving the experiment id
const experimentId = variation.experimentId;

// Retrieving the variables map
const variables = variation.variables;

KameleoonVariableType​

KameleoonVariableType contains information about a variable associated with the assigned variation.

NameTypeDescription
keystringThe unique key identifying the variable.
typestringThe type of the variable. Possible values: BOOLEAN, NUMBER, STRING, JSON, JS, CSS.
valueanyThe value of the variable, which can be of the following types: boolean, number, String, Record<string, any>, any[].
// Retrieving the variables map
const variables = variation.variables;

// Variable type can be retrieved for further processing
const type = variables.get('isDiscount')?.type || '';

// Retrieving the variable value by key
const isDiscount = variables.get('isDiscount')?.value || false;

// Variable value can be of different types
const title = variables.get('title')?.value || '';

Deprecated methods​

caution

These methods are deprecated and will be removed in the next major update.

getFeatureFlagVariationKey()​

note

Use the getVariation method instead

The getFeatureFlagVariationKey() method retrieves the variation key for a visitor identified by a visitorCode. This method includes a targeting check that identifies the appropriate variation exposed to the visitor, saves it to storage, and sends a tracking request.

note

When a user is not associated with a feature flag, the SDK randomly returns a variation key according to the feature flag rules. If the user has already been registered with the feature flag, the SDK will detect this association and return the user's previous variation key value. However, if the user does not meet any of the defined rules, the SDK will return the default value specified in Kameleoon's feature flag delivery rules. It's important to note that the default value can be a variation key, a boolean value, or another data type, depending on the feature flag's configuration.

import { KameleoonClient, CustomData } from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({
  siteCode: 'my_site_code',
  configuration: { domain: '.example.com' },
});

async function init(): Promise<void> {
  await client.initialize();

  // -- Get visitor code
  const visitorCode = client.getVisitorCode();

  // -- Add CustomData with index `0` containing visitor id to check the targeting
  client.addData(new CustomData(0, 'visitor_id'));

  // -- Get visitor feature flag variation key
  const variationKey = client.getFeatureFlagVariationKey(
    visitorCode,
    'my_feature_key',
  );
}

init();
Arguments​
NameTypeDescription
visitorCode (required)stringunique visitor identification string, can't exceed 255 characters length
featureKey (required)stringa unique key for feature flag
Return value​

string a string containing variable key for the allocated feature flag variation for the provided visitor

Exceptions thrown​
TypeDescription
KameleoonException.InitializationMethod was executed before initialize was performed for kameleoonClient.
KameleoonException.VisitorCodeMaxLengthThe visitor code exceeded the maximum length.
KameleoonException.VisitorCodeEmptyThe visitor code is empty.
KameleoonException.NotTargetedCurrent visitor is not targeted.
KameleoonException.FeatureFlagConfigurationNotFoundNo feature flag was found for provided featureKey.
KameleoonException.FeatureFlagEnvironmentDisabledFeature flag is disabled for the current environment.

getVisitorFeatureFlags()​

  • 🚫 Doesn't send Tracking Data to Kameleoon
  • 🎯 Events: EventType.Evaluation (for each feature flag)
note

Use the getVariations method instead.

The getVisitorFeatureFlags() method returns a list of feature flags that target a visitor identified by their visitorCode and the feature flags that are active for the specified visitor.

import { KameleoonClient } from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({
  siteCode: 'my_site_code',
  configuration: { domain: '.example.com' },
});

async function init(): Promise<void> {
  await client.initialize();

  // -- Get visitor code
  const visitorCode = client.getVisitorCode();

  // -- Get active feature flags for visitor
  const featureFlags = client.getVisitorFeatureFlags(visitorCode);
}

init();
caution

This method only collects the visitor's active feature flags, meaning the result excludes all feature flags for which the visitor is assigned the off (default or control) variation. When you need all of the visitor's feature flags, use getFeatureFlags instead.

For example:

// -- `getVisitorFeatureFlags` doesn't trigger feature experiments;
//    it only returns feature flags where visitor didn't get the `off` variation
client.getVisitorFeatureFlags('my_visitor').forEach(({ key }) => {
  // -- `getFeatureFlagVariationKey` triggers feature experiments,
  //    as `off` is already filtered out - you won't see a
  //    visitor taking part in experiment where the `off` variation was allocated.
  client.getFeatureFlagVariationKey('my_visitor', key);
});

For cases where you need all of the visitor's feature flags, use getFeatureFlags instead:

// -- Both `off` and other variations are processed as expected
client.getFeatureFlags('my_visitor').forEach(({ key }) => {
  client.getFeatureFlagVariationKey('my_visitor', key);
});
Arguments​
NameTypeDescription
visitorCode (required)stringunique visitor identification string, can't exceed 255 characters in length
Return value​

FeatureFlagType[] - list of feature flags. Each feature flag item contains id and key

Exceptions thrown​
TypeDescription
KameleoonException.InitializationMethod was executed before the kameleoonClient completed its initialize call.
KameleoonException.VisitorCodeMaxLengthThe visitor code exceeded the maximum length (255 characters).
KameleoonException.VisitorCodeEmptyThe visitor code is empty.
KameleoonException.NotTargetedCurrent visitor is not targeted.
KameleoonException.StorageReadError while reading storage data.

getActiveFeatureFlags()​

  • 🚫 Doesn't send Tracking Data to Kameleoon
  • 🎯 Events: EventType.Evaluation (for each feature flag)
note

Use the getVariations method instead.

The getActiveFeatureFlags() method returns a Map, where key is featurekey and value is detailed information about the visitor's variation and it's variables

import { KameleoonClient } from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({
  siteCode: 'my_site_code',
  configuration: { domain: '.example.com' },
});

async function init(): Promise<void> {
  await client.initialize();

  // -- Get visitor code
  const visitorCode = client.getVisitorCode();

  // -- Get active feature flags for visitor
  //    with detailed variation and variables data
  const activeFeatures = client.getActiveFeatureFlags(visitorCode);

  // -- Result example:
  // Map {
  //   'feature-key-one' => {
  //     id: 100,
  //     key: 'variation-key-one',
  //     experimentId: 200,
  //     variables: [
  //      { key: 'variable_bool', type: VariableType.Boolean, value: true },
  //     ]
  //   },
  //   'feature-key-two' => {
  //     id: null, // -> `null` because it is default variation
  //     key: 'default-variation-key',
  //     experimentId: null, // -> `null` because it is default variation
  //     variables: []
  //   }
  // }
}

init();
caution

This method only collects the visitor's active feature flags. This means the result excludes all the feature flags for which the visitor is assigned to the off (default or control) variation. When you need all of the visitor's feature flags to iterate, use getFeatureFlags instead.

See the getVisitorFeatureFlags CAUTION section method for more details.

Arguments​
NameTypeDescription
visitorCode (required)stringunique visitor identification string, can't exceed 255 characters length
Return value​

Map<string, KameleoonVariationType> - a map of feature flags, where key is featureKey and value is detailed information about the visitor's variation and its variables.

Exceptions thrown​
TypeDescription
KameleoonException.InitializationMethod was executed before the kameleoonClient completed its initialize call.
KameleoonException.VisitorCodeMaxLengthThe visitor code exceeded the maximum length (255 characters).
KameleoonException.VisitorCodeEmptyThe visitor code is empty.
KameleoonException.StorageReadError while reading storage data.
KameleoonException.NumberParseCouldn't parse Number value.
KameleoonException.JSONParseCouldn't parse JSON value.

getFeatureFlagVariable()​

note

Use the getVariation method.

The getFeatureFlagVariable() method returns a variable for a visitor identified by a visitorCode. This method includes a targeting check that identifies the appropriate variation exposed to the visitor, saves it to storage, and sends a tracking request.

import {
  KameleoonClient,
  VariableType,
  JSONType,
} from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({
  siteCode: 'my_site_code',
  configuration: { domain: '.example.com' },
});

async function init(): Promise<void> {
  await client.initialize();

  // -- Get visitor code
  const visitorCode = client.getVisitorCode();

  // -- Get feature variable
  const result = client.getFeatureFlagVariable({
    visitorCode,
    featureKey: 'my_feature_key'
    variableKey: 'my_variable_key'
  });

  // -- Infer the type of variable by its `type`
  switch (result.type) {
    case VariableType.BOOLEAN:
      const myBool: boolean = result.value;
      break;
    case VariableType.NUMBER:
      const myNum: number = result.value;
      break;
    case VariableType.JSON:
      const myJson: JSONType = result.value;
      break;
    case VariableType.STRING:
    case VariableType.JS:
    case VariableType.CSS:
      const myStr: string = result.value;
      break;
    default:
      break;
  }
}

init();
Arguments​

Parameters object of type GetFeatureFlagVariableParamsType containing the following fields:

NameTypeDescription
visitorCode (required)stringunique visitor identification string, can't exceed 255 characters in length.
featureKey (required)stringa unique key for feature flag.
variableKey (required)stringkey of the variable to be found for a feature flag with provided featureKey. Can be found in Kameleoon platform
Return value​

FeatureFlagVariableType - a variable object containing type and value fields. You can check the type field against VariableType enum. For example, if the type is VariableType.BOOLEAN, then value will be a boolean type.

Exceptions thrown​
TypeDescription
KameleoonException.InitializationMethod was executed before the kameleoonClient completed its initialize call.
KameleoonException.VisitorCodeMaxLengthThe visitor code exceeded the maximum length (255 characters).
KameleoonException.VisitorCodeEmptyThe visitor code is empty.
KameleoonException.NotTargetedCurrent visitor is not targeted.
KameleoonException.FeatureFlagConfigurationNotFoundNo feature flag was found for provided featureKey.
KameleoonException.FeatureFlagVariableNotFoundNo feature variable was found for provided visitorCode and variableKey.
KameleoonException.FeatureFlagEnvironmentDisabledFeature flag is disabled for the current environment.
KameleoonException.JSONParseCouldn't parse JSON value.
KameleoonException.NumberParseCouldn't parse Number value.

getFeatureFlagVariables()​

note

Use the getVariation method.

The getFeatureFlagVariables() method returns a variable for a visitor identified by a visitorCode. This method includes a targeting check that identifies the appropriate variation exposed to the visitor, saves it to storage, and sends a tracking request.

import { KameleoonClient } from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({
  siteCode: 'my_site_code',
  configuration: { domain: '.example.com' },
});

async function init(): Promise<void> {
  await client.initialize();

  // -- Get visitor code
  const visitorCode = client.getVisitorCode();

  // -- Get a list of variables for the visitor under `visitorCode` in the feature flag
  const variables = client.getFeatureFlagVariables(
    visitorCode,
    'my_feature_key',
  );
}

init();
Arguments​
NameTypeDescription
visitorCode (required)stringunique visitor identification string, can't exceed 255 characters.
featureKey (required)stringa unique key for feature flag.
Return value​

FeatureVariableResultType[] - a list of variable objects containing key, type and value fields. You can check the type field against VariableType enum. For example, if the type is VariableType.BOOLEAN, then value will be a boolean type.

Exceptions thrown​
TypeDescription
KameleoonException.InitializationMethod was executed before the kameleoonClient completed its initialize call.
KameleoonException.VisitorCodeMaxLengthThe visitor code exceeded the maximum length (255 characters).
KameleoonException.VisitorCodeEmptyThe visitor code is empty.
KameleoonException.NotTargetedCurrent visitor is not targeted.
KameleoonException.FeatureFlagConfigurationNotFoundNo feature flag was found for provided featureKey.
KameleoonException.FeatureFlagVariationNotFoundNo feature variation was found for provided visitorCode and variationKey.
KameleoonException.FeatureFlagEnvironmentDisabledFeature flag is disabled for the current environment.
KameleoonException.JSONParseCouldn't parse JSON value.
KameleoonException.NumberParseCouldn't parse Number value.

onConfigurationUpdate()​

note

Use the onEvent method with EventType.ConfigurationUpdate instead.

The onConfigurationUpdate() method fires a callback on client configuration update.

note

This method is applicable only for server-sent events used in real-time updates.

import { KameleoonClient } from '@kameleoon/javascript-sdk';

const client = new KameleoonClient({ siteCode: 'my_site_code' });

async function init(): Promise<void> {
  await client.initialize();

  // -- Define logic to be executed on client configuration update
  client.onConfigurationUpdate(() => {
    // -- My Logic
  });
}

init();
Arguments​
NameTypeDescription
callback (required)() => voidcallback function with no parameters that will be called upon configuration update.
Exceptions thrown​
TypeDescription
KameleoonException.InitializationMethod was executed before the kameleoonClient completed its initialize call.