admobpro AdMob.showInterstitial() causes infinite loop - angularjs

admobpro AdMob.showInterstitial() causes infinite loop
I am using admobpro in an ionic/angularjs app, and every time i call AdMob.showInterstitial() I get an advertisement to appear, but when i click the X to close the advertisement a new one instantly pops up. I was initally calling the showInterstitial from the init function but thought maybe this was the problem, so i created a test page that would show the interstitial when i clicked a button, the same
result. infinite loop.
has anyone else had this problem.
var admobid = {};
// select the right Ad Id according to platform
if( /(android)/i.test(navigator.userAgent) ) {
admobid = { // for Android
banner: 'ca-app-pub-6869992474017983/9375997553',
interstitial: 'ca-app-pub-6869992474017983/1657046752'
};
} else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
admobid = { // for iOS
banner: 'ca-app-pub-6869992474017983/4806197152',
interstitial: 'ca-app-pub-6869992474017983/7563979554'
};
} else {
admobid = { // for Windows Phone
banner: 'ca-app-pub-6869992474017983/8878394753',
interstitial: 'ca-app-pub-6869992474017983/1355127956'
};
}
function adSetter(){
if(window.AdMob) AdMob.createBanner( {
isTesting:true,
adId:admobid.banner,
position:AdMob.AD_POSITION.BOTTOM_CENTER,
autoShow:true} );
if(window.AdMob) AdMob.prepareInterstitial( {adId:admobid.interstitial, autoShow:false} );
}
function onDeviceReady(){
adSetter();
}
function domLoaded(){
document.addEventListener("deviceready", onDeviceReady, false);
}
my code:
fron ionic
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleLightContent();
}
//start admob
domLoaded();
//end admob
});
})

i see you have mixed a bit of the code. the $ionicPlatform.ready() of ionic is called when the deviceready of cordova has occured so no need to call the device ready again inside the $ionicPlatform.ready()
i have a complete demo for ionic ads here http://pointdeveloper.com/how-to-add-banner-ads-to-ionic-apps-using-admob-pro-plugin/
From the code it seems ok and it should run the only thing that you have to make sure is that the AdMob.showInterstitial() is not being called in a loop.
As you mentioned you also tried it with a button, i suggest you create a fresh project and try again.

Related

Google Analytics Plugin Not Reporting Users in Dashboard

I am trying to add Google Analytics to my app. I am using Dan Wilson's Google Analytics plugin. I am not getting any errors but my Google Analytics Dashboard is not Updating at all. Where am i wrong,
var googleanalyticsApp = angular.module('starter', ['ionic','ngCordova'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
if(typeof analytics !== undefined) {
analytics.startTrackerWithId("UA-872489XX-1");
console.log("Analytics Initialized");
} else {
console.log("Google Analytics Unavailable");
}
});
});
googleanalyticsApp.controller('ExampleController', function($scope,$cordovaGoogleAnalytics) {
function _waitForAnalytics(){
if(typeof analytics !== 'undefined'){
analytics.startTrackerWithId("UA-872489XX-1");
analytics.trackView('APP first screen');
console.log("Analytics in Controller");
}
else{
setTimeout(function(){
_waitForAnalytics();
},250);
}
};
_waitForAnalytics();
I have initialized the Google Analytics in both Device Ready and Controller.
Console.log states as:
But my Dashboard is not updating at all
Kindly, help me out.
Your dashboard is pointing at Nov 14 - Nov 14. Change this to the current day, it defaults to the previous day.
It can take up to 24 hours for data to appear in Analytics console. Also why do you have different naming conventions when calling analytics functions? You can change 'analytics' to $cordovaGoogleAnalytics in your code.
You need to set trakid In app.js platform ready like following -
$ionicPlatform.ready(function() {
if(typeof analytics !== undefined) {
analytics.startTrackerWithId("UA-872489XX-1"); // set your trakId
console.log("Analytics Initialized");
} else {
console.log("Google Analytics Unavailable");
}
});
})
If above won't work use following -
$ionicPlatform.ready(function() {
if(window.ga != undefined) {
window.ga.startTrackerWithId("UA-872489XX-1");
} else {
console.log("Google Analytics Unavailable");
}
})
Then in each controller just set view like following -
googleanalyticsApp.controller('ExampleController', function($scope,$cordovaGoogleAnalytics) {
// Here no need to wait to load analytics as already loaded
analytics.trackView('APP first screen');
})

