Customize a welcome back screen

Personalized content can delight your users and provide an experience from the very first interaction with your app based on their preferences, usage history, and locale. Firebase allows you to define audiences based on Google Analytics for Firebase metrics and customize your application with Firebase Remote Config directly from the Firebase console.

Using these two features together, you can customize your app's welcome screen for a repeat user based on their preferences or activity in your app.

This guide walks you through the process to create your own personalized "welcome back" screen on Android.

To get started, you'll need an Android app connected to a Firebase project. If you don't already have one, see Get started for Android to connect your app.

Implementation overview

Implementing your app's personalized welcome screen consists of 3 broad steps:

  1. Set up Remote Config to hold parameters for the elements to be personalized. For example, you might store the welcome screen message as a parameter. This way you can update the message without republishing your app.
  2. Set up Analytics to define audiences and/or user properties for Remote Config to target your users. Both features can be used for targeting; however, there are important differences between them. The relative advantages of each are discussed later in this guide.
  3. Configure Remote Config conditions to customize your parameter based on the Analytics audiences or user properties you set up.

Set up parameters in Remote Config

Once you identify the elements of your app you want to customize, use Remote Config to store parameters. We'll explore personalizing the welcome screen message in the rest of this guide.

What to do in the Firebase console

  1. Go to the Remote Config parameter page in the Firebase console. If you've never configured Remote Config in your app, click Add Your First Parameter.
  2. Fill out a parameter key and default value. For example, welcome_message and Welcome to this sample app.

    Remote Config parameter configuration.

  3. Click Publish Changes.

What to do in the Android app

  1. Add code to read and display the parameter you just added to your app in the Firebase console. For example:

    final FirebaseRemoteConfig config = FirebaseRemoteConfig.getInstance();
    config.getInstance.fetch(CACHE_EXPIRATION_MS)
      .addOnCompleteListener(this, new OnCompleteListener<Void>() {
        @Override
        public void onComplete(@NonNull Task<Void> task) {
            if (task.isSuccessful()) {
                config.activateFetched();
    
                String welcomeMessage = config.getString("welcome_message");
            }
        }
    });
    

    You can also follow the steps in Use Firebase Remote Config on Android to read and display the parameter that you created in the console. If you get stuck, the Android walkthrough guides you through the working sample app implementation.

  2. Turn on developer mode to see config changes immediately while testing.

Test that it works

  1. Open your app and make sure that it shows the current value of the parameter in the Remote Config UI.
  2. Change the value in the console and click Publish Changes
  3. Restart your app. The new parameter value should be shown.

Set up Analytics audiences or user properties

In this step you'll use Analytics to define the users who should see personalized content. In this walkthrough, we'll use a user property to do this but you could also define an Audience. These approaches are similar, but you should be aware that once a user is added to an Audience, they cannot leave it or be removed. If the attribute you want to use for targeting could change, use a user property instead.

What to do in the Firebase console

  1. Go to the Analytics user property page in the Firebase console. Click New User Property.
  2. Give the user property a name and description. For example, if you were customizing an app based on whether a user prefers dogs or cats, you might name it animal_preference.

    Analytics user property configuration.

  3. Click Create.

What to do in the Android app

  1. Follow the steps in Set User Properties to learn to set your user property in your application. For example, you might ask a user if they prefer cats or dogs and set a string value accordingly. You can skip over the steps to register your property in the console as you've already done that in the previous section.
  2. Follow the steps in Debugging Events to enable debug mode for your app.

Test that it works

  1. Open your app and navigate to where your user property is set.
  2. Open the Analytics DebugView page in the Firebase console.
  3. Look to see if any user properties have been set (there might be a few minutes of delay before anything shows up).

Configure Remote Config conditions

Now that your app has parameters that can be configured, and user properties (or audiences) to use as variables, you can create conditions to personalize the values of your parameters.

What to do in the Firebase console

  1. Go to Remote Config in the Firebase console.
  2. Click your parameter to edit it.
  3. Click Add value for condition.
  4. Select Define new condition.
  5. Give your condition a name. For example, "Prefers cats" to reflect the user preference from earlier.
  6. Under Applies if, select User property (or User in audience if you created an Audience in Analytics), and select your parameter, and define a conditional relationship with your parameter values.

    A new Remote Config condition.

  7. Click Create condition.

  8. Enter a value to reflect the new condition. For example, the welcome message for "Prefers cats" could be "Meow!".
  9. Click Update to save your changes.
  10. Click Publish Changes to enable the new conditions and values in your app.

Test that it works

  1. Open your app and navigate to where your user property is set.
  2. Open the Analytics DebugView page in the Firebase console.
  3. Look to see if any user properties have been set (there might be a few minutes of delay before anything shows up).
  4. Restart your app and verify that your personalized elements have been set.

Send feedback about...

Need help? Visit our support page.