React SDK
With the Kameleoon React SDK, you can run feature experiments and activate feature flags on your front-end web and mobile application. Integrating our SDK into your web and mobile 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 the React SDK can be found in the changelog.
SDK methods: For the full reference documentation of the React SDK, see the reference section.
Requirements: React SDK requires React 16.8.0+
Developer guide
Follow this section to integrate the SDK into your application and learn more about using the SDK.
Getting started
This section walks you through installing and configurating the SDK for the first time.
Installation
The Kameleoon SDK Installation tool is the preferred way to install the SDK. This SDK Installer helps you to install the SDK of your choice, generate a basic code sample, and configure external dependencies if needed.
To start 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
Create the Kameleoon Client
To get started to create an entry point for React SDK by creating Kameleoon Client on the top level of your application. Create an instance of KameleoonClient
using the createClient()
function, imported from the kameleoon
package.
- TypeScript
- JavaScript
import {
createClient,
Environment,
SDKConfigurationType,
} from '@kameleoon/react-sdk';
// -- Optional configuration
const configuration: Partial<SDKConfigurationType> = {
updateInterval: 60,
environment: Environment.Production,
domain: '.example.com',
};
const client = createClient({ siteCode: 'my_site_code', configuration });
import { createClient, Environment } from '@kameleoon/react-sdk';
// -- Optional configuration
const configuration = {
updateInterval: 60,
environment: Environment.Production,
domain: '.example.com',
};
const client = createClient({ siteCode: 'my_site_code', configuration });
Wrap the application in the Kameleoon Provider
The second step is connecting the previously created Kameleoon Client to KameleoonProvider
by passing the configured client to KameleoonProvider
:
- TypeScript
- JavaScript
import {
createClient,
Environment,
KameleoonProvider,
} from '@kameleoon/react-sdk';
const client = createClient({
siteCode: 'my_site_code',
configuration: {
updateInterval: 60,
environment: Environment.Production,
},
});
function AppWrapper(): JSX.Element {
return (
<KameleoonProvider client={client}>
<App />
</KameleoonProvider>
);
}
import {
createClient,
Environment,
KameleoonProvider,
} from '@kameleoon/react-sdk';
const client = createClient({
siteCode: 'my_site_code',
configuration: {
updateInterval: 60,
environment: Environment.Production,
},
});
function AppWrapper() {
return (
<KameleoonProvider client={client}>
<App />
</KameleoonProvider>
);
}
KameleoonProvider
Use this provider on root level by wrapping your app to gain an access to KameleoonClient
. This ensures your app does not flicker due to flag changes at startup time.
Props
Name | Type | Description |
---|---|---|
children (required) | ReactNode | child elements of the provider |
client (required) | KameleoonClient | KameleoonClient instance created by createClient() |
Await for the client initialization
KameleoonClient
initialization is done asynchronously in order to make sure that Kameleoon API call was successful for that hook useInitialize
is used. You can use async/await
, Promise.then()
or any other method to handle asynchronous client initialization.
- TypeScript
- JavaScript
import { useEffect, useCallback } from 'react';
import { useInitialize } from '@kameleoon/react-sdk';
function MyComponent(): JSX.Element {
const { initialize } = useInitialize();
// -- Waiting for the client initialization using `async/await`
const init = useCallback(async (): Promise<void> => {
await initialize();
}, [initialize]);
useEffect(() => {
init();
}, [init]);
}
import { useEffect, useCallback } from 'react';
import { useInitialize } from '@kameleoon/react-sdk';
function MyComponent() {
const { initialize } = useInitialize();
// -- Waiting for the client initialization using `async/await`
const init = useCallback(async () => {
await initialize();
}, [initialize]);
useEffect(() => {
init();
}, [init]);
}
Activating a feature flag
Assigning a unique ID to a user
To assign a unique ID to a user, you can 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 would have 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 (kameleoon.js) and the SDK.
Retrieving a flag configuration
To implement a feature flag in your code, you must first create a feature flag in your Kameleoon account.
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
.
The isFeatureFlagActive()
method can be used if you want to retrieve the configuration of a simple feature flag that has only an ON or OFF state, as opposed to more complex feature flags with multiple variations or targeting options.3
The getFeatureFlagVariationKey()
method retrieves the configuration of a feature experiment 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 are used 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.
To check if a feature flag is active, you only need to use one method. Choose isFeatureFlagActive
if you simply 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 that have been 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 you 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 variation of a feature flag.
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 automatically collected, 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, it's recommended to filter out bots by 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.
React Native considerations
React Native on android
platform doesn't support Real Time Update
feature.
While React SDK works the same way in both React Native and React contexts, it's important to note that setup steps differ. Due to the lack of browser API in React Native, React SDK has to have different external dependency implementations to work correctly. For that, Kameleoon provides several dedicated npm packages that you can install and set up manually or install using Kameleoon SDK Installation Tool (recommended).
The packages include:
@kameleoon/react-native-storage
- built usingreact-native-mmkv
library@kameleoon/react-native-event-source
- built usingreact-native-event-source-ts
library@kameleoon/react-native-visitor-code-manager
- built on top ofreact-native-mmkv
library- optional
@kameleoon/react-native-secure-prng
- built usingreact-native-get-random-values
library
If you don't want to use the listed packages, you can provide your own implementation following the external dependencies guide.
Example React SDK setup for React Native application:
- TypeScript
- JavaScript
import { createClient } from '@kameleoon/react-sdk';
import { KameleoonEventSource } from '@kameleoon/react-native-event-source';
import { KameleoonStorage } from '@kameleoon/react-native-storage';
import { KameleoonVisitorCodeManager } from '@kameleoon/react-native-visitor-code-manager';
import { KameleoonSecurePRNG } from '@kameleoon/react-native-secure-prng';
// --- Create KameleoonClient ---
const client = createClient({
siteCode: 'my_site_code',
externals: {
storage: new KameleoonStorage(),
eventSource: new KameleoonEventSource(),
visitorCodeManager: new KameleoonVisitorCodeManager(),
// -- Optional --
prng: new KameleoonSecurePRNG(),
},
});
import { createClient } from '@kameleoon/react-sdk';
import { KameleoonEventSource } from '@kameleoon/react-native-event-source';
import { KameleoonStorage } from '@kameleoon/react-native-storage';
import { KameleoonVisitorCodeManager } from '@kameleoon/react-native-visitor-code-manager';
import { KameleoonSecurePRNG } from '@kameleoon/react-native-secure-prng';
// --- Create KameleoonClient ---
const client = createClient({
siteCode: 'my_site_code',
externals: {
storage: new KameleoonStorage(),
eventSource: new KameleoonEventSource(),
visitorCodeManager: new KameleoonVisitorCodeManager(),
// -- Optional --
prng: new KameleoonSecurePRNG(),
},
});
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.
- TypeScript
- JavaScript
import { KameleoonClient, KameleoonLogger, LogLevel } from '@kameleoon/react-sdk';
const client = createClient({ siteCode: 'my_site_code', configuration });
// The `NONE` log level allows no logging.
client.setLogLevel(LogLevel.NONE);
// Or use directly KameleoonLogger
KameleoonLogger.setLogLevel(LogLevel.NONE);
// The `ERROR` log level allows to log only issues that may affect the SDK's main behaviour.
client.setLogLevel(LogLevel.ERROR);
// Or use directly KameleoonLogger
KameleoonLogger.setLogLevel(LogLevel.ERROR);
// The `WARNING` log level allows to log issues which may require an attention.
// It extends the `ERROR` log level.
// The `WARNING` log level is a default log level.
client.setLogLevel(LogLevel.WARNING);
// Or use directly KameleoonLogger
KameleoonLogger.setLogLevel(LogLevel.WARNING);
// The `INFO` log level allows to log general information on the SDK's internal processes.
// It extends the `WARNING` log level.
client.setLogLevel(LogLevel.INFO);
// Or use directly KameleoonLogger
KameleoonLogger.setLogLevel(LogLevel.INFO);
// The `DEBUG` log level allows to log extra information on the SDK's internal processes.
// It extends the `INFO` log level.
client.setLogLevel(LogLevel.DEBUG);
// Or use directly KameleoonLogger
KameleoonLogger.setLogLevel(LogLevel.DEBUG);
import { KameleoonClient, KameleoonLogger, LogLevel } from '@kameleoon/react-sdk';
const client = createClient({ siteCode: 'my_site_code', configuration });
// The `NONE` log level allows no logging.
client.setLogLevel(LogLevel.NONE);
// Or use directly KameleoonLogger
KameleoonLogger.setLogLevel(LogLevel.NONE);
// The `ERROR` log level allows to log only issues that may affect the SDK's main behaviour.
client.setLogLevel(LogLevel.ERROR);
// Or use directly KameleoonLogger
KameleoonLogger.setLogLevel(LogLevel.ERROR);
// The `WARNING` log level allows to log issues which may require an attention.
// It extends the `ERROR` log level.
// The `WARNING` log level is a default log level.
client.setLogLevel(LogLevel.WARNING);
// Or use directly KameleoonLogger
KameleoonLogger.setLogLevel(LogLevel.WARNING);
// The `INFO` log level allows to log general information on the SDK's internal processes.
// It extends the `WARNING` log level.
client.setLogLevel(LogLevel.INFO);
// Or use directly KameleoonLogger
KameleoonLogger.setLogLevel(LogLevel.INFO);
// The `DEBUG` log level allows to log extra information on the SDK's internal processes.
// It extends the `INFO` log level.
client.setLogLevel(LogLevel.DEBUG);
// Or use directly 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.
Logging limiting by a log level is performed apart from the log handling logic.
- TypeScript
- JavaScript
import { KameleoonClient, KameleoonLogger, IExternalLogger, LogLevel } from '@kameleoon/react-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 = createClient({
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 directly KameleoonLogger
KameleoonLogger.setLogLevel(LogLevel.DEBUG);
import { KameleoonClient, KameleoonLogger, LogLevel } from '@kameleoon/react-sdk';
export class CustomLogger {
// `log` method accepts logs from the SDK
log(level, message) {
// Custom log handling logic here. For example:
switch (level) {
case 'DEBUG':
console.debug(message);
break;
case 'INFO':
console.info(message);
break;
case 'WARNING':
console.warn(message);
break;
case 'ERROR':
console.error(message);
break;
}
}
}
const client = createClient({
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 directly KameleoonLogger
KameleoonLogger.setLogLevel(LogLevel.DEBUG);
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 prefix a domain with .
. For example, the domain .example.com
allows the cookie to function on both app.example.com
and login.example.com
.
You can't use regular expressions, special symbols, protocol, or port numbers in the domain
.
Additionally, a specific list of subdomains are not allowed to be used with the prefix .
.
Here's a small domain cheat sheet:
Domain | Allowed URLs | Disallowed 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 preventslocalhost
issues (the cookie will be set on any domain). - Create a local domain for
localhost
. For example:- Navigate to
/etc/hosts
on Linux or toc:\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
- Navigate to
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.
In the React 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:
Dependency | Interface | Required/Optional | API Used | Description |
---|---|---|---|---|
storage | IExternalStorage | Optional | Browser localStorage | Used for storing all the existing and collected SDK data |
requester | IExternalRequester | Optional | Browser fetch | Used for performing all the network requests |
eventSource | IExternalEventSource | Optional | Browser EventSource | Used for receiving Server Sent Events for Real Time Update capabilities |
visitorCodeManager | IExternalVisitorCodeManager | Optional | Browser cookie | Used for storing and synchronizing visitor code |
prng | IExternalPRNG | Optional | Math.random or Browser crypto.getRandomValues | Used to generate unique IDs for tracking events |
logger | ILogger | Optional | Custom implementation | Used for custom handling of logs from the SDK. Allows to define how logs are processed and where they are output. |
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
- TypeScript
- JavaScript
import { IExternalStorage } from '@kameleoon/react-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 = createClient({
siteCode: 'my_site_code',
externals: {
storage: new MyStorage(),
},
});
import { KameleoonClient } from '@kameleoon/javascript-sdk';
// --- External Storage implementation ---
// - JavaScript `Map` is used as an example storage
const storage = new Map();
class MyStorage {
read(key) {
// - 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;
}
write(key, data) {
// - Write data using `key`
storage.set(key, data);
}
}
// --- Create KameleoonClient ---
const client = createClient({
siteCode: 'my_site_code',
externals: {
storage: new MyStorage(),
},
});
EventSource
- TypeScript
- JavaScript
import {
IExternalEventSource,
EventSourceOpenParametersType,
} from '@kameleoon/react-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 = createClient({
siteCode: 'my_site_code',
externals: {
eventSource: new MyEventSource(),
},
});
// --- External EventSource implementation ---
// - Example uses native browser `EventSource`
class MyEventSource {
eventSource;
open({ eventType, onEvent, url }) {
// - 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);
}
close() {
// - Cleanup open event source
if (this.eventSource) {
this.eventSource.close();
}
}
public onError(callback) {
// - Set error callback
if (this.eventSource) {
this.eventSource.onerror = callback;
}
}
}
// --- Create KameleoonClient ---
const client = createClient({
siteCode: 'my_site_code',
externals: {
eventSource: new MyEventSource(),
},
});
VisitorCodeManager
- TypeScript
- JavaScript
import {
IExternalVisitorCodeManager,
SetDataParametersType,
KameleoonUtils,
} from '@kameleoon/react-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 finding it by 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 = createClient({
siteCode: 'my_site_code',
externals: {
visitorCodeManager: new MyVisitorCodeManager(),
},
});
import { KameleoonUtils } from '@kameleoon/react-sdk';
// --- External Visitor Code Manager implementation ---
// - Example uses browser `document.cookie` API
class MyVisitorCodeManager {
getData(key) {
const cookieString = document.cookie;
// - Return `null` if no cookie was found
if (!cookieString) {
return null;
}
// - Parse cookie finding it by provided `key`
return KameleoonUtils.getCookieValue(cookieString, key);
}
setData({ visitorCode, domain, maxAge, key, path }) {
// - 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 = createClient({
siteCode: 'my_site_code',
externals: {
visitorCodeManager: new MyVisitorCodeManager(),
},
});
Requester
- TypeScript
- JavaScript
import {
RequestType,
IExternalRequester,
KameleoonResponseType,
SendRequestParametersType,
} from '@kameleoon/react-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 = createClient({
siteCode: 'my_site_code',
externals: {
requester: new MyRequester(),
},
});
import { KameleoonClient } from '@kameleoon/react-sdk';
// --- External Requester Implementation
export class MyRequester {
async sendRequest({ url, parameters }) {
// - Using native browser `fetch`
return await fetch(url, parameters);
}
}
// --- Create KameleoonClient ---
const client = new KameleoonClient({
siteCode: 'my_site_code',
externals: {
requester: new MyRequester(),
},
});
Pseudo Random Number Generator
Pseudo Random Number Generator (PRNG) is a dependency that generates random floating point number between 0
and 1
(similar to Math.random
).
Default Kameleoon implementation relies on Browser's crypto
or Math.random
function if crypto
is not available.
Those API are very secure and reliable, however in some edge cases (especially in some React Native
engines) you might want to provide your own implementation or use a dedicated Kameleoon package for React Native - @kameleoon/react-native-secure-prng
- TypeScript
- JavaScript
import { IExternalPRNG } from '@kameleoon/react-sdk';
// --- External Pseudo Random Number Generator (PRNG) implementation ---
class MyPRNG implements IExternalPRNG {
public getRandomNumber(): number {
// Return a random floating point number between `0` and `1` like `Math.random()` does
return Math.random();
}
}
// --- Create KameleoonClient ---
const client = createClient({
siteCode: 'my_site_code',
externals: {
prng: new MyPRNG(),
},
});
// --- External Pseudo Random Number Generator (PRNG) implementation ---
class MyPRNG {
getRandomNumber() {
// Return a random floating point number between `0` and `1` like `Math.random()` does
return Math.random();
}
}
// --- Create KameleoonClient ---
const client = createClient({
siteCode: 'my_site_code',
externals: {
prng: new MyPRNG(),
},
});
Logger
- TypeScript
- JavaScript
import { KameleoonClient, KameleoonLogger, IExternalLogger, LogLevel } from '@kameleoon/react-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 = createClient({
siteCode: 'my_site_code',
externals: {
logger: new CustomLogger(),
},
});
import { KameleoonClient } from '@kameleoon/react-sdk';
// --- Custom Logger Implementation
export class CustomLogger {
log(level, message) {
// Custom log handling logic here.
}
}
// --- Create KameleoonClient ---
const client = createClient({
siteCode: 'my_site_code',
externals: {
logger: new CustomLogger(),
},
});
Error Handling
Almost every React SDK callback which is returned by hooks may throw an error at some point, these errors are not just caveats but rather deliberately predefined KameleoonError
s
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 callbacks may throw, you can check Throws
section of the hooks description on this page or just hover over the callback 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.
- TypeScript
- JavaScript
import { useEffect, useCallback } from 'react';
import {
useInitialize,
useVisitorCode,
useData,
CustomData,
KameleoonError,
KameleoonException,
} from '@kameleoon/react-sdk';
function MyComponent(): JSX.Element {
const { initialize } = useInitialize();
const { getVisitorCode } = useVisitorCode();
const { addData } = useData();
const init = useCallback(async (): Promise<void> => {
try {
await initialize();
// -- Get visitor code
const visitorCode = getVisitorCode();
const customData = new CustomData(0, 'my_data');
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;
}
}
}
}, [initialize, addData, visitorCode, getVisitorCode]);
useEffect(() => {
init();
}, [init]);
}
import { useEffect, useCallback } from 'react';
import {
useInitialize,
useVisitorCode,
useData,
CustomData,
KameleoonException,
} from '@kameleoon/react-sdk';
function MyComponent() {
const { initialize } = useInitialize();
const { getVisitorCode } = useVisitorCode();
const { addData } = useData();
const init = useCallback(async () => {
try {
await initialize();
// -- Get visitor code
const visitorCode = getVisitorCode();
const customData = new CustomData(0, 'my_data');
addData(visitorCode, customData);
} catch (error) {
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;
}
}
}, [initialize, addData, visitorCode, getVisitorCode]);
useEffect(() => {
init();
}, [init]);
}
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:
- TypeScript
- JavaScript
import { useEffect, useCallback } from 'react';
import { useInitialize, useData, CustomData } from '@kameleoon/react-sdk';
function MyComponent(): JSX.Element {
const { initialize } = useInitialize();
const { addData, flush } = useData();
const init = useCallback(async (): Promise<void> => {
await initialize();
// -- Custom Data with index `0` was set to `Visitor` scope
// on Kameleoon Platform
const customDataIndex = 0;
const customData = new CustomData(customDataIndex, 'my_data');
addData('my_visitor', customData);
flush();
}, [initialize, addData]);
useEffect(() => {
init();
}, [init]);
}
import { useEffect, useCallback } from 'react';
import { useInitialize, useData, CustomData } from '@kameleoon/react-sdk';
function MyComponent(): JSX.Element {
const { initialize } = useInitialize();
const { getRemoteVisitorData } = useData();
const init = useCallback(async (): Promise<void> => {
await 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"
}, [initialize, addData]);
useEffect(() => {
init();
}, [init]);
}
import { useEffect, useCallback } from 'react';
import { useInitialize, useData, CustomData } from '@kameleoon/react-sdk';
function MyComponent() {
const { initialize } = useInitialize();
const { addData, flush } = useData();
const init = useCallback(async () => {
await initialize();
// -- Custom Data with index `0` was set to `Visitor` scope
// on Kameleoon Platform
const customDataIndex = 0;
const customData = new CustomData(customDataIndex, 'my_data');
addData('my_visitor', customData);
flush();
}, [initialize, addData]);
useEffect(() => {
init();
}, [init]);
}
import { useEffect, useCallback } from 'react';
import { useInitialize, useData, CustomData } from '@kameleoon/react-sdk';
function MyComponent() {
const { initialize } = useInitialize();
const { getRemoteVisitorData } = useData();
const init = useCallback(async () => {
await 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"
}, [initialize, addData]);
useEffect(() => {
init();
}, [init]);
}
Using custom data for session merging
- SDK Version 9
- SDK Version 10
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 session.
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 configuration SDK ensures that associated sessions always see the same variation of the experiment.
Afterwards, you can use the SDK normally. The following methods might be helpful in the context of session merging:
- Use
getRemoteVisitorData
withisUniqueIdentifier=true
to retrieve data for all linked visitors - Use
trackConversion
orflush
withisUniqueIdentifier=true
to track some data for specific visitor that is associated with another visitor
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 the getVisitorCode
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.
- TypeScript
- JavaScript
import { useEffect, useCallback } from 'react';
import {
useInitialize,
useFeatureFlag,
useVisitorCode,
CustomData,
} from '@kameleoon/react-sdk';
function LoginPage(): JSX.Element {
const [visitorCode, setVisitorCode] = useState<string | null>(null);
const { initialize } = useInitialize();
const { getFeatureFlagVariationKey } = useFeatureFlag();
const { getVisitorCode } = useVisitorCode();
const init = useCallback(async (): Promise<void> => {
await initialize();
const anonymousVisitor = getVisitorCode();
// -- Saving `visitorCode` in the state to later re-use it
setVisitorCode(anonymousVisitor);
// -- Getting some variation, assume it's variation `A`
const variation = getFeatureFlagVariationKey(
anonymousVisitor,
'my_feature_key',
);
}, [initialize, getFeatureFlagVariationKey, getVisitorCode]);
useEffect(() => {
init();
}, [init]);
}
import { useEffect, useCallback } from 'react';
import {
useData,
useFeatureFlag,
useVisitorCode,
CustomData,
} from '@kameleoon/react-sdk';
type Props = {
anonymousVisitor: string;
};
function ApplicationPage(props: Props): JSX.Element {
const { addData, trackConversion, getRemoteVisitorData } = useData();
const { getFeatureFlagVariationKey } = useFeatureFlag();
const init = useCallback(async (): 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');
// -- Let's assume that anonymous visitor identifier
// was passed as a prop
addData(props.anonymousVisitor, userIdentifierData);
// -- Getting the variation for user ID will
// result in the same variation as for anonymous visitor
// variation will be `A`
const variation = getFeatureFlagVariationKey(
'my_user_id',
'my_feature_key',
);
// -- `my_user_id` and `anonymousVisitor` are now linked
// They can be tracked as a single visitor
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 getRemoteVisitorData({
visitorCode: 'my_user_id',
// -- Letting SDK know that the visitor is unique identifier
isUniqueIdentifier: true,
});
}, [
getRemoteVisitorData,
trackConversion,
addData,
getFeatureFlagVariationKey,
]);
useEffect(() => {
init();
}, [init]);
}
import { useEffect, useCallback } from 'react';
import {
useInitialize,
useFeatureFlag,
useVisitorCode,
CustomData,
} from '@kameleoon/react-sdk';
function LoginPage() {
const [visitorCode, setVisitorCode] = useState(null);
const { initialize } = useInitialize();
const { getFeatureFlagVariationKey } = useFeatureFlag();
const { getVisitorCode } = useVisitorCode();
const init = useCallback(async () => {
await initialize();
const anonymousVisitor = getVisitorCode();
// -- Saving `visitorCode` in the state to later re-use it
setVisitorCode(anonymousVisitor);
// -- Getting some variation, assume it's variation `A`
const variation = getFeatureFlagVariationKey(
anonymousVisitor,
'my_feature_key',
);
}, [initialize, getFeatureFlagVariationKey, getVisitorCode]);
useEffect(() => {
init();
}, [init]);
}
import { useEffect, useCallback } from 'react';
import {
useData,
useFeatureFlag,
useVisitorCode,
CustomData,
} from '@kameleoon/react-sdk';
function ApplicationPage(props) {
const { addData, trackConversion, getRemoteVisitorData } = useData();
const { getFeatureFlagVariationKey } = useFeatureFlag();
const init = useCallback(async () => {
// -- 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');
// -- Let's assume that anonymous visitor identifier
// was passed as a prop
addData(props.anonymousVisitor, userIdentifierData);
// -- Getting the variation for user ID will
// result in the same variation as for anonymous visitor
// variation will be `A`
const variation = getFeatureFlagVariationKey(
'my_user_id',
'my_feature_key',
);
// -- `my_user_id` and `anonymousVisitor` are now linked
// They can be tracked as a single visitor
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 getRemoteVisitorData({
visitorCode: 'my_user_id',
// -- Letting SDK know that the visitor is unique identifier
isUniqueIdentifier: true,
});
}, [
getRemoteVisitorData,
trackConversion,
addData,
getFeatureFlagVariationKey,
]);
useEffect(() => {
init();
}, [init]);
}
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 session.
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.
Before using other methods make sure to let SDK know that the visitor is a unique identifier by adding UniqueIdentifier
data to a visitor
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 the getVisitorCode
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.
- TypeScript
- JavaScript
import { useEffect, useCallback } from 'react';
import {
useInitialize,
useFeatureFlag,
useVisitorCode,
CustomData,
} from '@kameleoon/react-sdk';
function LoginPage(): JSX.Element {
const [visitorCode, setVisitorCode] = useState<string | null>(null);
const { initialize } = useInitialize();
const { getFeatureFlagVariationKey } = useFeatureFlag();
const { getVisitorCode } = useVisitorCode();
const init = useCallback(async (): Promise<void> => {
await initialize();
const anonymousVisitor = getVisitorCode();
// -- Saving `visitorCode` in the state to later re-use it
setVisitorCode(anonymousVisitor);
// -- Getting some variation, assume it's variation `A`
const variation = getFeatureFlagVariationKey(
anonymousVisitor,
'my_feature_key',
);
}, [initialize, getFeatureFlagVariationKey, getVisitorCode]);
useEffect(() => {
init();
}, [init]);
}
import { useEffect, useCallback } from 'react';
import {
useData,
useFeatureFlag,
useVisitorCode,
CustomData,
UniqueIdentifier,
} from '@kameleoon/react-sdk';
type Props = {
anonymousVisitor: string;
};
function ApplicationPage(props: Props): JSX.Element {
const { addData, trackConversion, getRemoteVisitorData } = useData();
const { getFeatureFlagVariationKey } = useFeatureFlag();
const init = useCallback(async (): 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');
// -- Let's assume that anonymous visitor identifier
// was passed as a prop
addData(props.anonymousVisitor, userIdentifierData);
// -- Letting SDK know that the visitor is unique identifier
addData('my_user_id', new UniqueIdentifier(true));
// -- Getting the variation for user ID will
// result in the same variation as for anonymous visitor
// variation will be `A`
const variation = getFeatureFlagVariationKey(
'my_user_id',
'my_feature_key',
);
// -- `my_user_id` and `anonymousVisitor` are now linked
// They can be tracked as a single visitor
trackConversion({
visitorCode: 'my_user_id',
goalId: 123,
revenue: 100,
});
// -- Moreover linked visitors share previously
// collected remote data
const data = await getRemoteVisitorData({
visitorCode: 'my_user_id',
});
}, [
getRemoteVisitorData,
trackConversion,
addData,
getFeatureFlagVariationKey,
]);
useEffect(() => {
init();
}, [init]);
}
import { useEffect, useCallback } from 'react';
import {
useInitialize,
useFeatureFlag,
useVisitorCode,
CustomData,
} from '@kameleoon/react-sdk';
function LoginPage() {
const [visitorCode, setVisitorCode] = useState(null);
const { initialize } = useInitialize();
const { getFeatureFlagVariationKey } = useFeatureFlag();
const { getVisitorCode } = useVisitorCode();
const init = useCallback(async () => {
await initialize();
const anonymousVisitor = getVisitorCode();
// -- Saving `visitorCode` in the state to later re-use it
setVisitorCode(anonymousVisitor);
// -- Getting some variation, assume it's variation `A`
const variation = getFeatureFlagVariationKey(
anonymousVisitor,
'my_feature_key',
);
}, [initialize, getFeatureFlagVariationKey, getVisitorCode]);
useEffect(() => {
init();
}, [init]);
}
import { useEffect, useCallback } from 'react';
import {
useData,
useFeatureFlag,
useVisitorCode,
CustomData,
UniqueIdentifier,
} from '@kameleoon/react-sdk';
function ApplicationPage(props) {
const { addData, trackConversion, getRemoteVisitorData } = useData();
const { getFeatureFlagVariationKey } = useFeatureFlag();
const init = useCallback(async () => {
// -- 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');
// -- Let's assume that anonymous visitor identifier
// was passed as a prop
addData(props.anonymousVisitor, userIdentifierData);
// -- Letting SDK know that the visitor is unique identifier
addData('my_user_id', new UniqueIdentifier(true));
// -- Getting the variation for user ID will
// result in the same variation as for anonymous visitor
// variation will be `A`
const variation = getFeatureFlagVariationKey(
'my_user_id',
'my_feature_key',
);
// -- `my_user_id` and `anonymousVisitor` are now linked
// They can be tracked as a single visitor
trackConversion({
visitorCode: 'my_user_id',
goalId: 123,
revenue: 100,
});
// -- Moreover linked visitors share previously
// collected remote data
const data = await getRemoteVisitorData({
visitorCode: 'my_user_id',
});
}, [
getRemoteVisitorData,
trackConversion,
addData,
getFeatureFlagVariationKey,
]);
useEffect(() => {
init();
}, [init]);
}
Utilities
SDK has a set of utility methods that can be used to simplify the development process. All the methods are represented as static members of KameleoonUtils
class.
simulateSuccessRequest
Method simulateSuccessRequest
is used to simulate a successful request to the Kameleoon server. It can be useful for custom Requester implementations when developer needs to simulate a successful request, for example disabling tracking.
- TypeScript
- JavaScript
import {
KameleoonUtils,
IExternalRequester,
SendRequestParametersType,
RequestType,
KameleoonResponseType,
} from '@kameleoon/react-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);
}
}
import { KameleoonUtils } from '@kameleoon/react-sdk';
// - Example of `Requester` with disabled tracking
class Requester {
async sendRequest({ url, parameters, requestType }) {
if (requestType === RequestType.Tracking) {
return KameleoonUtils.simulateSuccessRequest(requestType, null);
}
return await fetch(url, parameters);
}
}
Parameters
Name | Type | Description |
---|---|---|
requestType (required) | RequestType | A 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
Returns
Promise<KameleoonResponseType>
- returns a promise with the response of the request
getCookieValue
Method getCookieValue
is used to parse a common cookie string (key_1=value_1; key_2=value_2; ...
) and get the value of a specific cookie key. It's useful when working with a custom implementation of VisitorCodeManager
.
- TypeScript
- JavaScript
import { KameleoonUtils } from '@kameleoon/react-sdk';
const cookies = 'key_1=value_1; key_2=value_2';
const key = 'key_1';
const value = KameleoonUtils.getCookieValue(cookies, key); // = `value_1`
import { KameleoonUtils } from '@kameleoon/react-sdk';
const cookies = 'key_1=value_1; key_2=value_2';
const key = 'key_1';
const value = KameleoonUtils.getCookieValue(cookies, key); // = `value_1`
Parameters
Name | Type | Description |
---|---|---|
cookie (required) | string | Cookie string in a form key_1=value_1; key_2=value_2 |
key (required) | string | String representation of a key to find a value by |
Returns
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 React SDK.
Initialization
This section provides the methods you use to create and initialize the Kameleoon Client in your application.
initialize()
- SDK Version 9
- SDK Version 10
An asynchronous initialize
function, collected with useInitialize
hook, that's used 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.
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.
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:
- TypeScript
- JavaScript
import { useEffect, useCallback } from 'react';
import { useInitialize } from '@kameleoon/react-sdk';
function MyComponent(): JSX.Element {
const { initialize } = useInitialize();
const init = useCallback(async (): Promise<void> => {
await initialize();
}, [initialize]);
useEffect(() => {
init();
}, [init]);
}
import { useEffect, useCallback } from 'react';
import { useInitialize } from '@kameleoon/react-sdk';
function MyComponent() {
const { initialize } = useInitialize();
const init = useCallback(async () => {
await initialize();
}, [initialize]);
useEffect(() => {
init();
}, [init]);
}
Parameters
Name | Type | Description | Default Value |
---|---|---|---|
useCache (optional) | boolean or undefined | parameter for activating SDK offline mode, if true is passed failed polls will not return error and will use cached data if such data is available | false |
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
Type | Description |
---|---|
KameleoonException.StorageWrite | Couldn't update storage data |
KameleoonException.ClientConfiguration | Couldn't retrieve client configuration from Kameleoon API |
KameleoonException.MaximumRetriesReached | Maximum retries reached, request failed |
An asynchronous initialize
function, collected with useInitialize
hook, that's used 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.
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:
- TypeScript
- JavaScript
import { useEffect, useCallback } from 'react';
import { useInitialize } from '@kameleoon/react-sdk';
function MyComponent(): JSX.Element {
const { initialize } = useInitialize();
const init = useCallback(async (): Promise<void> => {
await initialize();
}, [initialize]);
useEffect(() => {
init();
}, [init]);
}
import { useEffect, useCallback } from 'react';
import { useInitialize } from '@kameleoon/react-sdk';
function MyComponent() {
const { initialize } = useInitialize();
const init = useCallback(async () => {
await initialize();
}, [initialize]);
useEffect(() => {
init();
}, [init]);
}
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
Type | Description |
---|---|
KameleoonException.StorageWrite | Couldn't update storage data |
KameleoonException.ClientConfiguration | Couldn't retrieve client configuration from Kameleoon API |
KameleoonException.MaximumRetriesReached | Maximum retries reached, request failed |
isInitialized()
The isInitialized
function, collected with the useInitialize
hook, is a small utility method that checks if the SDK initialization has completed. For example, this can be useful when dealing with a deeply nested component tree, because it allows you to quickly check the SDK readiness without having to manage a global state, or pass the initialization result using component props.
- TypeScript
- JavaScript
import { useEffect, useCallback } from 'react';
import { useInitialize, useFeatureFlag } from '@kameleoon/react-sdk';
function MyComponent(): JSX.Element {
const { initialize } = useInitialize();
const init = useCallback(async (): Promise<void> => {
await initialize();
}, [initialize]);
useEffect(() => {
init();
}, [init]);
}
function DeeplyNestedComponent(): JSX.Element {
const { isInitialized } = useInitialize();
const { getFeatureFlagVariationKey } = useFeatureFlag();
if (isInitialized()) {
const variation = getFeatureFlagVariationKey('my_feature_key');
}
}
import { useEffect, useCallback } from 'react';
import { useInitialize, useFeatureFlag } from '@kameleoon/react-sdk';
function MyComponent() {
const { initialize } = useInitialize();
const init = useCallback(async () => {
await initialize();
}, [initialize]);
useEffect(() => {
init();
}, [init]);
}
function DeeplyNestedComponent() {
const { isInitialized } = useInitialize();
const { getFeatureFlagVariationKey } = useFeatureFlag();
if (isInitialize()) {
const variation = getFeatureFlagVariationKey('my_feature_key');
}
}
Returns
A boolean
value. Returns true
if SDK was successfully initialized, otherwise returns false
.
createClient()
To get started, you need to create an entry point for React SDK by creating a Kameleoon Client at the top level of your application using the createClient()
function imported from kameleoon
package.
An instance of KameleoonClient
is created using createClient()
function.
- TypeScript
- JavaScript
import {
createClient,
Environment,
SDKConfigurationType,
} from '@kameleoon/react-sdk';
// -- Optional configuration
const configuration: Partial<SDKConfigurationType> = {
updateInterval: 60,
environment: Environment.Production,
domain: '.example.com',
};
const client = createClient({ siteCode: 'my_site_code', configuration });
import { createClient, Environment } from '@kameleoon/react-sdk';
// -- Optional configuration
const configuration = {
updateInterval: 60,
environment: Environment.Production,
domain: '.example.com',
};
const client = createClient({ siteCode: 'my_site_code', configuration });
Parameters
An object of type SDKParameters
containing:
Name | Type | Description |
---|---|---|
siteCode (required) | string | This 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) | ExternalsType | external implementation of SDK dependencies (External dependencies) |
Configuration Parameters
- SDK Version 9
- SDK Version 10
Name | Type | Description | Default Value |
---|---|---|---|
updateInterval (optional) | number | update interval in minutes for sdk configuration; minimum value is 1 minute | 60 |
environment (optional) | Environment | feature flag environment | Environment.Production |
targetingDataCleanupInterval (optional) | number | interval in minutes for cleaning up targeting data; minimum value is 1 minute | undefined (no cleanup will be performed) |
domain (optional) | string | domain that the cookie belongs to. Deprecated, use cookieDomain instead | undefined |
cookieDomain (optional) | string | domain that the cookie belongs to. | undefined |
networkDomain (optional) | string | custom 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) | number | timeout in milliseconds for all SDK network requests, if timeout is exceeded request will fail immediately | 10_000 (10 seconds) |
trackingInterval (optional) | number | Specifies the interval for tracking requests, in milliseconds. All visitors who were evaluated for any feature flag or had associated data will be included in this tracking request, which is performed once per interval. The minimum value is 100 ms and the maximum value is 1_000 ms | 1_000 (1 second) |
The domain
parameter is deprecated and will be removed in a future release. Use cookieDomain
instead.
Name | Type | Description | Default Value |
---|---|---|---|
updateInterval (optional) | number | update interval in minutes for sdk configuration; minimum value is 1 minute | 60 |
environment (optional) | Environment | feature flag environment | Environment.Production |
targetingDataCleanupInterval (optional) | number | interval in minutes for cleaning up targeting data; minimum value is 1 minute | undefined (no cleanup will be performed) |
cookieDomain (optional) | string | domain that the cookie belongs to. | undefined |
networkDomain (optional) | string | custom 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) | number | timeout in milliseconds for all SDK network requests, if timeout is exceeded request will fail immediately | 10_000 (10 seconds) |
trackingInterval (optional) | number | Specifies the interval for tracking requests, in milliseconds. All visitors who were evaluated for any feature flag or had associated data will be included in this tracking request, which is performed once per interval. The minimum value is 100 ms and the maximum value is 1_000 ms | 1_000 (1 second) |
Returns
KameleoonClient
- an instance of KameleoonClient.
Make sure not to use several client instances in one application as it is not fully supported yet and may overwrite the local storage configuration and cause unintended behavior (bugs).
Feature flags and variations
This section provides the methods you use to retrieve and manage the feature flags and variations assigned to the visitor.
getVariation()
- 📨 Sends Tracking Data to Kameleoon (depending on the
track
parameter) - 🎯 Events:
EventType.Evaluation
Method is obtained using useFeatureFlag
hook.
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.
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.
- TypeScript
- JavaScript
import { useEffect, useCallback } from 'react';
import {
useInitialize,
useFeatureFlag,
useVisitorCode,
} from '@kameleoon/react-sdk';
function MyComponent(): JSX.Element {
const { initialize } = useInitialize();
const { getVariation } = useFeatureFlag();
const { getVisitorCode } = useVisitorCode();
const init = useCallback(async (): Promise<void> => {
await initialize();
// -- Get visitor code using `getVisitorCode` function
const visitorCode = getVisitorCode();
// -- Get variation with tracking
const variation = getVariation({
visitorCode,
featureKey: 'my_feature_key',
});
// -- Get variation without tracking
const variation = 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,
// }
// },
// }
}, [initialize, visitorCode, getVariation, getVisitorCode]);
useEffect(() => {
init();
}, [init]);
}
import { useEffect, useCallback } from 'react';
import {
useInitialize,
useFeatureFlag,
useVisitorCode,
} from '@kameleoon/react-sdk';
function MyComponent() {
const { initialize } = useInitialize();
const { getVariation } = useFeatureFlag();
const { getVisitorCode } = useVisitorCode();
const init = useCallback(async () => {
await initialize();
// -- Get visitor code using `getVisitorCode` function
const visitorCode = getVisitorCode();
// -- Get variation with tracking
const variation = getVariation({
visitorCode,
featureKey: 'my_feature_key',
});
// -- Get variation without tracking
const variation = 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,
// }
// },
// }
}, [initialize, visitorCode, getVariation, getVisitorCode]);
useEffect(() => {
init();
}, [init]);
}
Parameters
An object of type GetVariationParamsType
with the following properties:
Name | Type | Description | Default |
---|---|---|---|
visitorCode (required) | string | Unique identifier of the user. | |
featureKey (required) | string | Key of the feature you want to expose to a user. | |
track (optional) | boolean | An optional parameter to enable or disable tracking of the feature evaluation. | true |
Return value
Type | Description |
---|---|
VariationType | An assigned variation to a given visitor for a specific feature flag. |
Exceptions thrown
Type | Description |
---|---|
KameleoonException.Initialization | Method was executed before the kameleoonClient completed it's initialize call. |
KameleoonException.VisitorCodeEmpty | The visitor code is empty. |
KameleoonException.VisitorCodeMaxLength | The visitor code exceeded the maximum length (255 characters). |
KameleoonException.FeatureFlagConfigurationNotFound | Exception 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.FeatureFlagEnvironmentDisabled | Exception 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
Method is obtained using useFeatureFlag
hook.
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 totrue
, the methodgetVariations()
will return feature flags variations provided the user is not bucketed with theoff
variation. - The
track
parameter controls whether or not the method will track the variation assignments. By default, it is set totrue
. If set tofalse
, 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.
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.
- TypeScript
- JavaScript
import { useEffect, useCallback } from 'react';
import {
useInitialize,
useFeatureFlag,
useVisitorCode,
} from '@kameleoon/react-sdk';
function MyComponent(): JSX.Element {
const { initialize } = useInitialize();
const { getVariations } = useFeatureFlag();
const { getVisitorCode } = useVisitorCode();
const init = useCallback(async (): Promise<void> => {
await initialize();
// -- Get visitor code using `getVisitorCode` function
const visitorCode = getVisitorCode();
// -- Get all feature flag variations with tracking
const variations = getVariations({
visitorCode,
});
// -- Get active feature flag variations with tracking
const variations = getVariations({
visitorCode,
onlyActive: true,
});
// -- Get active feature flag variations without tracking
const variations = 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,
// }
// },
// }
// }
}, [initialize, visitorCode, getVariations, getVisitorCode]);
useEffect(() => {
init();
}, [init]);
}
import { useEffect, useCallback } from 'react';
import {
useInitialize,
useFeatureFlag,
useVisitorCode,
} from '@kameleoon/react-sdk';
function MyComponent() {
const { initialize } = useInitialize();
const { getVariations } = useFeatureFlag();
const { getVisitorCode } = useVisitorCode();
const init = useCallback(async (): Promise<void> => {
await initialize();
// -- Get visitor code using `getVisitorCode` function
const visitorCode = getVisitorCode();
// -- Get all feature flag variations with tracking
const variations = getVariations({
visitorCode,
});
// -- Get active feature flag variations with tracking
const variations = getVariations({
visitorCode,
onlyActive: true,
});
// -- Get active feature flag variations without tracking
const variations = 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,
// }
// },
// }
// }
}, [initialize, visitorCode, getVariations, getVisitorCode]);
useEffect(() => {
init();
}, [init]);
}
Parameters
An object of type GetVariationsParamsType
with the following properties:
Name | Type | Description | Default |
---|---|---|---|
visitorCode (required) | string | Unique identifier of the user. | |
onlyActive (optional) | boolean | An optional parameter indicating whether to return variations for active (true ) or all (false ) feature flags. | false |
track (optional) | boolean | An optional parameter to enable or disable tracking of the feature evaluation. | true |
Return value
Type | Description |
---|---|
Map<string, VariationType> | Map that contains the assigned VariationType objects of the feature flags using the keys of the corresponding features. |
Exceptions thrown
Type | Description |
---|---|
KameleoonException.Initialization | Method was executed before the kameleoonClient completed it's initialize call. |
KameleoonException.VisitorCodeEmpty | The visitor code is empty. |
KameleoonException.VisitorCodeMaxLength | The 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()
, used with the useFeatureFlag
hook, determines whether a visitor identified by visitorCode
has the specified featureKey
active. This method checks the targeting conditions, identifies the variation for the visitor, and saves this information to storage. Additionally, the hook sends a tracking request.
There is also an overload for this method that includes a track
parameter, allowing you to disable the tracking of the feature evaluation.
Visitor must be targeted to has feature flag active
- TypeScript
- JavaScript
import { useEffect, useCallback } from 'react';
import {
useInitialize,
useData,
useFeatureFlag,
useVisitorCode,
CustomData,
} from '@kameleoon/react-sdk';
function MyComponent(): JSX.Element {
const { initialize } = useInitialize();
const { addData } = useData();
const { isFeatureFlagActive } = useFeatureFlag();
const { getVisitorCode } = useVisitorCode();
const init = useCallback(async (): Promise<void> => {
await initialize();
// -- Get visitor code using `getVisitorCode` function
const visitorCode = getVisitorCode();
const featureKey = 'my_feature_key';
// -- Add CustomData with index `0` containing visitor id to check the targeting
addData(visitorCode, new CustomData(0, 'visitor_id'));
// -- Get the status of feature flag
const isActive = isFeatureFlagActive(visitorCode, featureKey);
// -- Check if the feature flag is active for visitor without tracking
const isActive = isFeatureFlagActive({ visitorCode, featureKey: 'my_feature, track: false});
}, [initialize, visitorCode, isFeatureFlagActive, getVisitorCode]);
useEffect(() => {
init();
}, [init]);
}
import { useEffect, useCallback } from 'react';
import {
useInitialize,
useData,
useFeatureFlag,
useVisitorCode,
CustomData,
} from '@kameleoon/react-sdk';
function MyComponent() {
const { initialize } = useInitialize();
const { addData } = useData();
const { isFeatureFlagActive } = useFeatureFlag();
const { getVisitorCode } = useVisitorCode();
const init = useCallback(async () => {
await initialize();
// -- Get visitor code using `getVisitorCode` function
const visitorCode = getVisitorCode();
const featureKey = 'my_feature_key';
// -- Add CustomData with index `0` containing visitor id to check the targeting
addData(visitorCode, new CustomData(0, 'visitor_id'));
// -- Get the status of feature flag
const isActive = isFeatureFlagActive(visitorCode, featureKey);
// -- Check if the feature flag is active for visitor without tracking
const isActive = isFeatureFlagActive({ visitorCode, featureKey: 'my_feature, track: false});
}, [initialize, visitorCode, isFeatureFlagActive, getVisitorCode]);
useEffect(() => {
init();
}, [init]);
}
Parameters
There are two overloads available for this method:
- Two parameters overload:
This overload is deprecated and will be removed in the next major version. Please use the new overload with an object parameter.
Name | Type | Description |
---|---|---|
visitorCode (required) | string | unique visitor identification string, can't exceed 255 characters length |
featureKey (required) | string | a unique key for feature flag |
- Object parameter overload of type
IsFeatureFlagActiveParamsType
:
Name | Type | Description | Default |
---|---|---|---|
visitorCode (required) | string | unique visitor identification string, can't exceed 255 characters length | - |
featureKey (required) | string | a unique key for feature flag | - |
track (optional) | boolean | a boolean indicator of whether to track the feature evaluation | true |
Returns
boolean
- indicator of whether the feature flag with featureKey
is active for visitor with visitorCode
.
Throws
Type | Description |
---|---|
KameleoonException.Initialization | Method was executed before the kameleoonClient completed it's initialize call |
KameleoonException.VisitorCodeMaxLength | The visitor code exceeded the maximum length (255 characters) |
KameleoonException.VisitorCodeEmpty | The visitor code is empty |
KameleoonException.NotTargeted | Current visitor is not targeted |
KameleoonException.FeatureFlagConfigurationNotFound | No feature flag was found for the specified featureKey |
KameleoonException.DataInconsistency | Allocated variation was found but there is no feature flag with according featureKey |
getFeatureFlagVariationKey()
- 📨 Sends Tracking Data to Kameleoon
- 🎯 Events:
EventType.Evaluation
This method is deprecated and will be removed in the next major version. Please use the new method getVariation
The method getFeatureFlagVariationKey()
, which is used with the useFeatureFlag
hook, retrieves the variation key for a visitor identified by their visitorCode
. This process includes checking the targeting criteria, identifying the appropriate variation assigned to the visitor, storing this information, and sending a tracking request.
If a user has never been associated with a feature flag, the SDK will randomly return a variation key according to the rules of that feature flag. If the user is already linked to the feature flag, the SDK will identify the previously assigned variation key. If the user does not meet any of the specified rules, the SDK will return the default value defined in Kameleoon’s feature flag delivery rules. It’s important to note that the default value may not always be a variation key; it could also be a boolean value or another data type, depending on how the feature flag is configured.
- TypeScript
- JavaScript
import { useEffect, useCallback } from 'react';
import {
useInitialize,
useFeatureFlag,
useVisitorCode,
} from '@kameleoon/react-sdk';
function MyComponent(): JSX.Element {
const { initialize } = useInitialize();
const { getFeatureFlagVariationKey } = useFeatureFlag();
const { getVisitorCode } = useVisitorCode();
const init = useCallback(async (): Promise<void> => {
await initialize();
// -- Get visitor code using `getVisitorCode` function
const visitorCode = getVisitorCode();
const featureKey = 'my_feature_key';
// -- Get the variationKey for the visitor under `visitorCode` in the found feature flag
const variationKey = getFeatureFlagVariationKey(visitorCode, featureKey);
}, [initialize, visitorCode, getFeatureFlagVariationKey, getVisitorCode]);
useEffect(() => {
init();
}, [init]);
}
import { useEffect, useCallback } from 'react';
import {
useInitialize,
useFeatureFlag,
useVisitorCode,
} from '@kameleoon/react-sdk';
function MyComponent() {
const { initialize } = useInitialize();
const { getFeatureFlagVariationKey } = useFeatureFlag();
const { getVisitorCode } = useVisitorCode();
const init = useCallback(async () => {
await initialize();
// -- Get visitor code using `getVisitorCode` function
const visitorCode = getVisitorCode();
const featureKey = 'my_feature_key';
// -- Get the variationKey for the visitor under `visitorCode` in the found feature flag
const variationKey = getFeatureFlagVariationKey(visitorCode, featureKey);
}, [initialize, visitorCode, getFeatureFlagVariationKey, getVisitorCode]);
useEffect(() => {
init();
}, [init]);
}
Parameters
Name | Type | Description |
---|---|---|
visitorCode (required) | string | unique visitor identification string, can't exceed 255 characters length |
featureKey (required) | string | a unique key for feature flag |
Returns
string
- a string containing variable key for the allocated feature flag variation for the provided visitor.
Throws
Type | Description |
---|---|
KameleoonException.Initialization | Method was executed before initialize was done for kameleoonClient |
KameleoonException.VisitorCodeMaxLength | The visitor code exceeded the maximum length (255 characters) |
KameleoonException.VisitorCodeEmpty | The visitor code is empty |
KameleoonException.NotTargeted | Current visitor is not targeted |
KameleoonException.FeatureFlagConfigurationNotFound | No feature flag was found for the specified featureKey |
KameleoonException.FeatureFlagEnvironmentDisabled | Feature flag is disabled for the current environment |
getFeatureFlags()
🚫 Doesn't send Tracking Data to Kameleoon
This method is deprecated and will be removed in the next major version. Please use the new method getVariations
Method getFeatureFlags
collected with useFeatureFlag
hook returns a list of feature flags stored in the client configuration.
- TypeScript
- JavaScript
import { useEffect, useCallback } from 'react';
import { useInitialize, useFeatureFlag } from '@kameleoon/react-sdk';
function MyComponent(): JSX.Element {
const { initialize } = useInitialize();
const { getFeatureFlags } = useFeatureFlag();
const init = useCallback(async (): Promise<void> => {
await initialize();
// -- Get list of all feature flags
const featureFlags = getFeatureFlags();
}, [initialize, getFeatureFlags]);
useEffect(() => {
init();
}, [init]);
}
import { useEffect, useCallback } from 'react';
import { useInitialize, useFeatureFlag } from '@kameleoon/react-sdk';
function MyComponent() {
const { initialize } = useInitialize();
const { getFeatureFlags } = useFeatureFlag();
const init = useCallback(async () => {
await initialize();
// -- Get list of all feature flags
const featureFlags = getFeatureFlags();
}, [initialize, getFeatureFlags]);
useEffect(() => {
init();
}, [init]);
}
Returns
FeatureFlagType[]
- list of feature flags, each feature flag item contains id
and key
.
Throws
Type | Description |
---|---|
KameleoonException.Initialization | Method was executed before the kameleoonClient completed it's initialize call |
getVisitorFeatureFlags()
- 🚫 Doesn't send Tracking Data to Kameleoon
- 🎯 Events:
EventType.Evaluation
(for each feature flag)
This method is deprecated and will be removed in the next major version. Please use the new method getVariations
The getVisitorFeatureFlags
method, utilized with the useFeatureFlag
hook, returns a list of active feature flags that target the visitor associated with the visitorCode
(the visitor must have one of the allocated variations).
This method only collects the feature flags that are currently active for the visitor. As a result, it does not include any feature flags for which the visitor is assigned to the “off” variation (default or control). If you need to retrieve all of the visitor’s feature flags, use getFeatureFlags
instead.
For example:
// -- `getVisitorFeatureFlags` doesn't trigger feature experiment
// it only returns feature flags, where visitor didn't get `off` variation
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
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
getFeatureFlags('my_visitor').forEach(({ key }) => {
getFeatureFlagVariationKey('my_visitor', key);
});
- TypeScript
- JavaScript
import { useEffect, useCallback } from 'react';
import {
useInitialize,
useFeatureFlag,
useVisitorCode,
} from '@kameleoon/react-sdk';
function MyComponent(): JSX.Element {
const { initialize } = useInitialize();
const { getVisitorCode } = useVisitorCode();
const { getVisitorFeatureFlags } = useFeatureFlag();
const init = useCallback(async (): Promise<void> => {
await initialize();
// -- Get visitor code
const visitorCode = getVisitorCode();
// -- Get active feature flags for visitor
const featureFlags = getVisitorFeatureFlags(visitorCode);
}, [initialize, visitorCode, getVisitorFeatureFlags, getVisitorCode]);
useEffect(() => {
init();
}, [init]);
}
import { useEffect, useCallback } from 'react';
import {
useInitialize,
useFeatureFlag,
useVisitorCode,
} from '@kameleoon/react-sdk';
function MyComponent() {
const { initialize } = useInitialize();
const { getVisitorCode } = useVisitorCode();
const { getVisitorFeatureFlags } = useFeatureFlag();
const init = useCallback(async () => {
await initialize();
// -- Get visitor code
const visitorCode = getVisitorCode();
// -- Get active feature flags for visitor
const featureFlags = getVisitorFeatureFlags(visitorCode);
}, [initialize, visitorCode, getVisitorFeatureFlags, getVisitorCode]);
useEffect(() => {
init();
}, [init]);
}
Parameters
Name | Type | Description |
---|---|---|
visitorCode (required) | string | unique visitor identification string, can't exceed 255 characters length |
Returns
FeatureFlagType[]
- list of feature flags, each feature flag item contains id
and key
.
Throws
Type | Description |
---|---|
KameleoonException.Initialization | Method was executed before the kameleoonClient completed it's initialize call |
KameleoonException.VisitorCodeMaxLength | The visitor code exceeded the maximum length (255 characters) |
KameleoonException.VisitorCodeEmpty | The visitor code is empty |
KameleoonException.NotTargeted | Current visitor is not targeted |
KameleoonException.StorageRead | Error while reading storage data |
getActiveFeatureFlags()
- 🚫 Doesn't send Tracking Data to Kameleoon
- 🎯 Events:
EventType.Evaluation
(for each feature flag)
This method is deprecated and will be removed in the next major version. Please use the new method getVariations
Method getActiveFeatureFlags
, collected with the useFeatureFlag
hook, returns a Map
, where key is feature key and value is detailed information about the visitor's variation and it's variables
- TypeScript
- JavaScript
import { useEffect, useCallback } from 'react';
import {
useInitialize,
useFeatureFlag,
useVisitorCode,
} from '@kameleoon/react-sdk';
function MyComponent(): JSX.Element {
const { initialize } = useInitialize();
const { getVisitorCode } = useVisitorCode();
const { getActiveFeatureFlags } = useFeatureFlag();
const init = useCallback(async (): Promise<void> => {
await initialize();
// -- Get visitor code
const visitorCode = getVisitorCode();
// -- Get active feature flags for visitor
// with detailed variation and variables data
const activeFeatures = 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: []
// }
// }
}, [initialize, visitorCode, getVisitorFeatureFlags, getVisitorCode]);
useEffect(() => {
init();
}, [init]);
}
init();
import { useEffect, useCallback } from 'react';
import {
useInitialize,
useFeatureFlag,
useVisitorCode,
} from '@kameleoon/react-sdk';
function MyComponent(): JSX.Element {
const { initialize } = useInitialize();
const { getVisitorCode } = useVisitorCode();
const { getActiveFeatureFlags } = useFeatureFlag();
const init = useCallback(async (): Promise<void> => {
await initialize();
// -- Get visitor code
const visitorCode = getVisitorCode();
// -- Get active feature flags for visitor
// with detailed variation and variables data
const activeFeatures = 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: []
// }
// }
}, [initialize, visitorCode, getVisitorFeatureFlags, getVisitorCode]);
useEffect(() => {
init();
}, [init]);
}
init();
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 over, use getFeatureFlags
instead.
See the getVisitorFeatureFlags CAUTION section method for more details.
Parameters
Name | Type | Description |
---|---|---|
visitorCode (required) | string | unique visitor identification string, can't exceed 255 characters length |
Returns
Map<string, KameleoonVariationType>
- a map of feature flags, where key is feature key and value is detailed information about the visitor's variation and it's variables
Throws
Type | Description |
---|---|
KameleoonException.Initialization | Method was executed before the kameleoonClient completed it's initialize call |
KameleoonException.VisitorCodeMaxLength | The visitor code exceeded the maximum length of 255 characters |
KameleoonException.VisitorCodeEmpty | The visitor code is empty |
KameleoonException.StorageRead | Error while reading storage data |
KameleoonException.NumberParse | Couldn't parse Number value |
KameleoonException.JSONParse | Couldn't parse JSON value |
Variables
This section provides the methods you use to retrieve and manage the variables assigned to the visitor.
getFeatureFlagVariable()
- 📨 Sends Tracking Data to Kameleoon
- 🎯 Events:
EventType.Evaluation
This method is deprecated and will be removed in the next major version. Please use the new method getVariation
Method getFeatureFlagVariable
collected with useFeatureFlag
hook returns a variable for the visitor under visitorCode
in the found feature flag, this includes targeting check, finding the according variation exposed to the visitor and saving it to storage along with sending tracking request.
- TypeScript
- JavaScript
import { useEffect, useCallback } from 'react';
import {
useInitialize,
useVisitorCode,
useFeatureFlag,
VariableType,
JSONType,
} from '@kameleoon/react-sdk';
function MyComponent(): JSX.Element {
const { initialize } = useInitialize();
const { getVisitorCode } = useVisitorCode();
const { getFeatureFlagVariable } = useFeatureFlag();
const init = useCallback(async (): Promise<void> => {
await initialize();
// -- Get visitor code
const visitorCode = getVisitorCode();
// -- Get feature variable
const result = 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:
case VariableType.JS:
case VariableType.CSS:
const myStr: string = result.value;
break;
default:
break;
}
}, [initialize, getFeatureFlagVariable, visitorCode, getVisitorCode]);
useEffect(() => {
init();
}, [init]);
}
import { useEffect, useCallback } from 'react';
import {
useInitialize,
useVisitorCode,
useFeatureFlag,
} from '@kameleoon/react-sdk';
function MyComponent() {
const { initialize } = useInitialize();
const { getVisitorCode } = useVisitorCode();
const { getFeatureFlagVariable } = useFeatureFlag();
const init = useCallback(async () => {
await initialize();
// -- Get visitor code
const visitorCode = getVisitorCode();
// -- Get feature variable
const variableResult = getFeatureFlagVariable({
visitorCode,
featureKey: 'my_feature_key',
variableKey: 'my_variable_key',
});
const { type, value } = variableResult;
}, [initialize, getFeatureFlagVariable, visitorCode, getVisitorCode]);
useEffect(() => {
init();
}, [init]);
}
Parameters
Parameters object of type GetFeatureFlagVariableParamsType
containing the following fields:
Name | Type | Description |
---|---|---|
visitorCode (required) | string | unique visitor identification string, can't exceed 255 characters length |
featureKey (required) | string | a unique key for feature flag |
variableKey (required) | string | key of the variable to be found for a feature flag with the specified 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
Type | Description |
---|---|
KameleoonException.Initialization | Method was executed before initialize was done for kameleoonClient |
KameleoonException.VisitorCodeMaxLength | The visitor code exceeded the maximum length (255 characters) |
KameleoonException.VisitorCodeEmpty | The visitor code is empty |
KameleoonException.NotTargeted | Current visitor is not targeted |
KameleoonException.FeatureFlagConfigurationNotFound | No feature flag was found for the specified featureKey |
KameleoonException.FeatureFlagVariableNotFound | No feature variable was found for the specified visitorCode and variableKey |
KameleoonException.FeatureFlagEnvironmentDisabled | Feature flag is disabled for the current environment |
KameleoonException.JSONParse | Couldn't parse JSON value |
KameleoonException.NumberParse | Couldn't parse Number value |
getFeatureFlagVariables()
- 📨 Sends Tracking Data to Kameleoon
- 🎯 Events:
EventType.Evaluation
(for each feature flag)
This method is deprecated and will be removed in the next major version. Please use the new method getVariations
Method getFeatureFlagVariables
collected with useFeatureFlag
hook returns a list of variables for the visitor under visitorCode
in the found feature flag, this includes targeting check, finding the according variation exposed to the visitor and saving it to storage along with sending tracking request.
- TypeScript
- JavaScript
import { useEffect, useCallback } from 'react';
import {
useInitialize,
useFeatureFlag,
useVisitorCode,
} from '@kameleoon/react-sdk';
function MyComponent(): JSX.Element {
const { initialize } = useInitialize();
const { getVisitorCode } = useVisitorCode();
const { getFeatureFlagVariables } = useFeatureFlag();
const init = useCallback(async (): Promise<void> => {
await initialize();
// -- Get visitor code
const visitorCode = getVisitorCode();
// -- Get a list of variables for the visitor under `visitorCode` in the found feature flag
const variables = getFeatureFlagVariables(visitorCode, 'my_feature_key');
}, [initialize, getFeatureFlagVariables, getVisitorCode]);
useEffect(() => {
init();
}, [init]);
}
import { useEffect, useCallback } from 'react';
import {
useInitialize,
useFeatureFlag,
useVisitorCode,
} from '@kameleoon/react-sdk';
function MyComponent() {
const { initialize } = useInitialize();
const { getVisitorCode } = useVisitorCode();
const { getFeatureFlagVariables } = useFeatureFlag();
const init = useCallback(async () => {
await initialize();
// -- Get visitor code
const visitorCode = getVisitorCode('www.example.com');
// -- Get a list of variables for the visitor under `visitorCode` in the found feature flag
const variables = getFeatureFlagVariables(visitorCode, 'my_feature_key');
}, [initialize, getFeatureFlagVariables, getVisitorCode]);
useEffect(() => {
init();
}, [init]);
}
Parameters
Name | Type | Description |
---|---|---|
visitorCode (required) | string | unique visitor identification string, can't exceed 255 characters length |
featureKey (required) | string | a 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
Type | Description |
---|---|
KameleoonException.Initialization | Method was executed before the kameleoonClient completed it's initialize call |
KameleoonException.VisitorCodeMaxLength | The visitor code exceeded the maximum length (255 characters) |
KameleoonException.VisitorCodeEmpty | The visitor code is empty |
KameleoonException.NotTargeted | Current visitor is not targeted |
KameleoonException.FeatureFlagConfigurationNotFound | No feature flag was found for the specified featureKey |
KameleoonException.FeatureFlagVariationNotFound | No feature variation was found for the specified visitorCode and variableKey |
KameleoonException.FeatureFlagEnvironmentDisabled | Feature flag is disabled for the current environment |
KameleoonException.JSONParse | Couldn't parse JSON value |
KameleoonException.NumberParse | Couldn't parse Number value |
Visitor data
This section provides the methods you use to manage visitor data.
getVisitorCode()
getVisitorCode
method collected from useVisitorCode
hook obtains a visitor code from the browser cookie. If the visitor code doesn't exist yet, the function generates a random visitor code (or uses the defaultVisitorCode
value if you provided one) and sets the new visitor code in a cookie.
- TypeScript
- JavaScript
import { useEffect, useCallback } from 'react';
import { useInitialize, useVisitorCode } from '@kameleoon/react-sdk';
function MyComponent(): JSX.Element {
const { initialize } = useInitialize();
const { getVisitorCode } = useVisitorCode();
const init = useCallback(async (): Promise<void> => {
await initialize();
// -- Get visitor code
const visitorCode = getVisitorCode();
// -- Pass default visitorCode, save and retrieve it
const visitorCode = getVisitorCode('default_visitor_code');
}, [initialize, getVisitorCode]);
useEffect(() => {
init();
}, [init]);
}
import { useEffect, useCallback } from 'react';
import {