How to use different admob methods in Ionic 6/Capacitor?

Question

. 。 Answers to this question are eligible for a +100 reputation bounty. Fearcoder is looking for an : ：

Looking for a solution for this problem

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?

Answer 1

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));
        }
    }