Configuring Conditional Delivery

Once Firebase Remote Config is set up, we can start configuring conditional delivery. Let’s go through the steps to define and apply conditions.

Step 1: Define Default Parameters

Set default parameter values that will be used when no conditions are met:

remoteConfig.defaultConfig = {
  welcome_message: "Welcome to our app!",
  feature_enabled: false,
  button_color: "#FFFFFF"
};

Step 2: Create Conditions in Firebase Console

• Navigate to Remote Config: In the Firebase console, go to Remote Config.
• Create New Condition: Click on “Add new condition” and define the condition based on user properties, app version, country, language, etc.

Example: Creating a condition for users in the United States

• Condition Name: Users in the US
• Condition: Country equals United States

Step 3: Assign Parameter Values to Conditions

Assign Values: For each parameter, assign different values based on the conditions you’ve created.

Example: Delivering a special welcome message to users in the US

• Parameter: welcome_message
• Default Value: Welcome to our app!
• Condition (Users in the US): Welcome to our app, dear user from the US!

Step 4: Fetch and Apply Remote Config Parameters

Fetch the remote configuration parameters in your app and apply them based on the conditions:

async function fetchConfig() {
  try {
    await remoteConfig.fetchAndActivate();
    console.log("Remote config fetched successfully!");
    const welcomeMessage = remoteConfig.getString('welcome_message');
    const isFeatureEnabled = remoteConfig.getBoolean('feature_enabled');
    const buttonColor = remoteConfig.getString('button_color');
    
    // Update UI based on remote configurations
    document.getElementById('welcome-message').innerText = welcomeMessage;
    document.getElementById('feature-button').disabled = !isFeatureEnabled;
    document.getElementById('feature-button').style.backgroundColor = buttonColor;
  } catch (error) {
    console.error("Error fetching remote config:", error);
  }
}

// Call fetchConfig on app startup
fetchConfig();

Firebase offers a powerful tools for app development, one of which is the ability to configure conditional delivery through Firebase Remote Config. This feature allows us to deliver different configurations and content to different segments of our user base and provide a more personalized user experience.

In this article, we’ll explore the concept of conditional delivery, its benefits and how to set it up in Firebase with practical examples and outputs.