Hello everyone, I am new to ionic and capacitor and I want to integrate google admob in my app. I am able to see ads in the app but it is not coming at the place where I want.
I want ads to come inside the content in a
<ion-label class="blackColor">Deals</ion-label>
</ion-tab-button>
import { AdMob, AdMobBannerSize, AdOptions,
BannerAdOptions, BannerAdPluginEvents, BannerAdPosition, BannerAdSize,} from ‘@capacitor-community/admob’;
constructor() {this.initialize(); }
async initialize() {
const { status } = await AdMob.trackingAuthorizationStatus();
AdMob.initialize({
requestTrackingAuthorization: true,
initializeForTesting: true,
});
this.eventOnAdSize = AdMob.addListener(BannerAdPluginEvents.SizeChanged, (info: AdMobBannerSize) => {
const appMargin = info.height;
const app: HTMLElement = document.querySelector(‘ion-router-outlet’);
if (appMargin === 0) {
app.style.marginBottom = '0px';
return;
}
if (appMargin > 0) {
const body = document.querySelector('#ShowMyAd');
const bodyStyles = window.getComputedStyle(body);
const safeAreaBottom = bodyStyles.getPropertyValue("--ion-safe-area-bottom");
app.style.marginBottom = `calc(${safeAreaBottom} + ${appMargin}px)`;
}
});
this.showBanner();
}
async showBanner() {
//alert(‘Innnn’);
//const adId = isPlatform(‘ios’) ? ‘ios-ad-id’ : ‘android-ad-unit’;
const adId = ‘ca-app-pub-MYID’;
const options: BannerAdOptions = {
adId,
adSize: BannerAdSize.ADAPTIVE_BANNER, //BANNER
position: BannerAdPosition.BOTTOM_CENTER, //BOTTOM_CENTER
margin: 0,
isTesting: false,
//npa: true,
//npa set to true to see non personalized ads
};
await AdMob.showBanner(options);
}
