Skip to main content

JavaScript / TypeScript SDK

Welcome to the developer documentation for the Kameleoon JavaScript SDK. Our SDK allows you to run experiments and activate feature flags on your front-end web application. Integrating our SDK into your web application is easy, and its footprint (in terms of memory and network usage) is low.

note

Before you install the JavaScript SDK, we recommend that you review the Technical considerations article to gain an understanding of the fundamental technical concepts behind our SDKs. This will help ensure a successful integration.

tip

The JavaScript SDK can be used on apps built with Ionic. By using Kameleoon's SDK on your Ionic app, you can take advantage of our powerful A/B testing and feature flags capabilities to improve the user experience and drive better engagement and conversion rates.

Changelog​

Latest version description of JavaScript / TypeScript SDK can be found here.

Installation​

The Kameleoon SDK Installation tool is the preferred way 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 of the 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-3.1.0.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, you can use the following script, where 3 is the current major version:

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

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

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

Versions can be referenced on the release page.

Contents​

To configure your JavaScript application and start running feature experiments and deploying new features to your users, please follow the instructions provided in the Main usage section. This section contains all the main steps for proper Kameleoon JavaScript SDK configuration as well as main tools for development.

  1. Initializing the Kameleoon Client
  2. Getting access to feature flags and variations
  3. Using Kameleoon Client methods

We highly recommend that you take a look at the Methods section, which includes useful information on every method that is introduced in JavaScript SDK.

Explore additional sections with some useful information on Kameleoon:

Main Usage​

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

1. Initializing the Kameleoon Client​

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 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 done asynchronously in order to make sure that Kameleoon API call was successful for that method initialize() is used. You can use async/await, Promise.then() or any other method to handle asynchronous client initialization.

Arguments​
NameTypeDescription
siteCode (required)stringclient's site code defined on Kameleoon platform
configuration (optional)Partial<SDKConfigurationType>client's configuration
externals (optional)ExternalsTypeexternal implementation of SDK dependencies (External dependencies)
note

configuration consists of following parameters:

NameTypeDescriptionDefault Value
updateInterval (optional)numberupdate interval in minutes for sdk configuration, minimum value is 1 minute60
environment (optional)Environmentfeature flag environmentEnvironment.Production
targetingDataCleanupInterval (optional)number or undefinedinterval in minutes for cleaning up targeting data, minimum value is 1 minuteundefined (no cleanup will be performed)
domain (optional)string or undefineddomain that the cookie belongs to.undefined
requestTimeout (optional)number or undefinedtimeout in milliseconds for all SDK network requests, if timeout is exceeded request will fail immediately10_000 (10 seconds)
note

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

2. Getting access to feature flags and variations​

note

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

After the SDK has been initialized, you can obtain a feature flag configuration. Subsequently, all methods will require you to specify the User ID or visitor code associated with the request.

note

If you are using Kameleoon in Hybrid mode with mixed front-end and back-end environments, you can call the getVisitorCode method to obtain the Kameleoon visitorCode for the current visitor. Alternatively, if you provide your own User ID, you must ensure its uniqueness on your end.

3. Using Kameleoon Client methods​

Now your setup is done! You can use KameleoonClient methods to handle feature experiments and feature flags.

To associate various data points with the current user, you can use the addData method. This method requires the visitorCode as the first parameter and accepts several additional parameters. These additional parameters represent the various Data Types allowed in Kameleoon.

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 user data
  const customDataIndex = 0;
  client.addData(visitorCode, new CustomData(customDataIndex, 'my_data'));

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

  // -- Track conversion
  client.trackConversion({ visitorCode, revenue: 20000, goalId: 123 });
}

init();

Feature flags can be very useful for implementing ON/OFF switches with optional but advanced user targeting rules. However, you can also use feature flags to run feature experiments with several variations of your feature flag. Check out our documentation on creating feature experiments for more information.

note

See Methods section for detailed guide for each KameleoonClient method available.

