CODEWITHSUNDEEP
angularjsionic-frameworkadmobhybrid-mobile-appcordova-admob
Valdo S Lopes
Valdo S Lopes

Reputation: 11

How to call admob interstitial every 3 clicks in ionicframework?

I want to call the interstitial in view every 3 clicks. I realized many questions of the type, but only for native android. Thank you very much for your attention.

My HTML IONIC

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <script src="lib/ionic/js/ionic.bundle.js"></script>


    <script src="lib/ng-cordova.min.js"></script>
    <script src="cordova.js"></script>


    <link href="lib/ionic/css/ionic.css" type="text/css" rel="stylesheet">
    <link href="css/animate.css" type="text/css" rel="stylesheet">
    <link href="css/style.css" type="text/css" rel="stylesheet">


<script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/routes.js"></script>
    <script src="js/directives.js"></script>
    <script src="js/services.js"></script>

  </head>
  <body ng-app="passLite" animation="slide-left-right-ios7">


  <div>
  <div>
    <ion-nav-bar class="bar-assertive">


        <ion-nav-back-button class="button-clear"><i class="ion-android-arrow-back"></i> </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>
  </div>

</div>
  </body>
</html>

My TEMPLATE 

<ion-view title="new" id="page2">
  <ion-content padding="true" class="has-header">


            <!--Config Button-->
      <button class=" animated bounceIn" ng-click="btnClicked('click')">
        <i class="icon ion-android-refresh"></i>
      </button>           

        </ion-content>
</ion-view>

My CONTROLLER, Supposed error 

angular.module('app.controllers', [])
.controller('new', ['$rootScope', '$scope', '$timeout', '$stateParams',
function ($rootScope, $scope, $timeout, $stateParams) {

$scope.counter = 1;
$scope.btnClicked = function(btn){
         if (btn == 'click'){


            //on every 3th clicks show the Interstitial ad one second after the result appears
            if ($scope.counter++ == 3){
                setTimeout(function(){
                    if (AdMob){
                        AdMob.showInterstitial();   
                    }

                    $scope.counter = 1;
                }, 1000);
            }
        }

    };


}])

Upvotes: 1

Views: 762

Answers (1)

Miquel
Miquel

Reputation: 8979

You can take a look at the examples here: https://github.com/appfeel/admob-google-cordova/wiki/showInterstitialAd and here: https://github.com/appfeel/admob-google-cordova/wiki/Angular.js,-Ionic-apps

Basically:

angular.module('myApp', ['admobModule'])

  .config(['admobSvcProvider', function (admobSvcProvider) {
    var adPublisherIds = {
      ios : {
        banner : "ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB",
        interstitial : "ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII"
      },
      android : {
        banner : "ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB",
        interstitial : "ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII"
      }
    };
    var admobid = (/(android)/i.test(navigator.userAgent)) ? adPublisherIds.android : adPublisherIds.ios;

    admobSvcProvider.setOptions({
      publisherId:          admobid.banner,
      interstitialAdId:     admobid.interstitial,
      autoShowInterstitial: false
    });
  }])

  .run(['$rootScope', 'admobSvc', function ($rootScope, admobSvc) {
    $rootScope.isInterstitialAvailable = false;
    admobSvc.requestInterstitialAd();

    // Handle events:
    $rootScope.$on(admobSvc.events.onAdLoaded, function onAdLoaded(evt, e) {
      if (e.adType === admob.AD_TYPE.INTERSTITIAL) {
        $rootScope.isInterstitialAvailable = true;
      }
    });

    $rootScope.$on(admobSvc.events.onAdClosed, function onAdClosed(evt, e) {
      if (e.adType === admob.AD_TYPE.INTERSTITIAL) {
        $rootScope.isInterstitialAvailable = false;

        // Request next interstitial: there may be some delay
        // between the moment it is requested and the moment it is available
        admobSvc.requestInterstitialAd();
      }
    });
  }]);

Then in your controller:

angular.module('app.controllers', [])
  .controller('new', ['$rootScope', '$scope', '$timeout', '$stateParams', 'admobSvc', function ($rootScope, $scope, $timeout, $stateParams, admobSvc) {

    $scope.counter = 0;
    $scope.btnClicked = function(btn) {
      if (btn == 'click') {
        $scope.counter += 1;
        if ($scope.counter >= 3) {
          $timeout(function() {
            if ($rootScope.isInterstitialAvailable) {
              admobSvc.showInterstitial();   
            }
            $scope.counter = 0;
          }, 1);
        }
      }
    };
  }]);

Upvotes: 2

Related Questions