Ionic AdMob

17 Mar 2025 | 4 分钟阅读

AdMob 是一个面向移动应用的 Google 广告平台，它使开发者能够轻松地从他们的移动应用程序中赚钱。它提供高质量的货币广告。它允许开发者快速推广他们的应用程序。它还可以通过结合全球广告商的需求、创新的广告格式和先进的应用程序货币化技术来最大化每次展示的价值。它适用于 Android 和 iOS 应用程序。

虽然广告并不总是赚钱的最佳方式，但它是从移动应用程序或网站中赚取一些钱的最简单方法。在本教程中，我们将学习如何将 Google AdMob 添加到 Ionic 应用程序中。在这里，我们将介绍两种类型的广告平台，即横幅广告和插页式广告。

横幅广告

横幅广告显示矩形广告，可以固定在屏幕的顶部或底部。它占据应用程序布局的一部分，可以在指定的时间段后自动刷新。这意味着用户将定期看到新广告，即使他们停留在应用程序的同一屏幕上。

插页式广告

插页式广告为移动应用程序中的用户提供丰富的交互式全屏广告。这些类型的广告旨在放置在内容之间。它显示可以在自然中断或过渡点出现的静态或视频广告，并在不中断应用程序体验的情况下创建引人入胜的品牌体验。

如果您想在您的应用程序中使用广告，您需要在 Google AdMob 上拥有一个帐户。因此，如果您还没有 AdMob 帐户，请先在 AdMob 上创建它。现在，让我们逐步了解如何将 AdMob 用于 Ionic 应用程序。

步骤 1： 创建一个新项目。您可以在此处了解如何从 Ionic 4 创建一个项目。如果您已经有一个 Ionic 项目，则可以跳过此步骤。

步骤 2： 创建一个 Google AdMob 帐户。要显示应用程序中的广告，您需要设置 AdMob 帐户。如果您尚未创建 AdMob 帐户，请单击此处。现在，登录到 AdMob 控制台。然后，首先，您需要添加您的应用程序，如下面的屏幕所示。

将您的应用程序成功添加到 Google AdMob 后，您将看到以下屏幕。

步骤 3： 创建 Ionic 应用程序后，您必须导航到您的项目并使用以下命令安装 AdMob Cordova 插件。此命令将安装 Cordova 插件和 Ionic Native 包。

$ cd myIonicApp

$ cordova plugin add cordova-plugin-admob-free --save --variable ADMOB_APP_ID="<YOUR_ANDROID_ADMOB_APP_ID_AS_FOUND_IN_ADMOB>"

$ npm install @ionic-native/admob-free

要查找 API ID，请转到 AdMob 控制台->应用->您的应用->应用设置->应用信息。

步骤 4： 接下来，打开 app.module.ts 文件并导入 AdMob 插件。此外，我们需要在提供程序中设置此插件，如下所示。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { AdMobFree } from '@ionic-native/admob-free/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    AdMobFree,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy}
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

将 AdMob 插件添加为提供程序后，我们将能够在应用程序中需要它的任何地方注入它。

步骤 5： 让我们创建一个横幅广告。为此，您需要转到 AdMob 控制台->yourApp->AdUnits，然后出现以下屏幕。

现在，选择横幅并添加以下详细信息，如下所示的图像。

步骤 6： 打开 home.page.ts 文件并添加以下代码片段。创建横幅后，它将显示在您的应用程序底部。

import { Component } from '@angular/core';
import { AdMobFree, AdMobFreeBannerConfig } from '@ionic-native/admob-free/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  constructor(public admob: AdMobFree) {
  }
  showBanner() {
      const bannerConfig: AdMobFreeBannerConfig = {
          isTesting: true, // Remove in production
          autoShow: true
         //id: Your Ad Unit ID goes here
          id: 'ca-app-pub-1304665038199161/9978704243'
      };
      this.admob.banner.config(bannerConfig);
      this.admob.banner.prepare().then(() => {
          // success
      }).catch(e => console.log(e));
  }
}

步骤 7： 接下来，打开 home.page.html 并插入以下代码。它负责用户界面。

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic AdMob
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
    <ion-button (click)="showBanner()" expand="full">Show Banner</ion-button><br/>
</ion-content>

步骤 8： 现在，运行该应用程序。您将在应用程序底部看到广告。

步骤 9： 同样，如果您想为全页创建广告，请选择插页式广告并在 home.page.ts 文件中添加以下代码片段。创建插页式广告后，它将显示在应用程序的整个屏幕上。

import { Component } from '@angular/core';
import { AdMobFree, AdMobFreeBannerConfig, AdMobFreeInterstitialConfig } from '@ionic-native/admob-free/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  constructor(public admob: AdMobFree) {
  }
  showInterstitial() {
    const interstitialConfig: AdMobFreeInterstitialConfig = {
        isTesting: true, // Remove in production
        autoShow: true
        //id: Your Ad Unit ID goes here.
    };
    this.admob.interstitial.config(interstitialConfig);
    this.admob.interstitial.prepare().then(() => {
        // success
    });
  }
}

步骤 10： 接下来，打开 home.page.html 并插入以下代码。它负责用户界面。

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic AdMob
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
    <ion-button (click)="showInterstitial()" expand="full">Show Interstitial</ion-button>
</ion-content>

步骤 11： 现在，运行该应用程序。您将在应用程序的整个屏幕上看到广告。

下一个主题Ionic vs React Native