Methods​

Get Visitor Code / Use Own Visitor ID​

getVisitorCode​

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();

Method getVisitorCode obtains a visitor code from the browser cookie. If the visitor code doesn't exist yet, 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.

Parameters​

NameTypeDescription
defaultVisitorCode (optional)stringvisitor code to be used in case 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.

Returns​

string - result visitor code

Throws​

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

Initialize Kameleoon Client​

initialize​

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();

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.

note

Client initialization has an optional offline mode. It is activated by setting optional useCache parameter to true.

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:

Parameters​

NameTypeDescriptionDefault Value
useCache (optional)boolean or undefinedparameter for activating SDK offline mode, if true is passed failed polls will not return error and will use cached data if such data is availablefalse

Returns​

Promise<boolean> - A promise resolved to a boolean indicating a successful sdk initialization. Generally initialize will throw an error if the something that can not be handled will happen, so the boolean value will almost always be true and won't give as much useful information.

Throws​

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

Add associated client data​

addData​

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();

The addData() method adds targeting data to storage so other methods can use the data to decide whether or not 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 that is triggered the flush. Noe that the trackConversion method also sends out any previously associated data, just like the flush method. The same is true for 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.

note

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

Parameters​

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

kameleoonData is variadic argument it can be passed as one or several arguments (see the example)

note

The index or ID of the custom data can be found in your Kameleoon account. It is important to 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.

Throws​

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 it's initialize call.
note

Check Data Types reference for more details of how to manage different data types

Track Conversion​

trackConversion​

import { KameleoonClient } 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 });

  // -- Track conversion with unique visitor identifier flag
  const internalUserId = 'my_user_id';
  client.trackConversion({
    visitorCode: internalUserId,
    revenue: 20000,
    goalId: 123,
    isUniqueIdentifier: true,
  });
}

init();

trackConversion() creates and adds Conversion data to the visitor with the specified parameters and executes the flush method.

note

This helper method is useful for simple conversion tracking. However, you can also create your own Conversion data and flush (add) it manually. Using the data type allows for more flexible Conversion tracking, including use of the negativeparameter.

If you specify a visitorCode and set isUniqueIdentifier to true, the trackconversion() method uses it as the unique visitor identifier, which is useful for Cross-device experimentation because the SDK links the flushed data with the visitor that is associated with the specified identifier.

note

The isUniqueIdentifier can also be useful in other edge-case scenarios, such as when you can't access the anonymous visitorCode that was originally assigned to the visitor, but you do have access to an internal ID that is connected to the anonymous visitor using session merging capabilities.

Parameters​

Parameters object consisting of:

NameTypeDescriptionDefault
visitorCode (required)stringUnique visitor identifier string. Can't exceed 255 characters length.-
goalId (required)numberGoal to be sent in tracking request-
revenue (optional)numberRevenue to be sent in tracking request-
isUniqueIdentifier (optional)booleanOptional parameter that specifies whether the visitorCode is a unique identifierfalse

Throws​

TypeDescription
KameleoonException.VisitorCodeMaxLengthThe visitor code exceeded the maximum length (255 characters)
KameleoonException.VisitorCodeEmptyThe visitor code is empty
KameleoonException.StorageWriteCouldn't update storage data

Flush tracking data​

flush​

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);

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

  // -- Flush data with unique visitor identifier flag
  const internalUserId = 'my_user_id';
  client.flush(internalUserId, true);
}

init();

flush() takes the Kameleoon data associated with the visitor and sends the data tracking request along with all of the data that's been added previously using the addData method.

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 during offline mode, the SDK attempts to send the stored requests before executing the latest request.

If you specify a visitorCode, the flush() method uses it as the unique visitor identifier, which is useful for Cross-device experimentation. When you specify a visitorCode and set the isUniqueIdentifier parameter to true, the SDK links the flushed data with the visitor associated with the specified identifier.

note

