Implementing admob is app


#1

Currently I am trying to implement admob on my app. I am using this plugin, https://github.com/floatinghotpot/cordova-plugin-admob.

So far there is no problem on requesting ads. When I try to place the ads on the bottom of screen, I realize that the ads is place as overlay on-top of the screen. This has create an issue to me, as I am using ionic-bottom-tab for my app, but the add covered the tab behind the screen, which make user was unable to tap on the tab.

Here is the 2 image that describe my problem,

anyone can help?


#2

I’d suggest you put a footer in the app for the ad to go into.

<ion-footer-bar align-title="left" class="bar-light">
  <p>You're ad goes here</p>
</ion-footer-bar>

#3

Your suggestion not working. Furthermore I have to say sorry, seem like the ads is not overlay on the screen, but the ionic tabs and footer bar is conflict with the admob appearance. I have make a quick testing project for this issue.

Below is the source code

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
	<title>Apache Cordova (Angular Seed)</title>
	<!-- <link href="http://code.ionicframework.com/0.9.27/css/ionic.min.css" rel="stylesheet" type="text/css" /> -->
	<link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="lib/console.log-wrapper/consolelog.min.js"></script>
	<script type="text/javascript" src="lib/console.log-wrapper/consolelog.detailprint.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<!-- <script src="http://code.ionicframework.com/0.9.27/js/ionic.bundle.min.js"></script> -->
	<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
	<script type="text/javascript" src="cordova.js"></script>
	<script type="text/javascript">
		angular.module('OneBookApp', ['ionic'])
			.config(function($stateProvider, $urlRouterProvider) {
				$stateProvider
					.state('home', { url: '/home', templateUrl: 'templates/home.html' })
					.state('about', { url: '/about', templateUrl: 'templates/about.html', controller: 'AboutCtrl' })
					.state('list', { url: '/list', templateUrl: 'templates/list.html' });

					$urlRouterProvider.otherwise('/home');
			})
			.controller('AboutCtrl', function($scope) {
				$scope.showAdView = function() { window.plugins.AdMob.showAd( true ); };
				$scope.hideAdView = function() { window.plugins.AdMob.showAd( false ); };
				$scope.logTabs = function() {
					log( $('div.tabs').position().top );
					$('div.tabs').offset( { top: 100, left: 0 });
					log( $('div.tabs').position().top );
				};
			});

		ionic.Platform.ready(function() {
			log('Temp');
			try {
					var _adMob = window.plugins.AdMob;
					var _dummyCallback = function() {};
					_adMob.createBannerView(
						{ 'publisherId': 'admobId', 'adSize': _adMob.AD_SIZE.BANNER, 'bannerAtTop': false }
						, function() {
							log('Ad Banner Created');
							_adMob.requestAd({ 'isTesting': true }, _dummyCallback, _dummyCallback);
							angular.bootstrap(document, ['OneBookApp']);
						}
						, function() {
							log('[!!!!!] Unable To Create Ad Banner');
						}
					);
				}
				catch(e){ log('Missing Admob Plugin (Cordova):', e); angular.bootstrap(document, ['OneBookApp']); }
		});
	</script>
</head>
<body>
	<!-- <ion-nav-bar animation="nav-title-slide-ios7" type="bar-positive"
							 back-button-type="button-icon" back-button-icon="ion-ios7-arrow-back">
	</ion-nav-bar> -->
	<ion-nav-bar class="nav-title-slide-ios7 bar-positive">
		<ion-nav-back-button class="button-icon ion-arrow-left-c"></ion-nav-back-button>
	</ion-nav-bar>

	<ion-nav-view animation="slide-left-right"></ion-nav-view>

	<script id="templates/home.html" type="text/ng-template">
		<ion-view title="Home" hide-nav-bar="true">
			<ion-content has-header="false" has-tabs="false" padding="true" scroll="false" class="ob-index">
				<div class="row">
					<div class="col col-20"></div>
					<div class="col">
						<a class="button button-block button-energized icon-left ion-ios7-information" href="#/list">
							<span>List</span>
						</a>
						<a class="button button-block button-balanced icon-left ion-ios7-lightbulb" href="#/about">
							<span>About App</span>
						</a>
					</div>
					<div class="col col-20"></div>
				</div>
			</ion-content>
		</ion-view>
	</script>
	<script id="templates/list.html" type="text/ng-template">
		 <ion-view title="List">
			 <ion-content has-header="true" padding="true">
				 List here...
			 </ion-content>
		</ion-view>
	</script>
	<script id="templates/about.html" type="text/ng-template">
		<ion-view>
			<ion-tabs class="tabs-bottom tabs-positive slide-left-right">
				<ion-tab title="Tab 1" icon-on="ion-ios7-lightbulb" icon-off="ion-ios7-lightbulb-outline">
					<ion-content padding="true">
						<div>Tab 1 Content here...</div>
						<div class="button" ng-click="showAdView()">Show Ad BannerV</div>
						<div class="button" ng-click="hideAdView()">Hide Ad BannerV</div>
						<div class="button" ng-click="logTabs()">Log Tabs</div>
					</ion-content>
				</ion-tab>
				<ion-tab title="Tab 2" icon-on="ion-ios7-lightbulb" icon-off="ion-ios7-lightbulb-outline">
				<ion-header-bar align-title="left" class="bar-positive">
  <div class="buttons">
    <button class="button" ng-click="doSomething()">Left Button</button>
  </div>
  <h1 class="title">Title!</h1>
  <div class="buttons">
    <button class="button">Right Button</button>
  </div>
