Web Product Experiences
Learn how to set up Remote Config for your Web application.
Overview
CleverTap's Remote Config feature allows you to modify your website's functionality and appearance without pushing updates through the App Store or Google Play using variables. The CleverTap Web SDK provides the ability to create variables on the client side that can be updated with new values from the server. Additionally, variables can be utilized in A/B tests to test features for a percentage of users selectively.
To define variables, developers can use the platform-specific call within CleverTap Web SDK. After defining the variables in the code, you must sync the variables to the dashboard through the provided SDK method.
Prerequisite
To use the Remote Config feature, ensure that you are using Web SDK v1.7.0 or higher.
Supported Variable Types
Currently, CleverTap Web SDK supports the following variable types:
- Number
- String
- Boolean
Update to CleverTap Initialize Method
The syncVariables()
method requires the account token. This field is included in clevertap.init()
method. Henceforth, tokens are required to maintain parity, as they are mandatory in mobile platforms.
Using CleverTap as a Script
Add the account token to the CleverTap object.
<script type="text/javascript">
var clevertap = {event:[], profile:[], account:[], onUserLogin:[], notifications:[], privacy:[], region: REGION, token: TOKEN};
//replace TOKEN with Account Token value from your Dashboard -> Settings page
//replace the CLEVERTAP_ACCOUNT_ID with the actual ACCOUNT ID value from your Dashboard > Settings page.
clevertap.account.push({"id": "CLEVERTAP_ACCOUNT_ID"});
clevertap.privacy.push({optOut: false}); //set the flag to true, if the user of the device opts out of sharing their data
clevertap.privacy.push({useIP: false}); //set the flag to true, if the user agrees to share their IP data
(function () {
var wzrk = document.createElement('script');
wzrk.type = 'text/javascript';
wzrk.async = true;
wzrk.src = 'https://d2r1yp2w7bby2u.cloudfront.net/js/clevertap.min.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wzrk, s);
})();
</script>
Using CleverTap as NPM Package
The account token is added as the fourth parameter in the clevertap.init()
method.
clevertap.init('ACCOUNT_ID', 'REGION', 'TARGET_DOMAIN', 'TOKEN')
Define Variables
The Web SDK exposes a method defineVariable
to set the default value of the variables.
const var1 = clevertap.defineVariable("var_string", "str")
const var2 = clevertap.defineVariable("var_boolean", true)
Set Up Callback URLs
CleverTap SDK provides several callbacks for the developer to receive feedback from the SDK. The following are a few instances where developers can set up callbacks:
- Status of Fetch Variables request
- Change of individual variable value
- Initialize all variables or change variables
Status of Fetch Variables Request
The fetchVariables()
method provides feedback to ensure the variables were successfully retrieved from the server.
clevertap.fetchVariables(
// Success callback function
() => { console.log('Fetch successful'); },
);
Retrieving Variables
The retrieval of variables is limited to only one callback, meaning that any subsequent calls to the method overrides the existing callback. As a result, only the most recent callback is triggered when the variables are retrieved.
Change in Individual Variable Value
The individual callback is registered per variable. It is called on the app start or whenever the variable value changes.
const valueChangedCallback = (changedVariable) => {
console.log(`Value changed for variable '${changedVariable.name}'`);
// Add your callback logic here
};
// Add the callback to the variable using addValueChangedCallback method
var1.addValueChangedCallback(valueChangedCallback);
Initialize All Variables or Change All Variable Values
The global callback registered on the CleverTap instance is called when variables are initialized with a value or changed with a new server value.
cleverTap.addVariablesChangedCallback(() => {
// implement
});
cleverTap.addOneTimeVariablesChangedCallback(() => {
// implement
});
Sync Defined Variables
After defining your variables in the code, you must send/sync variables to the server. To sync variables:
- The log level must be set to 4, and,
- A particular CleverTap user profile must be marked as a test profile from the CleverTap dashboard. To know more, refer to Mark a User Profile as Test Profile.
After marking the profile as a test profile, you must sync the app variables in debug mode.
clevertap.syncVariables()
or
clevertap.syncVariables(
// Success callback function
() => { console.log('Sync successful'); },
// Failure callback function
() => { console.log('Sync failed'); }
);
Key Points
In case, if another user profile has already created a draft in the dashboard, syncing variables will fail to prevent overriding their changes. Before syncing variables again, either publish or dismiss the existing draft. However, if you have created a draft previously, you can override it using the sync method to optimize the integration experience.
Fetch Variables During a Session
During a session, you can fetch the updated values for your CleverTap variables from the server. The fetched data goes into local storage under the WZRK_PE key.
The fetchVariable()
method is triggered once when the page count is 1.
clevertap.fetchVariables()
or
clevertap.fetchVariables(
// Success callback function
() => { console.log('Fetch successful'); },
);
Accessing the Variable Value
To access the value from Var
instance, you can use several methods on the Var
instance as shown in the following code:
variable.getdefaultValue(); // returns default value
variable.getValue(); // returns current value
Updated 3 months ago