Tutorial hero
Lesson icon

Adding “Rate This App” for Reviews and Ratings in PhoneGap

Originally published January 12, 2015 Time 6 mins

Ratings and reviews by real users of not just mobile applications, but just about anything, are critical for building trust and interest in new users. The social proof of having ratings and reviews is immensely valuable and can heavily influence the decision of a potential downloader – especially for paid apps.

Unfortunately, getting reviews and ratings is hard. Even if you have a great product you may struggle to get reviews because:

  1. Users forget about ratings and reviews or may not even know they exist.
  2. Users don’t care
  3. Rating is too much of an inconvenience with no return for the user

You can solve problem 2 reasonably easily by providing a great experience to your users. This leaves two problems though:

  1. We need to let users know that they can rate or review our applications and that it is beneficial to us
  2. We need to provide an easy way for users to do this

You will have likely experienced a pop up like this in an application you’ve downloaded before:

Rate This App

I think this setup, with the three different options, is great because:

  • If users have no interest in rating your app they will hit “No, Thanks”
  • If users want to rate your app they can do it by hitting one button rather than finding it in the app store
  • If users want to rate your app, but don’t want to right now they can be reminded later

I don’t have any data to support this, but I suspect most users will hit Remind Me Later. If you’ve given a good experience to your users they will likely want to help you, but most will be too apathetic or busy to actually commit to doing it (I know this is frequently an occurrence for me). You feel bad rejecting the offer completely so you choose Remind Me Later. After being reminded enough times, hopefully the user will eventually commit to rating.

It’s tough getting users across the line to rate, so you can’t just expect they will hunt you down on the app store and rate you on their own accord. That’s why I wanted to write this tutorial on how to add “Rate this App” functionality into your own apps with the PhoneGap Build plugin AppRate. The plugin supports both iOS and Android and has experimental support for Blackberry and Windows 8. Let’s get started.

1. Install the plugin in your application

First you will need to add a reference to the plugin in your config.xml file. If you are unsure how to set up PhoneGap Build in your application take a look at this post.

Add the following line to your config.xml file:

<gap:plugin name="org.pushandplay.cordova.apprate" version="1.1.5" />

This plugin also depends on the Globalization, Inappbrowser and Notification plugins so make sure to also include the following references in your config.xml file:

<gap:plugin name="org.apache.cordova.globalization" version="0.3.1" />
<gap:plugin name="org.apache.cordova.inappbrowser" version="0.5.2" />
<gap:plugin name="org.apache.cordova.dialogs" version="0.2.10" />

2. Configure the settings

Once the plugin is available in your project, you should configure the settings for AppRate. This code should be placed somewhere that will run after the device is ready. The most simple configuration you can use for iOS and Android is as follows:

AppRate.preferences.storeAppURL.ios = '*insert app id*';
AppRate.preferences.storeAppURL.android = 'market://details?id=*insert app id*';

Make sure to replace *insert app id* with your own app id. This lets the plugin know where to locate your application in the app store if a user attempts to rate your application. The id is the reverse domain style bundle id of you application, i.e. the id listed in your config.xml file. This will be something like com.yourname.yourproject

There are more advanced options you can specify though, including support for BlackBerry and Windows8:

AppRate.preferences.storeAppURL.blackberry =
  'appworld://content/*insert app id*/';
AppRate.preferences.storeAppURL.windows8 =
  'ms-windows-store:Review?name=<the Package Family Name of the application>';

There’s also several behavioural options we can set including opening the app store within our application, setting a custom display name, how many times the plugin should be used before prompting the user and whether users should be prompted to rate again for new versions of the application:

AppRate.preferences.openStoreInApp = true;
AppRate.preferences.displayAppName = 'My custom app title';
AppRate.preferences.usesUntilPrompt = 5;
AppRate.preferences.promptAgainForEachNewVersion = false;

Some applications may be localised to different languages, and you certainly don’t want an English message displayed for your Japanese users. The AppRate plugin already comes with localisations for the following languages:

ar, bn, ca, cs, da, de, de-AT, el, en, es, fa, fr, he, hi, id, il, ja, ko, nl, no, pa, pl, pt, ru, sk, sl, sv, th, tr, uk, ur, ur-IN, ur-PK, vi, zh-TW, zh-Hans, zh-Hant

but you can also define your own custom localisation. First define a customLocale object:

var customLocale = {};
customLocale.title = 'Rate %@';
customLocale.message =
  'If you enjoy using %@, would you mind taking a moment to rate it? It won't take more than a minute. Thanks for your support!';
customLocale.cancelButtonLabel = 'No, Thanks';
customLocale.laterButtonLabel = 'Remind Me Later';
customLocale.rateButtonLabel = 'Rate It Now';

and then set the plugin to use that locale in your preferences:

AppRate.preferences.customLocale = customLocale;

3. Call the prompt

All that is left to do now is call the prompt. Make sure to do this somewhere that makes sense, you don’t want to annoy your users. Perhaps adding it after some task has been performed would be the best choice for example:

  • The user has just saved a note
  • The user has just finished watching a video
  • The user submitted a form

Obviously it will depend on your application where this would be best placed but you certainly don’t want to do it right at app start up or during a task. I’ve just added this plugin to a game I’m creating and have decided the best place to trigger it is on the game over screen. Imagine how annoying it would be if it were to pop up in the middle of a game.

I also don’t display the prompt until users have reached a certain point in the game, at least this way I know they are somewhat interested in the game and will likely leave a better review. If you frustrate your users with poorly timed pop ups, you may find you will receive a lot more negative reviews.

To trigger the prompt simply run the following code:

AppRate.promptForRating();

This will not trigger the prompt right away, if you have ‘usesUntilPrompt’ set to 5 for example then it will not show until it has been triggered 5 times. If you want to forcibly display the prompt you can use the following code:

AppRate.promptForRating(true);

Using this strategy should see you get a considerably more reviews, there really is no benefit to the user in rating your app so the process should be made as easy as possible and this plugin does just that.

Learn to build modern Angular apps with my course