Prompt User To Rate Ionic Framework Mobile App

So you’ve released a great mobile app and have had a decent amount of downloads, but no one is rating or reviewing it.  Downloads can be increased significantly by having a greater number of ratings.

So how do you encourage more downloads in your Ionic Framework Android or iOS mobile application?  Thanks to a library created by Alex Disler called ng-special-offer, we can make use of Apache Cordova native dialogs to prompt users to rate or review based on application open count.

Let’s start by creating a fresh Ionic Framework Android and iOS application:

Remember, if you’re not using a Mac, you cannot add and build for the iOS platform.

This particular library requires the Apache Cordova Dialogs plugin and Apache Cordova InAppBrowser plugin to be installed since it makes use of native dialogs and launches an App Store.  It can be installed by running the following from your Terminal or command prompt:

With the plugins installed, go ahead and download the latest version of ng-special-offer and extract ng-special-offer.js to your www/js directory.

Open your index.html file because we need to include the JavaScript library for use in our project.  Add the following somewhere in the <head> tag:

Don’t be alarmed that I’m also having you include ngStorage.min.js into your project.  It is a requirement of ng-special-offer, and overall beneficial to your entire project.  You can read about it in a previous post I made on the topic.  You can download ngStorage on GitHub.

You must also include ng-special-offer in your angular.module before use.  Make your www/js/app.js looks like the following:

Per the official ng-special-offer documentation, you can add the following to your www/js/app.js code to make it work:

Based on the above code, a dialog asking to rate will appear after the fifth application open.  If the user agrees, then the app store will be opened, otherwise other events will be triggered based on other button presses.

There is however, one flaw in the current version of the ng-special-offer library as of writing this article:

You must remove the two highlighted lines.  If you leave them, the code will never actually be called and you’ll never get a dialog to appear.  Because we are using the library in the $ionicPlatform.ready() function, the code will already be ready for use.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

  • DaniloOliveira28

    Nic, Ty again!
    I followed your steps and know we have incorpored it in our app!

    thanks

  • Ron B

    Hi Nic, you forgot to mention in your article that you will also need to add the org.apache.cordova.inappbrowser plugin to make it work.

    • This has been corrected. Thanks for pointing out my mistake 🙂

  • Tiago Silva Pereira

    In my app the $localStorage dont work’s inside the functions onAgree, onDeclide and onRemindLater, in ng-special-offer.js. Work’s only in the init() function 🙁

    • What do your error logs say?

      • Tiago Silva Pereira

        Don’t show errors. Only don’t save the data inside the methods. Eg: the code $localStorage.specialOffers[config.id].countOpens++ runs normally because is not inside the methods, but $localStorage.specialOffers[config.id].countOpens = 1 don’t work’s.

        • Luiz Roberto Bossoi (e0xbr)

          same problem here…what did you do?

      • Tiago Silva Pereira

        it’s like not recognize the $ localStorage within onAgree, onDecline and onRemindMeLater methods

        • Put your project on GitHub and I’ll take a look.

          • Tiago Silva Pereira

            Thank you for concern Nic but I use the appropriate plug-in and it works for me !! Your videos and tutorials have helped me a lot in the use of ionic! thank you

          • Awesome! Reach out on Twitter if you ever need anything.

            Regards,

  • Nameless

    Glad to see NRA is your name, not the national rifle association 😛 Thanks for all the videos dude, helped a lot.

    Was wondering where I can find my ios and android app id? Can I choose this myself or is it set by Apple? Also are there any example app IDs I can test with prior to publishing the apps in the app store?

    • The app id for Android is the package name (ex: com.nraboy.myproject). For iOS, I believe you must submit first, but I could be wrong.

      • Nameless

        Thanks!

        I can’t find the app id btw. You have:
        var appVersion = ‘1.0.0’;
        var iosId = ‘12345’;
        But nothing about an Android package name (or reference to it)?

        • Check the xml configuration file at the root of your project.

  • Raj Kumar.MP

    Hi Nic. Nice tutorial. I have one doubt. how to idenitfy whether the particular app user is registered star for my app in appstore ?

    • Users cannot rate your app unless they are registered and have actually downloaded your application. This plugin will only direct the user to the app store. From this point, the app store will handle the rest of the checking.

  • Thanks for another great article man. 🙂

  • webmasterpro91

    thanks nic work great!

  • Niña Jesica

    I use the codes but its not working. I use intel XDK to build the app.

    • I don’t know anything about Intel XDK or its compatibility with Ionic Framework. When you say it isn’t working, what is it doing? The more information you give me, the better I can help.

      Regards,

  • How do I achieve same in ionic2?