How to show an AdMob interstitial ad only after a complete level with ionic

Question

I have implemented the cordova-admob-pro plugin with my Ionic App.

I would like the interstitial ads to show after completing a certain level and not when the app loads.

Here is my code:

app.js

// AdMob

    if (window.plugins && window.plugins.AdMob && showAds) {
        DebugService.add('admob OK');
        if (window.plugins && window.plugins.AdMob) {
            var admob_banner_key = device.platform == "Android" ? "ca-app-pub-7...6" : "ca-app-pub-7...0";
            var admob_interstitial_key = device.platform == "Android" ? "ca-app-pub-7...5 " : "ca-app-pub-7...6";
            var admob = window.plugins.AdMob;
            admob.createBannerView(
                    {
                        'publisherId': admob_banner_key,
                        'adSize': admob.AD_SIZE.BANNER,
                        'bannerAtTop': false
                    },
                    function () {
                        admob.requestAd(
                            {'isTesting': true},
                            function () {
                                admob.showAd(true);
                            },
                            function () {
                                DebugService.add('failed to request ad');
                            }
                        );
                    },
                    function () {
                        DebugService.add('failed to create banner view');
                    }
            );
            admob.createInterstitialView(
                    {
                        'publisherId': admob_interstitial_key,
                        'autoShow': false
                    },
                    function() {
                        DebugService.add('interstitial successfully craeted');
                    },
                    function() {
                        DebugService.add('failed to add interstitial :-(');
                    }
            );
        }
    }

controller.js:

            if ($scope.levelId % 3 === 0) {
                // after every second level and every third level after that
                DebugService.add("Show interstitial ad :-)");
                if ($localStorage.noAdsPurchased !== true &&
                        window.plugins && window.plugins.AdMob) {
                    DebugService.add('Ready to show interstitial');
                    window.plugins.AdMob.requestInterstitialAd(
                        {'isTesting': true},
                        function() {
                            window.plugins.AdMob.showInterstitialAd(true, 
                                function(){
                                    DebugService.add('interstitial successfully shown');
                                }, 
                                function(){
                                    DebugService.add('interstitial show failed');
                                });
                            DebugService.add('interstitial successfully requested');
                        },
                        function() {
                            DebugService.add('failed to request interstitial');
                        }
                    );
                    DebugService.add('After showing interstitial');
                }
            }

The interstitial ad also shows at start, which I don't want. If I remove the code or try and put the code from app.js for interstitial ads only in the controller the interstitial ads do not show at all. I am thinking because they have not be initiated.

How do I initiate interstitial ads without them showing right at the start?

Answer 1

Thanks for the input. This is finally how I solved the problem.

It seems that as soon as the createInterstitialView method is called the interstitial ad will be shown. That's why it was showing right from the start.

To solve the problem I moved all the AdMob code into its own Service, with methods to initialize, create and show the ads. This way the createInterstitialView will not be called until the ad is to be shown. The createIntersititalView is called from the controller.

wwdWordRecognition.service('AdmobService', ['DebugService', function (DebugService) {

    var _bannerId;
    var _interstitialId;

    var _isAdmobMissing = function() {
        if(window.plugins === undefined || window.plugins.AdMob === undefined) {
            return true;
        }
        return false;
    };

    this.init = function(bannerId, interstitialId) {
        _bannerId = bannerId;
        _interstitialId = interstitialId;
    };

    this.createAdmobBanner = function () {
        if(_isAdmobMissing()) {
            return false;
        }
        var _admob = window.plugins.AdMob;
        _admob.createBannerView(
                {
                    'publisherId': _bannerId,
                    'adSize': _admob.AD_SIZE.BANNER,
                    'bannerAtTop': false
                },
                function () {
                    _admob.requestAd(
                        {'isTesting': true},
                        function () {
                            _admob.showAd(true);
                        },
                        function () { DebugService.add('failed to request ad'); }
                    );
                },
                function () { DebugService.add('failed to create banner view');}
        );
    };

    this.showInterstitial = function () {
        if(_isAdmobMissing()) {
            return false;
        }
        DebugService.add('Admob plugin found.');
        var _admob = window.plugins.AdMob;
        _admob.createInterstitialView(
            {
                'publisherId': _interstitialId
            },
            function () {
                DebugService.add('interstitial successfully craeted');
                _admob.requestInterstitialAd(
                    {'isTesting': true},
                    function() {
                        _admob.showInterstitialAd(true, 
                            function(){ DebugService.add('interstitial successfully shown'); }, 
                            function(){ DebugService.add('interstitial show failed'); });
                        DebugService.add('interstitial successfully requested');
                    },
                    function() { DebugService.add('failed to request interstitial'); }
                );
            },
            function () { DebugService.add('failed to add interstitial :-('); }
        );
    };
}]);

The app.js now looks like this:

// AdMob

DebugService.add('Start ad setup...');
if (showAds) {
    if (window.plugins && window.plugins.AdMob) {
        var _admob_banner_key = device.platform == "Android" ? "ca-app-pub-7...6" : "ca-app-pub-7...0";
        var _admob_interstitial_key = device.platform == "Android" ? "ca-app-pub-7...5 " : "ca-app-pub-7...6";
        AdmobService.init(_admob_banner_key,_admob_interstitial_key);
        AdmobService.createAdmobBanner();
    } else {
        DebugService.add('Admob plugin not found');
    }
}

And finally the controller.js:

if ($scope.listId % 3 === 0) {
    // after every third list
    DebugService.add("Show interstitial ad.");
    if ($localStorage.noAdsPurchased !== true &&
             window.plugins && window.plugins.AdMob) {
        AdmobService.showInterstitial();
    }
}