0

Firebase Remote Config on websites

Along with Analytics, Google have released a few JS APIs that we can now use with the websites. Remote Config is one that’s probably easiest to start with.

Remote Config allows you to run functions on your website using Firebase console while targeting users based on device, geo and behavioural data. Possible use cases:

  • change the look of your website for users in a particular geographical location
  • display a promo banner to users who have performed some particular action on your website, like adding to cart
  • roll out a layout change to random 20% users to see how they react to it (quite like in an A/B test)

What it takes to have it up and running:

forebase for web remote config process

But first…

In your Firebase project, go to:

Settings > Project Settings > General > (web app) > Firebase SDK Snippet

and copy the whole snippet from the CDN section web app config snippet. This is what you need to get Firebase set up on your website. Add it to the page code before referencing the firebase object.

Also, in order to be able to target Audiences, you will need Firebase Analytics initialised.

1. Add Remote Config to your website

Add Remote Config library, create the remoteConfig object and set the fetch interval:

<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-remote-config.js"></script>

<script>
const remoteConfig = firebase.remoteConfig();

remoteConfig.settings = {
  minimumFetchIntervalMillis: 3600000
};
</script>

2. Set default parameter values

These are the parameters that we can change with Remote Config. If you don’t want to set them up on the website, you can still do that with Remote Config. In my case, I set up 2 variables: isPromo and pageTheme.

//set in-app default parameter values  
remoteConfig.defaultConfig = ({
   'isPromo': 0,
   'pageTheme': 'neutral'
});

3. What do you wish to Remote-Config?

You can now add the functions you’re going to call depending on the parameter values. I’ve gone with the following 2 – one for each parameter:

//insert promo banner under the "header" element
function insertPromo() {
  var promo = document.createElement('div');
  promo.innerHTML = "<h2>Hello, friends!</h2>";
  promo.className = "promo";
  document.getElementById("header").appendChild(promo);
} 

//change page theme to dark
function customTheme() {
  var style = document.createElement('style');
  var style = document.createElement('style');
  style.innerHTML = "body{background-color: #08183A;} .intro{background-color: #152852;} h1{color: #FD5E53;}";
  document.head.appendChild(style);
}

Now, depending on your parameter values, you will want to run your functions:

function evaluateRemoteConfig() {
  var isPromo = remoteConfig.getValue("isPromo")._value;
  var pageTheme = remoteConfig.getValue("pageTheme")._value 
  if (isPromo === "1") {
    insertPromo();
  };
  if (pageTheme = "custom") {
    customTheme();
  }
}

4. Run Remote Config

Now you can finish the setup in Firebase console. Look for the Grow menu section and click Remote Config. Add your parameter and specify conditions for each value:

parameter setup

Complete setup:

remote config params ready

Results

The results will be applied immediately (after the specified fetch interval):

remote config in action

Closing thoughts

It may be a good idea to include functions “resetting” your website appearance/behaviour to default. Other than that, hope this is helpful – share your thoughts and questions in the comments.

Was this article helpful?
YesNo

Florian Perl

Analyst at IIH Nordic

Leave a Reply

Your email address will not be published. Required fields are marked *