Implementing the App Rate plugin for Ionic applications

June 20, 2017, 11:36 am Categories:

Categories

App Store ratings are like gold dust for application developers.

The higher the ratings the more popular the application, the more downloads and potential sales will be generated.

There's one problem however.

Unless your customers feel strongly motivated by the experience of using your application it's not easy to generate such ratings.

One approach available to developers is to provide a mechanism through which a user can be prompted to provide a rating from directly within the application itself.

Here's where the Ionic Native App Rate plugin comes in handy.

Using this plugin developers can provide a user friendly modal window that gently encourages the user to provide a rating for the application - like so:

App Rate plugin displaying modal widow with rating options for user to select from

As you can see the above application implements this functionality in the following way:

  • A Rate this App link to trigger the App Rating modal window
  • A modal window displaying the different options available to the user

It's best to allow your users to determine whether they want to rate the application or not by providing a means to activate the rating modal window themselves.

Do NOT trigger the rating window randomly or, disastrously, after the application has crashed for example - let your user take control of the process.

This makes for a better customer experience and will help minimise/avoid any negative reviews!

Let's get started by creating a very simple application that will demonstrate how to use the App Rate plugin.

Laying the groundwork

Open your system command line software and create the following Ionic project titled ionic-rating:

ionic start ionic-rating blank

Once the project has been successfully generated you'll need to install the Ionic Native App Rate plugin and its corresponding node package with the following commands:

ionic cordova plugin add cordova-plugin-apprate
npm install --save @ionic-native/app-rate

This is then followed by creating a service which we'll use later on to manage the App Rating functionality:

ionic g provider rating

Finally you'll need to open your project's root module - ionic-rating/src/app/app.module.ts - and add the Ionic Native AppRate package (the RatingProvider service should already be added by default).

If in any doubt simply replace your own code for the root module with the code displayed below:

import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { AppRate } from '@ionic-native/app-rate';

import { MyApp } from './app.component';
import { RatingProvider } from '../providers/rating/rating';



@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    StatusBar,
    SplashScreen,
    AppRate,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    RatingProvider
  ]
})
export class AppModule {}

With the foundation for the project now in place let's look at implementing the App Rate plugin functionality through the ionic-rating/src/providers/rating/rating.ts provider.

Rate this

The App Rate plugin is surprisingly quite compact in terms of its functionality.

Developers can configure the following options:

  • Set up plugin preferences (which would include the App Store URL's for the application)
  • Determine when the plugin modal window is triggered through the promptForRating method
  • Provide event callbacks (if required)

The plugin preferences - as listed in the official documentation - are as follows:

Configuration options
Param Type Details
useLanguage string

Custom BCP 47 language tag

(optional)
displayAppName string

Custom application title

(optional)
promptAgainForEachNewVersion boolean

Show dialog again when application version will be updated. Defaults to true

(optional)
usesUntilPrompt number

count of runs of application before dialog will be displayed. Defaults to 3

(optional)
openStoreInApp boolean

leave app or no when application page opened in app store (now supported only for iOS). Defaults to false

(optional)
useCustomRateDialog boolean

use custom view for rate dialog. Defaults to false

(optional)
customLocale any

Custom locale object

(optional)
callbacks AppRateCallbacks

Callbacks for events

(optional)
storeAppURL AppUrls

App Store URLS

(optional)

For the ionic-rating application we're simply going to configure the following plugin preferences:

  • displayAppName - The user facing title for our application
  • storeAppURL - The URLS for the App Store listings of the application

Let's get started by modifying the ionic-rating/src/providers/rating/rating.ts provider so that it resembles the following:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { AppRate } from '@ionic-native/app-rate';

/*
  Generated class for the RatingProvider provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class RatingProvider {

   constructor(public http 		: Http,
               private _RATE 	: AppRate) 
   {
      this._RATE.preferences = {
         displayAppName 		: 'Ionic Rating',
         storeAppURL      		: {
            ios                 : AppID,
            android           	: 'market://details?id=AppID'
         }
      };
   }



   /**
    *
    * requestRating method simply triggers the plugin promptForRating
    * method by supplying a boolean value of true
    *
    */
   requestRating()
   {
      this._RATE.promptForRating(true);
   }



}

The above service is fairly self-explanatory but I want to draw your attention to the AppID value for the storeAppURL configuration setting.

For iOS the AppID will be a numeric value like the following:

// An example App Store URL
itunes.apple.com/us/app/SLUG-FOR-YOUR-APP-URL/id0000000000?mt=8

// The numeric value is the App ID FOR iOS
// I.e - 0000000000

To find this value simply log in to your iTunesConnect account, select the desired application and, on the App Information page, the AppID will be displayed under the Apple ID heading.

For Android the AppID can be found in the widget id field of the application's config.xml file and will look something like this:

// Package name
com.organisationName.Name

With the code for the service in place let's look at how this is triggered from the application's HomePage component.

Tying it together

Modify the ionic-rating/src/pages/home/home.ts file so that it resembles the following:

import { Component } from '@angular/core';
import { IonicPage, 
         NavController, 
         Platform } from 'ionic-angular';
import { RatingProvider } from '../../providers/rating/rating';


@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

   constructor( public navCtrl      : NavController,
                private _PLAT       : Platform,
                private _RATE       : RatingProvider) 
   {  }



   promptForAppRating()
   {
      // Only allow the plugin to be triggered when the device is ready
      this._PLAT.ready()
      .then(() => 
      {
         // Trigger the App Rate plugin modal window
         this._RATE.requestRating();
      });
   }

Here we simply use a method named promptForAppRating to trigger opening the App Rate plugin's modal window.

This method is then assigned to a click event in the template mark-up of the ionic-rating/src/pages/home/home.html file like so:

<ion-header >
   <ion-navbar color="headerbar">
      <ion-title>
         Welcome, grasshopper
      </ion-title>
   </ion-navbar>
</ion-header>

<ion-content>

   <button 
      ion-button 
      color="primary"
      block 
      (click)="promptForAppRating()">Rate this App</button>

</ion-content>

Now you simply need to connect a handheld device to your computer then build and run the ionic-rating application (having provided the necessary AppID values for the App Rate plugin) using the following Ionic CLI commands:

// iOS
ionic cordova build ios --prod
ionic cordova run ios --prod


// Android
ionic cordova build android --release --prod
ionic cordova run android --prod

Which should allow you to trigger the App Rate modal window from the Rate this App button - similar to the one shown in the following real world application:

App Rate plugin displaying modal widow with rating options for user to select from

In summary

Getting App Store ratings is difficult (unless your users love/loathe your application in which case they're only too happy to express their feelings in a review!) which is why the App Rate plugin was designed.

Used sparingly and unobtrusively this plugin offers your customers the option to rate the application through a user-friendly modal request flow.

Get this wrong and the presence of this feature will help to kill the user experience (and more than likely contribute to the wrong kind of reviews!)

Like all things development related it's a question of experimentation and getting the balance just right.

Happy coding!

What did you think of this tutorial? Did it cover the necessary angles or could it be improved in some way?

Let me know what your thoughts and reactions are by leaving your comments in the form below.

If you enjoyed what you've read here then please consider signing up to my mailing list and, if you haven't done so already, take a look at my e-book: Mastering Ionic for further information about working with different plugins in Ionic.

Tags

Categories

Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.

Top