The isUniqueIdentifier can also be useful in other edge-case scenarios, such as when you can't access the anonymous visitorCode that was originally assigned to the visitor, but you do have access to an internal ID that is connected to the anonymous visitor using session merging capabilities.

Parameters​

NameTypeDescriptionDefault
visitorCode (optional)stringunique visitor identification string, can't exceed 255 characters length, if not passed all the data will be flushed (sent to the remote Kameleoon servers)-
isUniqueIdentifier (optional)booleanan optional parameter for specifying if the visitorCode is a unique identifierfalse

Throws​

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

Get list of all feature flags​

getFeatureFlags​

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();

Method getFeatureFlags() returns a list of feature flags stored in the client configuration

Returns​

FeatureFlagType[] - list of feature flags, each feature flag item contains id and key

Throws​

TypeDescription
KameleoonException.InitializationMethod was executed before the kameleoonClient completed it's initialize call

Get list of feature flags for a certain visitor​

getVisitorFeatureFlags​

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();

Method getVisitorFeatureFlags() returns a list of feature flags that the visitor with visitorCode that is targeted by and that are active for the visitor (visitor will have one of the variations allocated).

danger

This method only collect the visitor's active feature flags. getVisitorFeatureFlags exclude all the feature flags for which visitor has is assigned to the off (default/control) variation. If the off variation is used as one of your experiment variations, you might get unintended results.

For example:

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

For this case use getFeatureFlags instead:

// -- Both `off` and other variations are processed as expected
client.getFeatureFlags('my_visitor').forEach(({ key }) => {
  client.getFeatureFlagVariationKey('my_visitor', key);
});

Parameters​

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

Returns​

FeatureFlagType[] - list of feature flags, each feature flag item contains id and key

Throws​

TypeDescription
KameleoonException.InitializationMethod was executed before the kameleoonClient completed it's 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

Check if the feature is active for visitor​

isFeatureFlagActive​

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');
}

init();

Method isFeatureFlagActive() returns a boolean indicating whether the visitor with visitorCode has featureKey active for him, this method includes targeting check, finding the according variation exposed to the visitor and saving it to storage along with sending tracking request.

note

Visitor must be targeted to has feature flag active

Parameters​

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

Returns​

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

Throws​

TypeDescription
KameleoonException.InitializationMethod was executed before the kameleoonClient completed it's 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.

Get variation key for a certain feature flag​

getFeatureFlagVariationKey​

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();

Method getFeatureFlagVariationKey() returns variation key for the visitor under visitorCode in the found feature flag, this method includes targeting check, finding the according variation exposed to the visitor and saving it to storage along with sending tracking request.

note

If the user has never been associated with the feature flag, the SDK returns a variation key randomly, following the feature flag rules. If the user is already registered with the feature flag, the SDK detects the previous variation key value. If the user doesn't match any of the rules, the default value defined in Kameleoon's feature flag delivery rules will be returned. It's important to note that the default value may not be a variation key, but a boolean value or another data type, depending on the feature flag configuration.

Parameters​

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

Returns​

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

Throws​

TypeDescription
KameleoonException.InitializationMethod was executed before initialize was done 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

Get a variable of a certain feature flag​

getFeatureFlagVariable​

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 it's `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:
      const myStr: string = result.value;
      break;
    default:
      break;
  }
}

init();

Method getFeatureFlagVariable() returns a variable for the visitor under visitorCode in the found feature flag, this method includes targeting check, finding the according variation exposed to the visitor and saving it to storage along with sending tracking request.

Parameters​

Parameters object of type GetFeatureFlagVariableParamsType containing the following fields:

NameTypeDescription
visitorCode (required)stringunique visitor identification string, can't exceed 255 characters 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 on Kameleoon Platform

Returns​

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.

Throws​

TypeDescription
KameleoonException.InitializationMethod was executed before the kameleoonClient completed it's 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

Get all variables of a certain feature flag​