Ionic Exit APP not working

I'm trying to set ng-click="ionic.Platform.exitApp()" to a button but it dosen't work, i also tried ng-click="exitApp()" and ng-click="$ionic.Platform.exitApp()"but it dosen't work either.
I'm using Ionic Creator, according to this docs http://ionicframework.com/docs/api/utility/ionic.Platform/ it should be quite simple, but i don't know how to correctly set this adjust. I also tryied to add a module into Ionic Creator as:
angular.module('app.exit', []).exit(function($scope) {
ionic.Platform.ready(function(){
// will execute when device is ready, or immediately if the device is already ready.
});
var deviceInformation = ionic.Platform.device();
var isWebView = ionic.Platform.isWebView();
var isIPad = ionic.Platform.isIPad();
var isIOS = ionic.Platform.isIOS();
var isAndroid = ionic.Platform.isAndroid();
var isWindowsPhone = ionic.Platform.isWindowsPhone();
var currentPlatform = ionic.Platform.platform();
var currentPlatformVersion = ionic.Platform.version();
ionic.Platform.exitApp(); // stops the app
});
Adding this module console log prints: "exit is not a function"
Thanks
You can always try to use this ExitApp Plugin
To use, add the plugin by cordova plugin add cordova-plugin-exitapp and then add the following code to your app.js
angular.module('XYZApp', ['ionic'])
.run(function($ionicPlatform, $ionicHistory, $rootScope) {
$ionicPlatform.ready(function() {
// For exit on back button press
$ionicPlatform.registerBackButtonAction(function(e) {
if ($rootScope.backButtonPressedOnceToExit) {
navigator.app.exitApp(); // or // ionic.Platform.exitApp(); both work
} else if ($ionicHistory.backView()) {
$ionicHistory.goBack();
} else {
$rootScope.backButtonPressedOnceToExit = true;
// "Press back button again to exit" : show toast
setTimeout(function() {
$rootScope.backButtonPressedOnceToExit = false;
}, 2000); // reset if user doesn't press back within 2 seconds, to fire exit
}
e.preventDefault();
return false;
}, 101);
});
}
Thanks Chiragh Dewan,
But it dosen't work either, i added this:
angular.module('XYZApp', []).run(function($ionicPlatform, $ionicHistory, $rootScope) {
$ionicPlatform.ready(function() {
// For exit on back button press
$ionicPlatform.registerBackButtonAction(function(e) {
if ($rootScope.backButtonPressedOnceToExit) {
navigator.app.exitApp(); // or // ionic.Platform.exitApp(); both work
} else if ($ionicHistory.backView()) {
$ionicHistory.goBack();
} else {
$rootScope.backButtonPressedOnceToExit = true;
// "Press back button again to exit" : show toast
setTimeout(function() {
$rootScope.backButtonPressedOnceToExit = false;
}, 2000); // reset if user doesn't press back within 2 seconds, to fire exit
}
e.preventDefault();
return false;
}, 101);
});
}
);
... into a new JS file called exit.js
Then i added the module XYZApp into the Ionic Creator code settings Angular modules
The last step i added the cordova-plugin-exitapp
I tryied ng-click="navigator.app.exitApp()" and ng-click="ionic.Platform.exitApp()" and none of them seems to work.
U can see the project here: https://creator.ionic.io/share/html/2d9b0126751e#/menu/contacto
Thanks

interstitial ad don't show up (AngularJs)

my app.js :
$ionicPlatform.ready(function() {
var admobid = {};
// select the right Ad Id according to platform
if( /(android)/i.test(navigator.userAgent) ) {
admobid = { // for Android
interstitial: 'ca-app-pub-3940256099942544/1033173712'
};
} else {
admobid = { // for Windows Phone
interstitial: 'ca-app-pub-3940256099942544/1033173712'
};
}
if(window.AdMob) AdMob.prepareInterstitial({
adId:admobid.interstitial,
isTesting:true,
autoShow:false
});
my controller.js :
.controller('ChatsCtrl', function($scope, Chats) {
$scope.$on('$ionicView.beforeEnter', function(e) {
if (window.AdMob) AdMob.showInterstitial();
});
$scope.$on('$ionicView.beforeLeave', function(e) {
if (window.AdMob) AdMob.showInterstitial();
});
})
I'm building an ionic framework app for android and i need to add it a interstitial ad, it should run whenever user enters chats tab.
Here is my code, i copied most part of it from http://pointdeveloper.com/how-to-add-interstitial-ads-on-navigation-to-ionic-framework-apps/ .
I changed interstitial: 'ca-app-pub-3940256099942544/1033173712' parts with my own key but it didn't work. Where is the problem?
(I'm testing it in both my android phone(Nexus 5) and Genymotion android emulator)
The internal life cicle for interstitial ads when requestInterstitialAd is called is the following one, you can read more here: https://github.com/appfeel/admob-google-cordova/wiki/requestInterstitialAd
requestInterstitialAd();
options.autoShowInterstitial == true ? showInterstitial : raise(admob.events.onAdLoaded)
So if you have set options.autoShowInterstitial = true, then it should be automatically shown, otherwiese, you should call admob.requestInterstitialAd and wait for admob.events.onAdLoaded with atType === 'interstitial' to be raised. Then you should do something like:
document.addEventListener(admob.events.onAdLoaded, function (e) {
if (e.adType === admob.AD_TYPE.INTERSTITIAL) {
admob.showInterstitialAd();
}
});

How to get AdMob Pro working in Ionic

I am getting 'AdMob' is undefined when I try to execute the code below. I am trying to use the Cordova AdMob Pro plugin, but can't get past the undefined error(s). I can't confirm if the plugin is even being loaded.
Here are the versions I'm using: AngularJS v1.3.4, Cordova v4.1.2, Ionic v1.2.8. I'm running the code on a Galaxy S5 phone running Android version 4.4.4.
I've tried adding this code in both the app.js and the controller.
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
console.log('window.cordova.plugins: ' + window.cordova.plugins); //returns object
console.log('window.cordova.plugins.AdMob: ' + window.cordova.plugins.AdMob); //returns undefined
console.log('window.AdMob: ' + window.AdMob); //returns undefined
console.log('AdMob: ' + AdMob); //returns undefined
console.log('window.AdmobAd: ' + window.AdmobAd); //returns undefined
console.log('AdmobAd: ' + AdmobAd); //returns undefined
if (window.AdMob || AdMob) {
alert('admob plugin found');
var admob_key = (device.platform == "Android") ? "ADMOB_KEY" : "IOS_PUBLISHER_KEY";
var admob = window.AdMob;
admob.createBannerView(
{
'publisherId': admob_key,
'adSize': admob.AD_SIZE.BANNER,
'bannerAtTop': false
},
function () {
admob.requestAd(
{ 'isTesting': false },
function () {
admob.showAd(true);
},
function () { console.log('failed to request ad'); }
);
},
function () { console.log('failed to create banner view'); }
);
}
});
Just went through this as well and found that the error is from trying to find 'AdMob' when that doesnt exist on if (window.AdMob || AdMob)
if you just use 'if (window.AdMob) {' you should be fine.
I just developed an AngularJS extension on top of AdMob Pro so you can interact better with this Cordova Plugin.
Here is the repository: https://github.com/santonocito/angular-admobpro
Here an example of how you can use it with Ionic:
angular.module('yourApp', ['ionic', 'admob'])
.run(function($rootScope, $state, $log, $adMob) {
$ionicPlatform.ready(function() {
// AdMob
if(window.AdMob) {
var admobid;
if (device.platform == "Android") {
admobid = { // for Android
banner: 'ca-app-pub-your-ad-key',
interstitial: 'ca-app-pub-your-ad-key'
};
} else {
admobid = { // for iOS
banner: 'ca-app-pub-your-ad-key',
interstitial: 'ca-app-pub-your-ad-key'
};
}
$adMob.createBanner( {
adId: admobid.banner,
autoShow: true,
bgColor: 'black',
position: $adMob.position.BOTTOM_CENTER
});
$adMob.prepareInterstitial({
adId: admobid.interstitial,
autoShow: false
});
}
});
});
1.install admob phonegap plugin
cordova plugin add admob
init admob plugin,init plugin after deviceready event
admob.initAdmob("admob banner ID","admob interstitial ID");
3.show admob ads
admob.showBanner(admob.BannerSize.BANNER,admob.Position.TOP_APP);//show banner at the top of app
ref:https://github.com/admob-google/admob-cordova

How to cancel routeChange or browser reload when form is incomplete?

There are scenarios like:
Browser reload,
Closing tab
closing browser
Route change (e.g. clicking on links)
Browsers back button was clicked. or history.go(-1). 3 fingers swipe on Macbooks.
that we would want to prevent if the user has filled some sort of form or is in middle of the writing.
I have written this code which works fine but its absolutely not useful if I cant implement it on several textfields. Currently it only check if we are at #/write url. It doesnt check any inputs.
Whats the angular way to deal with this? Whats the best way to check the target textfield. Is a directive the solution?
something like:
<input type="text" warningOnLeave ng-model="title"/>
or
<form warningOnLeave name="myForm">...</form>
$rootScope.$on('$locationChangeStart', function(event, current, previous){
console.log(current);
console.log(previous);
// Prevent route change behaviour
if(previous == 'http://localhost/#/write' && current != previous){
var answer = confirm ("You have not saved your text yet. Are you sure you want to leave?");
if (!answer)
event.preventDefault();
}
});
/**
Prevent browser behaviour
*/
window.onbeforeunload = function (e) {
if(document.URL == 'http://localhost/#/write'){
e = e || window.event;
// For IE and Firefox prior to version 4
if (e) {
e.returnValue = 'You have not saved your text yet.';
}
// For Safari
return 'You have not saved your text yet.';
}
else
return;
}
Forms in Angular have the $dirty/$pristine properties that mark if the user has/hasn't interacted with the form controlls, and the accompanying method $setPristine(). I would base the desired functionality on this feature. Consider:
<form name="theForm" ng-controller="TheCtrl" ...>
This puts the form in the scope of the controller, under the given name. Then something like:
controller("TheCtrl", function($scope, $rootScope) {
$rootScope.$on('$locationChangeStart', function(event, current, previous) {
if( $scope.theForm.$dirty ) {
// here goes the warning logic
}
});
});
Do not forget to call $scope.theForm.$setPristine() where appropriate (i.e. after submitted or cleared).
For the window unload case, you will have to watch the $dirty flag. So in the previous controller:
$scope.$watch("theForm.$dirty", function(newval) {
window.myGlobalDirtyFlag = newval;
});
You have to do this because the window.onbeforeunload event does not have access to the scope of the form. Then, in the global section of your app:
window.onbeforeunload = function (e) {
if( window.myGlobalDirtyFlag === true ) {
// warning logic here
}
};
Again, you may want to clear the global dirty flag when the scope is destroyed, so in the controller:
$scope.$on("$destroy", function() {
window.myGlobalDirtyFlag = false;
});

Resources