Configure Conditional Delivery in Firebase

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.

Conditional delivery in Firebase Remote Config allows us to define specific conditions under which different parameter values are delivered to users. It means we can customize the user experience based on various factors such as user properties, app version, country, language, and more. By using conditional delivery we can:

• Personalize User Experience: Deliver tailored content and features to different user segments.
• Optimize App Performance: Roll out new features gradually and test their impact on specific user groups.
• Increase Engagement: Target specific user groups with relevant promotions, messages, or features.

Before diving into conditional delivery, we must ensure that we have set up Firebase Remote Config in your project. Here are the initial setup steps:

Step 1: Create a Firebase Project

• Navigate to Firebase Console: Go to the Firebase Console.
• Add a New Project: Click on “Add project,” enter your project name, and follow the setup instructions.

Step 2: Register Your App with Firebase

• Register Your App: Click on the appropriate platform icon (Web, iOS, Android) and follow the instructions to register your app.
• Download Configuration File: Firebase will provide you with a configuration file containing your project’s credentials. Include this file in your app.

Step 3: Install Firebase SDK

For a web project, we can install the Firebase SDK via npm:

npm install firebase

Step 4: Initialize Firebase Remote Config

In our app code, initialize Firebase Remote Config with your project’s credentials:

import { initializeApp } from "firebase/app";
import { getRemoteConfig } from "firebase/remote-config";
import firebaseConfig from './firebase-config.js'; // Your Firebase config file

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const remoteConfig = getRemoteConfig(app);

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

Example 1: Personalized Welcome Message

Let’s create a condition to deliver a personalized welcome message to users based on their language preference.

Create Condition: In the Firebase console, create a condition for users who prefer Spanish.

• Condition Name: Spanish Users
• Condition: Language equals Spanish

Assign Parameter Values:

• Parameter: welcome_message
• Default Value: Welcome to our app!
• Condition (Spanish Users): ¡Bienvenido a nuestra aplicación!

Example 2: Feature Toggle Based on App Version

Suppose we want to roll out a new feature only to users who have updated to the latest version of your app.

Create Condition: In the Firebase console, create a condition for users with the latest app version.

• Condition Name: Latest App Version
• Condition: App version equals 2.0.0

Assign Parameter Values:

• Parameter: feature_enabled
• Default Value: false
• Condition (Latest App Version): true

Example 3: Promotional Offer for a Specific Country

we want to offer a discount to users in Canada.

Create Condition: In the Firebase console, create a condition for users in Canada.

• Condition Name: Users in Canada
• Condition: Country equals Canada

Assign Parameter Values:

• Parameter: promo_message
• Default Value: Enjoy our app!
• Condition (Users in Canada): Get 20% off!

Fetch and apply the remote config parameters in your app, and ensure the conditions are working correctly:

async function fetchConfig() {
  try {
    await remoteConfig.fetchAndActivate();
    console.log("Remote config fetched successfully!");
    
    // Fetch and apply configurations
    const welcomeMessage = remoteConfig.getString('welcome_message');
    const isFeatureEnabled = remoteConfig.getBoolean('feature_enabled');
    const promoMessage = remoteConfig.getString('promo_message');
    
    // Update UI elements
    document.getElementById('welcome-message').innerText = welcomeMessage;
    document.getElementById('feature-button').disabled = !isFeatureEnabled;
    document.getElementById('promo-message').innerText = promoMessage;
  } catch (error) {
    console.error("Error fetching remote config:", error);
  }
}

fetchConfig();

Firebase provides tools to monitor the performance of your configurations and analyze the results:

• Firebase Console: Check the Remote Config section in the Firebase console to see how your conditions are performing.
• Analytics Integration: Use Firebase Analytics to track the impact of different configurations on user behavior and engagement.

Conditional delivery with Firebase Remote Config empowers you to deliver personalized and optimized experiences to different segments of your user base. By leveraging the power of Firebase, you can dynamically adjust app configurations, conduct A/B testing, and roll out features gradually with minimal risk.

In this guide, we’ve covered the essentials of setting up and configuring conditional delivery in Firebase, complete with practical examples and code snippets. By following these steps, you can enhance user engagement, optimize app performance, and make data-driven decisions to continuously improve your app.