Use Data-Driven Messages to Increase Signups with the Bandwagon Effect

If your website or landing page is converting well, you can use this fact to make it convert even better... by telling visitors about it.

People often hesitate to take action if they think they are the first to take it. To address that issue, and build trust in your service, you can show visitors exactly how many people signed up on your website and leverage the so-called bandwagon effect.

All you need to do is put your analytics tool to work for you 24/7.

Show notifications based on data from the analytics Show notifications based on data from the analytics

This tutorial will explain how to create data-driven notifications in three steps:

  1. Create an analytics report that counts the number of signups and publish the report's data as a publicly available data feed you can use on your website.
  2. Use Triggers to load the number of signups from the data feed when a user visits your landing page and track it as a meta event .
  3. Use the meta event with the number of signups to trigger a notification that will, hopefully, convince the user to convert.

Prepare a Data Feed

Get the Number of Signups using the Stats Report

Create a new workspace and load Stats Report Create a new workspace and load Stats Report

Let's get started by creating a new workspace called "Bandwagon Effect Notifications".

Select the "All Visits" branch and open the "Stats" tab. We will use this report to get the number of visitors who signed up on our landing page. To do so, enter the event which means that users went to the URL with our thank-you page: URL=https://demo.useitbetter.com/landing-pages/thanks.html

Hit the "load" button to get the result. You will see the total number of times the thank-you page was viewed starting from the day UseItBetter tracking was implemented.

Tip: if you have a lot of traffic you might want to change the workspace's timeframe and make the notification say "X people signed up last week". That will make the effect even stronger.

Publish the Data as a Public Data Feed

Turn the Report into a public Data Feed Turn the Report into a public Data Feed

This data displayed in this report is, of course, private by default and you can only see it after signing in to the UseItBetter app. In order to use it on the website and show it to your visitors we need to make this data public.

To do so, click "Enable Data Feed". Once the report is reloaded, the data feed's details will show up.

Copy the code snippet to the clipboard. It's a short javascript code that loads the data feed. We will need it in a moment.

Schedule Auto-Refreshing of the Data Feed

Schedule data feed to be refreshed every morning Schedule data feed to be refreshed every morning

Before we move on to using the data feed we need to make sure that its content is refreshed - otherwise it will always show the same number of sign ups. That wouldn't be very convincing!

We need to schedule when the data feed should be refreshed. Click "schedule" link to start - it's displayed in the top right corner of the report.

Since we are showing a cumulative number of sign ups from the beginning of time (the moment we started using UseItBetter) we don't need to refresh the data often - in most cases once a day will suffice. Therefore, set the schedule to once per day at 8am.

Tip: if you want, you can add your email to receive the report in your inbox as well.

Done. There are two things left to do.

Load the Data Feed on the Landing Page

We need to load the data feed when a user visits our website and then use its content to show the notification.

Create a Segment

Create a segment based on your sign-up page URL Create a segment based on your sign-up page URL

We want to show the notification on a landing page so we will need to trigger loading of the data feed when a user visits that page.

Click the [+] icon on the "all visits" branch to create a new segment that we will turn into a trigger. When the modal window pops up enter: URL=https://demo.useitbetter.com/landing-pages/sign-up.html

into "key/value" field and hit [apply].

Turn Segment into a Trigger

Use triggers to load data feed when a user visits the sign-up page Use triggers to load data feed when a user visits the sign-up page

The segment is displayed as another branch in the workspace. To use it as a trigger you need to select it and open the triggers bar. Then, from the response list choose "JavaScript Code Eval" and paste the code snippet (the one you copied a few steps back) into the field.

The code looks like this.

