Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Prompt User To Rate Ionic Framework Mobile App

TwitterFacebookRedditLinkedInHacker News

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:

ionic start IonicProject blank
cd IonicProject
ionic platform add android
ionic platform add ios

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:

cordova plugin add org.apache.cordova.dialogs
cordova plugin add org.apache.cordova.inappbrowser

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:

<script src="js/ng-special-offer.js"></script>
<script src="js/ngStorage.min.js"></script>

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:

var ionicApp = angular.module('starter', ['ionic', 'ngSpecialOffer', 'ngStorage'])

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

ionicApp.run(['$ionicPlatform', '$specialOffer', function($ionicPlatform, $specialOffer) {
    $ionicPlatform.ready(function() {

        var appVersion = '1.0.0';
        var iosId = '12345';

        $specialOffer.init({
            id           : 'my-special-offer' + appVersion,
            showOnCount  : 5,
            title        : 'A Special Offer',
            text         : 'If you enjoy this app please take a moment to rate it',
            agreeLabel   : 'Rate App',
            remindLabel  : 'Remind Me Later',
            declineLabel : 'Not interested',
            onAgree      : function () {
                // agree
                window.open($specialOffer.appStoreUrl(iosId));
            },
            onDecline   : function () {
                // declined
            },
            onRemindMeLater : function () {
                // will be reminded in 5 more uses
            }
        });
    });
}]);

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:

document.addEventListener("resume", function () {
    if($localStorage.specialOffers[config.id].countOpens >= config.showOnCount && $localStorage.specialOffers[config.id].enabled) {
        var clickHandler = function (buttonIndex) {
            switch (buttonIndex) {
                case 3:
                    onAgree();
                    break;
                case 2:
                    onRemindMeLater();
                    break;
                case 1:
                    onDecline();
                    break;
            }
        };
        var buttonLabels = [config.declineLabel, config.remindLabel, config.agreeLabel];
        navigator.notification.confirm(config.text, clickHandler, config.title, buttonLabels);
    } else if ($localStorage.specialOffers[config.id].enabled) {
        $localStorage.specialOffers[config.id].countOpens++;
    }
});

You must remove the first and last lines above. 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

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