如何在Ionic 6/Capacitor中使用不同的AdMob方法？

Question

如何在Ionic 6/Capacitor中使用不同的AdMob方法？

javascripthtmlangulartypescriptionic-framework

3

我有一个组件，我想显示一个BannerAd。我在我的ionic应用程序中使用了以下库。

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

要显示广告，我必须使用margin，因为广告会重叠在选项卡栏上。我已经阅读了文档。

Margin Banner. 默认值为0px; 如果位置是BOTTOM_CENTER，则margin-bottom为margin。如果位置是TOP_CENTER，则margin-top为margin。

我有两种方法来在我的应用中显示广告。BannerAd方法仅适用于没有ion-tab-bar的页面。另一个方法适用于包含ion-tab-bar的页面。这是我的代码：

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

我在我的页面中使用类似这样的方法：

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

而在像这样的选项卡页面中：

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

bannerAd 方法很好用，但当我导航到选项卡页面时，它不适用于margin。

我如何在我的页面中使用不同的 admob 方法？

第二个问题：

我是在组件中还是在调用该组件的页面中使用 admob 服务？

- Fearcoder

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- zeropsi · Accepted Answer

您需要为横幅广告尺寸更改添加事件监听器，然后将您的边距添加到ion-router-outlet中。

可以尝试以下代码：

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