(function(){
    // method to read data feed by AJAX
    var readFeed = function ( callback){
        var url = "https://uibcdn.com/public/read/";
        var data = {
            "cache":"YOUR_DATA_FEED_KEY"
        };
        var request = new XMLHttpRequest();
        request.open("POST", url);
        request.dataType = "json";
        request.onreadystatechange = function() {
            if (request.readyState == XMLHttpRequest.DONE) {
                callback(JSON.parse(request.response));
            }
        };
        request.send(JSON.stringify(data));
    }
    readFeed(function(response){
        // original:
        // console.log("Data Feed Results",response.results);
        // updated:
        if (response.results[0]) uDash.saveMeta("Completed Signups", response.results[0].count);
    });
}())

If you take a look at the code above you will notice that I commented out the: console.log("Data Feed Results",response.results); line which prints the data feed content into the browser's console log for debugging purposes and added: uDash.saveMeta("Completed Signups", response.results[0].count); which will send a meta event like this: Completed Signups=14

We'll use this event as a trigger for notifications.

Tip: With just a little tweak, you could benefit from the scarcity effect. If you have limited availability of places for a webinar or promotion just change"Completed Signups" to "Signups Left". However, remember that the analytics data may be slightly different than the actual data due to various reasons including delay in refreshing the data or add blockers blocking the tracking.

Delay the Trigger

One small adjustment. We don't want to show the message right after users land on the page. Let's delay the trigger by 5000 milliseconds - 5 seconds - to let them get familiar with its content. Then, once they are ready to sign up, the notification will pop up crushing all their doubts .

TIP: You can limit displaying the message to just once per visit or per user to make the message more subtle. In order to do that select the desired option from the "Trigger Execution" dropdown menu.

Show Notifications

Onto the last step! We want to show a small notification saying "Hurry up! X people have already signed up." but only if the number of signups is higher than 10. A message saying that "0 people signed up" would be embarrassing.

Create Trigger for Notifications

Create a segment based on the number of sign-ups Create a segment based on the number of sign-ups

Click [+] from the "All Visits" branch to create another segment and enter a rule into the "key/value" field: Completed Signups>10 and click [apply].

Configure Notification

Configure notifications showing how many people signed up so far Configure notifications showing how many people signed up so far

Select the created segment, open the Triggers tab and pick "Show On-Screen Notification". You can find it under the "Notifications" tab.

In the message field we use a so-called replacement tag that will dynamically show the value of the "Completed Signups" meta event: Hurry up! blog/use-your-analytics-to-increase-signups-with-bandwagon-effect/ people have already signed up.

You can play with some colors if needed, but otherwise we're good to test the feature.

Testing!

Test the notifications work in the Preview Mode Test the notifications work in the Preview Mode

Save the workspace and click the "Preview Mode" in the top right corner. Then go to the landing page and wait 5 seconds.

If you have more than 10 signups the message should show up. If you don't, you can pretend that you have! Open the browser's console and paste the following code and hit enter: uDash.saveMeta("Completed Signups", 11);

Publish Changes to Production

If everything is fine, go back to the workspace and toggle "Live Mode" on every trigger. You can see which segments have assigned triggers - they will have a "flash bolt" next to the "select" button. If the icon is black it means that the trigger runs only in the Preview Mode. If it's green (turquoise to be precise!) it's available in the Live Mode. By the way, those icons are clickable and will take you directly to the selected trigger.

Once all triggers are ready, click [save] and enjoy a well deserved break.

Tip: keep in mind that if the numbers you show are too low, the notifications might have the opposite effect on your potential customers. Therefore, it's good to A/B test them first. Just change the "Trigger in the sample of users" slider to 50%. Here's a tutorial on how to get started with A/B testing in UseItBetter.

Final Word

Notifications leveraging the bandwagon effect can be a powerful tool in the conversion rate optimization process. As discussed in this tutorial, you can use it to generate more leads on your landing pages, but there are many more use cases. If you have an e-commerce store, the bandwagon effect will help you increase sales of your best sellers. That works especially well during big sales events like Black Friday.

Needless to say, the messages need to be based on real data otherwise you might end up as a laughing stock on social media.