</ion-header-bar>
					<ion-content padding="true">
						Tab 2 Content here...
					</ion-content>
				</ion-tab>
			</ion-tabs>
		</ion-view>
	</script>
</body>
</html>

Here is the screenshot that I make from virtual machine emulator:

I create the button just to toggle the visibility of the advertisement, in order to make the tab-bar showing. The advertisement is not overlay, because when I try to put the tab-bar and advertisement at the top-screen, the ads would just make the tab-bar disappear. I also try to make the position of tab-bar when the ad is showing, but still the same, the tab-bar not showing at all.

Anyone can help on this would be appreciated.


#4

It’s really tough to help just from pasted in code. Many / most of us have never touched AdMob. If you setup a CodePen sample, we can try to work it out.


#5

I found the root cause.

The reason is because the admob shown, it would trigger some what the softkeyboard event, this make the body to add the css class ‘hide-footer’, which lead to the footer display:none.

I am not sure why the softkeyboard would make the css class ‘hide-footer’ being added to the document body.

It is not possible to test on codepen, because the admob I am using the cordova plugin, where additional Java code is required, so codepen cannot handle.

Anyway thx for ur reply.


#6

@bugmenot081 were you able to get it working in the end? I’m having the same issue. The AdMob Cordova plugin shifts the entire Ionic app either up or down (say, 40px or so) and hides tabs or other components. Unfortunately that <ionic-footer><p> bit won’t work, because (as a Cordova plugin, not a web component) you can’t specify location in html for the ads.


#7

It is actually not shifting footer, it is hidden. Once the admob banner is shown, a css class, ‘hide-footer’ would being added to the body, this make the footer being hidden because of ‘display: hidden’ css being applied. My solution is whenever the admob banner being shown, then remove the css class ‘hide-footer’ from the body. Hope it help :). For your info, the ionic version I am using is 0.9.27. So the css class name might be different if u are using different version.

If u wan the debug this problem further, u may try out this approach https://developers.google.com/chrome-developer-tools/docs/remote-debugging


AdMob banner causes scrolled content to get stuck
#8

Hi, when AdMob plugin is used, the banner view is a separate view, not a DOM element in web content. So, use any style inside the web content has no impact on the banner and will not work.

Solution:

By default, it will push webview up or down to avoid overlap.

call following code before call createBannerView()

window.plugins.AdMob.setOptions( {
bannerAtTop: false, // set to true, to put banner at top
overlap: false, // set to true, to allow banner overlap webview
offsetTopBar: false, // set to true to avoid ios7 status bar overlap
isTesting: false, // receiving test ad
autoShow: true // auto show interstitial ad when loaded
});


#9

I’m using the AdMob plugin pro and still seeing this problem on ios 7. Has anyone verified that using the Admob plugin pro fixes this problem? Or has anyone found a workaround?


#10

You can find extended AdMob support here: https://github.com/Dharmoslap/ng-cordova


#11

Hi,

I had the same problem, wanted to integrate AdMob in my app, tried to use cordova admob plugin, apparently you have to use cordova-admob-pro (it’s great by the way).

I wrote a little post about how to use it here: http://redwanhilali.com/ionic-admob-integration/

I hope this will help someone in the future.


#12

Its my youtube guide I hope it will help your problem


#13

After spending 2 days and reading lot of docs i got it working, Here i am sharing by blog post which explains the steps, index.html file complete code for download and sample apk download to see how it works.
I hope someone find it useful.
admob ads with ionic