Ionic admob广告出现在离子6电容器4中的标签栏上

zqdjd7g9  于 2023-03-16  发布在  Ionic
关注(0)|答案(1)|浏览(152)

我正在尝试整合谷歌广告的应用程序。我们可以显示在页面上。但广告来的标签栏或标题。所以要么标签栏消失或标题消失。
我想在内容下方和标签栏上方显示广告。
基本上我可以在内容之间显示广告。
下面是我的代码:

import { Component, OnInit, Injectable  } from '@angular/core';
import { AdMob, AdMobBannerSize, AdOptions,
  BannerAdOptions, BannerAdPluginEvents, BannerAdPosition, BannerAdSize,} from '@capacitor-community/admob';

@Component({
  selector: 'app-mypage',
  templateUrl: './mypage.page.html',
  styleUrls: ['./mypage.page.scss'],
})

@Injectable({
  providedIn: 'root'
})

export class MyPage implements OnInit {

  tottalnoofyears: number;

  constructor() {this.initialize(); }

    async initialize() {
    const { status } = await AdMob.trackingAuthorizationStatus();

    AdMob.initialize({
      requestTrackingAuthorization: true,
      initializeForTesting: true,
    });

    this.showBanner();
  }

  async showBanner() {
    const adId = 'ca-app-pub-MYID';
    const options: BannerAdOptions = {
      adId,
      adSize: BannerAdSize.ADAPTIVE_BANNER,   
      position: BannerAdPosition.BOTTOM_CENTER,
      margin: 0,
      isTesting: false,
    };

    await AdMob.showBanner(options);
  }

  ngOnInit() {
    const d = new Date();
    const year = d.getFullYear();
    const startyear = 2000;
    this.tottalnoofyears = year - 2000;
  }

}
disho6za

disho6za1#

您可以将其添加为initialize()-函数的一部分。
当你打开/关闭你的广告横幅时,它会触发一个调整大小事件。你可以用它来实际抓取你的应用主体和
a)如果未显示任何内容,请将应用程序的底部边距设置为0。
B)如果您的横幅显示,抓住它的高度,仍然尊重安全区域空间来计算和分配您需要向上移动标签/内容的边距。

this.resizeHandler = 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('body');
        const bodyStyles = window.getComputedStyle(body);
        const safeAreaBottom = bodyStyles.getPropertyValue("--ion-safe-area-bottom);
        app.style.marginBottom = `calc(${safeAreaBottom} + ${appMargin}px)`;                
    }
});

相关问题