Add App Rating in Ionic 3+ App – An Easy Guide

613
SHARES
2.8k
VIEWS

In this article, I’ll be covering how to add app rating to your ionic 4 apps. We’ll use the “Rate app”plugin to kindly ask our users to rate our app inside the app store with just a few clicks.

Getting started

We start with a blank app and won’t add much besides the plugin, so go ahead and create the app and install our Cordova plugin and the according to Ionic Native NPM package:

$ ionic start rateMyIonicApp blank
$ cd rateMyIonicApp
$ ionic cordova plugin add cordova-plugin-apprate
$ npm install --save @ionic-native/app-rate@4

Open src/app/app.module.ts then add a provider for this plugin.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { AppRate } from '@ionic-native/app-rate';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    {provide:RouteReuseStrategy, useClass:IonicRouteStrategy},
    AppRate
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Go ahead and open your src/home/home.ts and import AppRate Plugin and Add this in Constructor method. After that create a new method called rateMe and call this method in the constructor method.

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppRate } from '@ionic-native/app-rate';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private appRate: AppRate
  ) {
    this.initializeApp();
    this.rateMe();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

  // Rate App Dialogue
 rateMe() {
    this.appRate.preferences = {
      usesUntilPrompt: 3,
      displayAppName: 'Your app name here',
      promptAgainForEachNewVersion: true,
      storeAppURL: {
        ios: '<my_app_id>',
        android: 'market://details?id=<package_name>',
        windows: 'ms-windows-store://review/?ProductId=<store_id>'
      },
      customLocale: {
        title: 'Do you enjoy this App?',
        message: 'If you enjoy this App. would you mind talking a moment to rate it?',
        cancelButtonLabel: 'No, Thanks',
        laterButtonLabel: 'Remind me Later',
        rateButtonLabel: 'Rate it Now',
        yesButtonLabel: "Yes!",
        noButtonLabel: "Not Really",
        appRatePromptTitle: 'Do you like using my App?',
        feedbackPromptTitle: 'Mind giving us some feedback?',
      },
      callbacks : {
        onRateDialogShow: function(callback) {
          // show something
        },
        onButtonClicked : function (buttonIndex) {
          // show something
        }
      }

    };

    this.appRate.promptForRating(true);
 }


}

Replace <my_app_id> with your iOS app id.

Replace <package_name> with Android package name.

Replace <store_id> with your Windows store App ID.

Conclusion

You can now add a Cordova target platform (Android, iOS and Windows ), build and run your app using an emulator or real device to test app rating In your Ionic 3 application.


Best resources to learn Ionic framework

Muhammad Mubeen

Muhammad Mubeen

Mubeen is a full-stack web & mobile app developer who is very proficient in MEAN.js, Vue, Python, Ionic 4, Flutter, Firebase, ROR, and PHP. He has created multiple mobile and web applications. He is very passionate about sharing his knowledge.

Leave a Reply

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