getFeatureFlagVariables​

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 found feature flag
  const variables = client.getFeatureFlagVariables(
    visitorCode,
    'my_feature_key',
  );
}

init();

Method getFeatureFlagVariables() returns a list of variables for the visitor under visitorCode in the found feature flag, this method includes targeting check, finding the according variation exposed to the visitor and saving it to storage along with sending tracking request.

Parameters​

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

Returns​

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.

Throws​

TypeDescription
KameleoonException.InitializationMethod was executed before the kameleoonClient completed it's 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

Obtain data from Kameleoon remote source​

getRemoteData​

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();

Method getRemoteData() returns a data which is stored for specified site code on a remote Kameleoon server

For example, 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.

Parameters​

NameTypeDescription
key (required)stringunique key that the data you try to get is associated with

Returns​

JSONType - promise with data retrieved for specific key

Throws​

TypeDescription
KameleoonException.RemoteDataCouldn't retrieve data from Kameleoon server

Obtain Kameleoon Visits Data from Kameleoon Data API​

getRemoteVisitorData​

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();

getRemoteVisitorData() is an asynchronous method for retrieving Kameleoon Visits Data for the visitorCode from Kameleoon Data API and adding it to the storage so that other methods could decide whether the current visitor is targeted or not.

Data obtained by getRemoteVisitorData plays important role when working with conditions that use asynchronously pre-loaded data, make sure to utilize it when working with such conditions.

note

By default getRemoteVisitorData automatically attaches the latest custom data entry with scope=Visitor to the visitor without calling addData. You can use this data for Synchronizing custom data across devices.

note

The isUniqueIdentifier parameter can be useful in edge-case scenarios, such as when you can't access the anonymous visitorCode that was originally assigned to the visitor, but you do have access to an internal ID that is connected to the anonymous visitor using session merging capabilities.

Parameters​

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
isUniqueIdentifier (optional)booleanoptional parameter that, when true, specifies that the visitorCode is a unique identifierfalse

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 data will be retrieved.false

Returns​

KameleoonDataType[] - promise with list of Kameleoon Data retrieved

Throws​

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

Retrieve warehouse audience data​

getVisitorWarehouseAudience​

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();

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.

Parameters​

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)

Returns​

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

Throws​

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

Define an action for real time configuration update​

onConfigurationUpdate​

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();

Method onConfigurationUpdate() fires a callback on client configuration update.

note

This method only works for server sent events of real time update

Parameters​

NameTypeDescription
callback (required)() => voidcallback function with no parameters that will be called upon configuration update

Throws​

TypeDescription
KameleoonException.InitializationMethod was executed before the kameleoonClient completed it's 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 to automatically send the exposure events to the analytics solution you are using. The SDK builds a tracking code for your active analytics solution based on the experiments that the visitor has triggered in the last 5 seconds. For more information about hybrid experimentation, please refer to this documentation.

Method getEngineTrackingCode() returns Kameleoon tracking code for the current visitor. Tracking code is built based the experiments that were triggered during the last 5 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 your closing <body> tag in your HTML page, as it will be only used for tracking purposes.

getEngineTrackingCode​

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]);
  // 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();

Method getEngineTrackingCode() returns Kameleoon tracking code for the current visitor. Tracking code is built based the feature experiments that were triggered during the last 5 seconds

note

