Add ‘Rate my App’ in your ionic app to increase the number of ratings in the app store

Having a great app but not getting any reviews? You might just need to push your app users a little bit to get more ratings for your app! Therefore, I will show you how to add a simple cordova plugin in your ionic app to attract more users to rate your app.

Setup your app
We start with an easy standard blank template and install a cordova plugin for apprate:

ionic start devdactic-rate blank
cd devdactic-rate
cordova plugin add https://github.com/pushandplay/cordova-plugin-apprate.git

Now we have already everything setup to show the “rate my app” reminder, so let’s add some code.

Showing the AppRate popup
As we want to show our reminder popup when the app starts, we will include it in the run() function we already have in our app.js, so it should look like this:

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }

    // Show the popup immediately
    AppRate.promptForRating(true);
  });
})

When you run your app in the browser now, you won’t see much but an error in the console saying:
Uncaught ReferenceError: AppRate is not defined
This happens because you can’t use the cordova stuff in your browser. The cordova.js file gets compiled into your project directory if you build your app for iOS or Android. As we need to test our module, we need to add a platform so open your command line and run:

ionic platform add ios
ionic prepare ios
ionic build ios
ionic run ios

I always like to have my iphone connected so the app runs directly on it. Otherwise, your simulator might show up now. The result should look like this (text depends on your current device language!):

Customize the AppRate popup
At the moment, this popup won’t help you much in your app. If you click ‘Rate it now’, the popup will a) just close (simulator) or b) open the appstore without a specific app defined (device), as we have not defined where to go if the user really wants to rate your app now. Moreover, we could also define some special text or define a language. Therefore, let’s change our prompt function and set some properties:

    // 1
    AppRate.preferences.useLanguage = 'en';

    // 2
    var popupInfo = {};
    popupInfo.title = "Rate YOUR APPTITLE";
    popupInfo.message = "You like YOUR APPTITLE? We would be glad if you share your experience with others. Thanks for your support!";
    popupInfo.cancelButtonLabel = "No, thanks";
    popupInfo.laterButtonLabel = "Remind Me Later";
    popupInfo.rateButtonLabel = "Rate Now";
    AppRate.preferences.customLocale = popupInfo;

    // 3
    AppRate.preferences.openStoreInApp = true;

    // 4
    AppRate.preferences.storeAppURL.ios = '849930087';
    // AppRate.preferences.storeAppURL.android = 'market://details?id=<package_name>';

    // 5 
    AppRate.promptForRating(true);

Ok see what’s happening:

• 1. Set the language of your popup. If you set a custom text later, this is somehow useless. Only works on the custom text afaik.
• 2. Create an object with all the text in the popup and assign it to the AppRate preferences.
• 3. Define whether the app store should be opened in your app like an inApp browser or external like the normal app store.
• 4. Set the correct url to your app. You can find it in the browser URL when you go to your app. There should be something like ?id= after the URL, so take that part! Obviously you can set 2 ids, for iOS and Android. The current id will work on iOS and will open the Ionic View app from Drifty. Support those guys at ionic, they do incredible stuff!
• 5. Show the popup immediately

If you have trouble finding your iOS app id, take a look at the apple linkmaker!

This is now already very useful. You have your own text, your correct store link and everything. But one more addition would be useful: You don’t want to show the popup always, and maybe you don’t want to show it when the user opens your app the first time. That would be somehow very annoying and won’t result in any good ratings at all. So let’s add a one more instructions to the AppRate and remove the ‘true’ parameter from the prompt function:

    AppRate.preferences.usesUntilPrompt = 1;
    AppRate.promptForRating();

To try this, you need to remove the app from your device, as the value was already set from your previous testing. So install the app, kill it, open it again and voilà there is your popup again on the second use!

Additionaly you can define promptAgainForEachNewVersion(true) to guess what, show the rating popup again after a app update. For more information see the github repo of the apprate plugin.

If you like this tutorial, follow me on twitter @schlimmson and leave a comment/ tweet it!

So long,
Saimon