I have a ion-tab-bar component and I want to display a BannerAd. I used the following library for my ionic app.

https://github.com/capacitor-community/admob

To display the add I have to use margin, because the add will overlaps the tab bar. I have read the doc.

Margin Banner. Default is 0px; If position is BOTTOM_CENTER, margin is be margin-bottom. If position is TOP_CENTER, margin is be margin-top.

I have two methods to display ads in my app. The BannerAd method is only for the pages without the ion-tab-bar. The other for the pages that contains a ion-tab-bar. This is my code:

admob.service.ts

    import { Injectable } from '@angular/core';
    import { Platform } from '@ionic/angular';
    import { AdMob, BannerAdOptions, BannerAdSize, BannerAdPosition } from '@capacitor-community/admob';
    
    @Injectable({
        providedIn: 'root'
    })
    export class AdMobService {
    
        constructor(private platform: Platform) { }
    
        async bannerAd(admobId: string) {
            const options: BannerAdOptions = {
                adId: admobId,
                adSize: BannerAdSize.FULL_BANNER,
                position: BannerAdPosition.BOTTOM_CENTER,
                margin: 0,
                isTesting: true,
                npa: true
            };
    
            await this.platform.ready();
    
            await AdMob.initialize({
                requestTrackingAuthorization: true,         
                initializeForTesting: true,
            }).catch(err => console.error('Could not init Admob', err));
    
            await AdMob.showBanner(options).catch(err => console.error('Could not init Admob banner', err));
        }
    
        async bannerAdTab(admobId: string) {
            const options: BannerAdOptions = {
                adId: admobId,
                adSize: BannerAdSize.FULL_BANNER,
                position: BannerAdPosition.BOTTOM_CENTER,
                margin: 50,
                isTesting: true,
                npa: true
            };
    
            await this.platform.ready();
    
            await AdMob.initialize({
                requestTrackingAuthorization: true,      
                initializeForTesting: true,
            }).catch(err => console.error('Could not init Admob', err));
    
            await AdMob.showBanner(options).catch(err => console.error('Could not init Admob banner', err));
        }
    }

I use the methods like this is my page:

home.page.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { IonContent } from '@ionic/angular';
import { AdMobService } from 'src/app/services/admob.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {

  constructor(private admob: AdMobService) { }

  ngOnInit() {
    this.admob.bannerAd("admobid");
  }
 
}

And in the tab page like this:

tab.page.ts

import { Component, OnInit } from '@angular/core';
import { AdMobService } from 'src/app/services/admob.service';

@Component({
  selector: 'app-tab',
  templateUrl: './tab.page.html',
  styleUrls: ['./tab.page.scss'],
})
export class TabPage implements OnInit {

  constructor(private admob: AdMobService) { }

  ngOnInit() {
    this.admob.bannerAdTab("AdmobId");
  }
}

The bannerAd method works good but when I navigate to my tabs page it doesn't apply the margin.

How can I use the different admob methods in my pages?

Second question:

Do I use the admob service in the component or the page where the component is called?

CodePudding user response：

You need to add an event listener for when the banner ad sizes changes, then add your margin to your ion-router-outlet.

Try something like this:

import { Injectable } from '@angular/core';
    import { Platform } from '@ionic/angular';
    import { AdMob, BannerAdOptions, BannerAdSize, BannerAdPosition, BannerAdPluginEvents } from '@capacitor-community/admob';
    
    @Injectable({
        providedIn: 'root'
    })
    export class AdMobService {
        
        private appMargin:number = 0;

        constructor(private platform: Platform) {
            this.init();
        }
        
        async init() {

           await this.platform.ready();

           await AdMob.initialize({
                requestTrackingAuthorization: true,         
                initializeForTesting: true,
           }).catch(err => console.error('Could not init Admob', err));

           this.eventOnAdSize = AdMob.addListener(BannerAdPluginEvents.SizeChanged, (info: any) => {
            // Subscribe Change Banner Size
            this.appMargin = parseInt(info.height, 10);
            if (this.appMargin > 0) {
                const app: HTMLElement = document.querySelector('ion-router-outlet');
                app.style.marginBottom = this.appMargin   'px';
            }
        });
        }

        async bannerAd(admobId: string) {
            const options: BannerAdOptions = {
                adId: admobId,
                adSize: BannerAdSize.FULL_BANNER,
                position: BannerAdPosition.BOTTOM_CENTER,
                margin: 0,
                isTesting: true,
                npa: true
            };
       
            await AdMob.showBanner(options).catch(err => console.error('Could not init Admob banner', err));
        }
    
        async bannerAdTab(admobId: string) {
            const options: BannerAdOptions = {
                adId: admobId,
                adSize: BannerAdSize.FULL_BANNER,
                position: BannerAdPosition.BOTTOM_CENTER,
                margin: 50,
                isTesting: true,
                npa: true
            };
        
            await AdMob.showBanner(options).catch(err => console.error('Could not init Admob banner', err));
        }
    }