Result tracking code can be inserted directly into 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]);
        window.kameleoonQueue.push(['Experiments.trigger', 100, true]);
      `;
      const script = document.createElement('script');

      script.textContent = engineTrackingCode;
      document.body.appendChild(script);
    </script>
  </body>
</html>

Parameters​

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

Returns​

string containing engine tracking code

Throws​

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

setLegalConsent​

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();
note

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.

Method setLegalConsent 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 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.

Parameters​

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 the visitor has given legal consent, false indicates the visitor has never provided, or has withdrawn, legal consent

Throws​

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

Data Types​

Kameleoon Data types are helper classes used for storing data in storage in predefined forms. During the flush execution, the SDK collects all the data and sends it along 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() method. See Use visit history to target users for more information.

note

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

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();

Browser contains browser information.

note

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

Parameters​

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

Conversion​

import {
  KameleoonClient,
  ConversionParametersType,
  Conversion,
} 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,
  };

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

init();

Conversion contains information about your conversion.

note

Each visitor can have multiple Conversion objects.

note

You can find the goalId in the Kameleoon app.

Parameters​

ConversionParametersType conversionParameters - an object with conversion parameters described below

NameTypeDescriptionDefault Value
goalId (required)numberan id of a goal to track-
revenue (optional)numberan optional parameter for revenue0
negative (optional)booleanan optional parameter identifying whether the conversion should be removedfalse
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();

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 not possible, the SDK can use Cookie data as an alternative.

note

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

Parameters​

NameTypeDescription
cookie (required)CookieType[]A list of CookieType objects consisting of cookie keys and values

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​

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();

GeolocationData contains the visitor's geolocation details.

note

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

Parameters​

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 values (longitude and latitude). Coordinate number represents decimal degrees (double that can be negative)

CustomData​

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();

CustomData is usually used with a custom data targeting condition on the Kameleoon platform to determine whether the visitor is targeted or not.

To persist the custom data across future visits, the SDK sends CustomData with Visitor scope with the next tracking request. You can set the scope in the data configuration on the Custom Data Dashboard.

note

Each visitor can only have one CustomData per unique index. Adding another CustomData with the same index overwrites the existing one.

note

The index or ID of the custom data can be found in your Kameleoon account. It is important to 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.

note

To prevent the SDK from flushing the data with the selected index to the Kameleoon servers, check the Only save this data in Local Storage on the user's device, not on a server option when creating a new custom data entry on the Custom Data dashboard.

It's a useful option if you only want to utilize your private custom data for targeting.

Parameters​

NameTypeDescription
index (required)numberan index of custom data to be stored under in a state, an index of custom data can be specified in Advanced Tools section of Kameleoon Application
value (optional)string[]custom value to store under the specified id, value can be anything but has to be stringified to match the string type. Note value is variadic parameter and can be used as follows

Device​

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();

Device contains information about your device.

note

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

Parameters​

NameTypeDescription
deviceType (required)DeviceTypepossible variants for device type (PHONE, TABLET, DESKTOP)

OperatingSystem​

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();

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.

Parameters​

NameTypeDescription
operatingSystem (required)OperatingSystemTypepossible variants for device type: WINDOWS_PHONE, WINDOWS, ANDROID, LINUX, MAC, and IOS

PageView​

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();

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 SDK that the visitor re-visited the page.

Parameters​

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 referrers Indices, has no default value
note

The index or ID of the referrer can be found in your Kameleoon account. It is important to note that this index starts at 0, which means that the first acquisition channel you create for a given site will be assigned 0 as its ID, not 1.

UserAgent​

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();

Store information on the user-agent of the visitor. Server-side experiments are more vulnerable to bot traffic than client-side experiments. To address this, Kameleoon uses the IAB/ABC International Spiders and Bots List to identify known bots and spiders. Kameleoon also uses the UserAgent field to filter out bots and other unwanted traffic that could otherwise skew your conversion metrics. For more details, see the 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.

Parameters​

NameTypeDescription
value (required)stringvalue used for comparison
caution

If you run Kameleoon in an hybrid mode, your server-side experiments will be automatically protected against bot traffic. This is because Kameleoon collects the user-agent automatically on the front-end side. 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.

ApplicationVersion​

note

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

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();

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.

Parameters​

NameTypeDescription
version (required)stringVersion of mobile application. This field follows only semantic versioning. Acceptable formats are major, major.minor, or major.minor.patch

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.

Domain information​

You provide a domain as the domain in KameleoonClient configuration, which is used for storing Kameleoon visitor code in cookies. This is 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 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. That means that pages with the app.example.com domain can't use the cookie.

To be more flexible around subdomains you can specify domain starting with the ., for instance 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 it hard to test the domain when developing on localhost.

There are two ways to avoid this issue:

  • Don't specify the domain field in the SDK client while testing. This prevents localhost issues (the cookie will be set on any domain).
  • 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
eventSourceIExternalEventSourceOptionalBrowser EventSourceUsed for receiving Server Sent Events for Real Time Update capabilities
visitorCodeManagerIExternalVisitorCodeManagerOptionalBrowser cookieUsed for storing and synchronizing visitor code

The following example implements external dependencies. To import an interface from an SDK, create a class that implements it 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();
    }
  }
}

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

VisitorCodeManager​

import {
  IExternalVisitorCodeManager,
  SetDataParametersType,
  KameleoonClient,
} 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;

    // - Parse cookie by finding a match with provided `key`
    const cookieEntry = cookieString.split(' ;').find((keyValue) => {
      const [cookieKey, cookieValue] = keyValue.split('=');

      return cookieKey === key && cookieValue !== '';
    });

    if (cookieEntry) {
      const [_, value] = cookieEntry.split('=');

      return value;
    }

    // - Return `null` if no cookie was found
    return null;
  }

  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(),
  },
});

Error Handling​

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();

Almost every KameleoonClient method may throw an error at some point, these errors are not just caveats but rather deliberately predefined KameleoonErrors that extend native JavaScript Error class providing useful messages and special type field with a type KameleoonException.

KameleoonException is an enum containing all possible error variants.

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

Overall handling the errors considered a good practice to make your application more stable and avoid technical issues.

Cross-device experimentation​

To support visitors who access your app from multiple devices (cross-device experimentation), Kameleoon allows you to synchronize your custom data across each of the visitor's devices and reconcile their visit history across each device.

Synchronizing custom data across devices​

If you want to synchronize your Custom Data across multiple devices, Kameleoon provides a Custom Data synchronization mechanism.

To use this feature, in the Custom Data Dashboard, edit the custom data and set the Scope value to Visitor. The custom data will now be permanently associated with a specific visitor as long as getRemoteVisitorData is called before any other actions with the visitor-associated data.

After the custom data is set up, calling getRemoteVisitorData makes the latest data accessible on any device.

See the following example of data synchronization between two devices:

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
  //    on Kameleoon Platform
  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' });

  // -- The further SDK code will have an access to CustomData with `Visitor` scope
  //    defined on Device One.
  //    So "my_data" is now available for targeting and tracking for "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). One of the powerful features that history reconciliation provides is the ability to merge different visitors sessions into one. To reconcile visit history, you can use CustomData to provide a unique identifier for the visitor.

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

When your custom data is set up, you can use it in your code to merge a visitor's sessions. Sessions with the same identifier will always see the same experiment variation and will be displayed as a single visitor in the Visitor view of your experiment's result pages.

The SDK configuration ensures that associated sessions always see the same variation of the experiment.

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

  • getRemoteVisitorData with isUniqueIdentifier=true - to retrieve data for all linked visitors
  • trackConversion or flush with isUniqueIdentifier=true - 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.

In this example, we have an application with a login page. Since we don't know the user ID at the moment of login, we use an anonymous visitor identifier generated by thegetVisitorCode method. After the user logs in, we can associate the anonymous visitor with the user ID and use it as a unique identifier for the visitor.

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 later re-use it
  window.anonymousVisitor = anonymousVisitor;

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

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

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

  // -- Getting the variation for user ID will
  //    result in the same variation as for anonymous visitor
  //    variation will be `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,
    // -- Letting SDK know that the visitor is unique identifier
    isUniqueIdentifier: true,
  });

  // -- Moreover linked visitors share previously
  //    collected remote data
  const data = await client.getRemoteVisitorData({
    visitorCode: 'my_user_id',
    // -- Letting SDK know that the visitor is unique identifier
    isUniqueIdentifier: true,
  });
}

init();