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