バナー広告

プラットフォームを選択: Android iOS Unity Flutter

バナー広告は、アプリのレイアウトの一部に表示される長方形の広告です。固定されたアダプティブ バナーは、ユーザーがアプリを操作している間、画面の上部または下部に固定された状態で画面に表示される、固定アスペクト比の広告です。

このガイドでは、アンカー アダプティブ バナー広告を Android アプリに読み込む方法について説明します。

前提条件

  • スタートガイドの手順を完了していること。
  • 省略可: バナー広告の実装例として、次のサンプルアプリのいずれかを選択します。

必ずテスト広告でテストする

アプリの開発とテストでは必ずテスト広告を使用し、配信中の実際の広告は使用しないでください。実際の広告を使用すると、アカウントが停止される可能性があります。

テスト広告を読み込むには、次に示す Android バナー向けのテスト専用広告ユニット ID を使う方法が便利です。

/21775744923/example/adaptive-banner

この ID は、すべてのリクエストに対してテスト広告を返すように設定されており、アプリのコーディング、テスト、デバッグで使用することができます。なお、アプリを公開する前に、必ずテスト用 ID をご自身の広告ユニット ID に置き換えてください。

Google Mobile Ads SDK のテスト広告の仕組みについて詳しくは、テスト広告を有効にするをご覧ください。

広告ビューを定義する

XML レイアウト

レイアウト XML ファイルにビューを追加して、アンカー付きアダプティブ バナー広告のコンテナとして機能するようにします。

<!-- Ad view container that fills the width of the screen and adjusts its
    height to the content of the ad. -->
<FrameLayout
        android:id="@+id/ad_view_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_alignParentBottom="true" />

Jetpack Compose

  1. JetpackComposeDemo/compose-util モジュールを含めます。このモジュールには、AdView オブジェクトとアセットを構成するためのヘルパーが含まれています。

  2. compose-util モジュールから BannerAd クラスを構成します。


// Place the ad view at the bottom of the screen.
Column(modifier = modifier.fillMaxSize(), verticalArrangement = Arrangement.Bottom) {
  Box(modifier = modifier.fillMaxWidth()) { AdManagerBannerAd(adView, modifier) }
}

広告のサイズを設定する

AdSize を、幅が指定されたアンカー付きアダプティブ バナータイプに設定します。

Java

// Request an anchored adaptive banner with a width of 360.
adView.setAdSize(AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(this, 360));

Kotlin

// Request an anchored adaptive banner with a width of 360.
adView.setAdSize(AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(this, 360))

Jetpack Compose


// Set the adaptive banner ad size with a given width.
val adSize = AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(LocalContext.current, 360)
adView.setAdSize(adSize)

レイアウトに AdManagerAdView を追加する

広告サイズを使用して AdManagerAdView を作成し、アプリのレイアウトに追加します。

Java


// Create a new ad view.
adView = new AdManagerAdView(this);
adView.setAdUnitId(AD_UNIT);
// Request an anchored adaptive banner with a width of 360.
adView.setAdSize(AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(this, 360));

// Replace ad container with new ad view.
adContainerView.removeAllViews();
adContainerView.addView(adView);

Kotlin


// Create a new ad view.
val adView = AdManagerAdView(this)
adView.adUnitId = AD_UNIT_ID
// Request an anchored adaptive banner with a width of 360.
adView.setAdSize(AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(this, 360))
this.adView = adView

// Replace ad container with new ad view.
binding.adViewContainer.removeAllViews()
binding.adViewContainer.addView(adView)

Jetpack Compose


val adView = remember { AdManagerAdView(context) }

// Setup and load the adview.
// Set the unique ID for this specific ad unit.
adView.adUnitId = ADMANANGER_ADAPTIVE_BANNER_AD_UNIT_ID

// Set the adaptive banner ad size with a given width.
val adSize = AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(LocalContext.current, 360)
adView.setAdSize(adSize)

// Place the ad view at the bottom of the screen.
Column(modifier = modifier.fillMaxSize(), verticalArrangement = Arrangement.Bottom) {
  Box(modifier = modifier.fillMaxWidth()) { AdManagerBannerAd(adView, modifier) }
}

広告を読み込む

AdManagerAdView を配置したら、次のステップとして広告を読み込みます。これは、AdManagerAdView クラスの loadAd() メソッドで行います。このメソッドは、1 つの広告リクエストに関するランタイムの情報(ターゲティング情報など)を保持する AdManagerAdRequest パラメータを受け取ります。

以下は、広告を読み込む方法の例です。

Java

AdManagerAdRequest adRequest = new AdManagerAdRequest.Builder().build();
adView.loadAd(adRequest);

Kotlin

val adRequest = AdManagerAdRequest.Builder().build()
adView.loadAd(adRequest)

成功すると、アプリにバナー広告を表示できるようになります。

広告を更新する

広告ユニットの更新を有効にしていれば、広告の読み込みに失敗しても、別の広告をリクエストする必要はありません。Google Mobile Ads SDK では、アド マネージャーの管理画面で指定した更新頻度が使用されます。更新を有効にしていない場合は、新しいリクエストを発行します。更新頻度の設定など、広告ユニットの更新について詳しくは、モバイルアプリでの広告の更新頻度をご覧ください。

広告リソースを解放する

バナー広告の使用が終了したら、バナー広告のリソースを解放できます。

広告のリソースを解放するには、ビュー階層から広告を削除し、その参照をすべて削除します。

Java

public void destroyBanner() {
  // Remove banner from view hierarchy.
  if (adView != null) {
    View parentView = (View) adView.getParent();
    if (parentView instanceof ViewGroup) {
      ((ViewGroup) parentView).removeView(adView);
    }

    // Destroy the banner ad resources.
    adView.destroy();
  }

  // Drop reference to the banner ad.
  adView = null;
}

Kotlin

fun destroyBanner() {
  // Remove banner from view hierarchy.
  val parentView = adView?.parent
  if (parentView is ViewGroup) {
    parentView.removeView(adView)
  }

  // Destroy the banner ad resources.
  adView?.destroy()

  // Drop reference to the banner ad.
  adView = null
}

広告イベント

広告のライフサイクルにおけるさまざまなイベント(読み込み、広告のインプレッションとクリック、広告の開始と終了など)をリッスンできます。バナーを読み込む前にコールバックを設定することをおすすめします。

Java

if (adView != null) {
  adView.setAdListener(
      new AdListener() {
        @Override
        public void onAdClicked() {
          // Code to be executed when the user clicks on an ad.
        }

        @Override
        public void onAdClosed() {
          // Code to be executed when the user is about to return
          // to the app after tapping on an ad.
        }

        @Override
        public void onAdFailedToLoad(@NonNull LoadAdError adError) {
          // Code to be executed when an ad request fails.
        }

        @Override
        public void onAdImpression() {
          // Code to be executed when an impression is recorded
          // for an ad.
        }

        @Override
        public void onAdLoaded() {
          // Code to be executed when an ad finishes loading.
        }

        @Override
        public void onAdOpened() {
          // Code to be executed when an ad opens an overlay that
          // covers the screen.
        }
      });
}

Kotlin

adView?.adListener =
  object : AdListener() {
    override fun onAdClicked() {
      // Code to be executed when the user clicks on an ad.
    }

    override fun onAdClosed() {
      // Code to be executed when the user is about to return
      // to the app after tapping on an ad.
    }

    override fun onAdFailedToLoad(adError: LoadAdError) {
      // Code to be executed when an ad request fails.
    }

    override fun onAdImpression() {
      // Code to be executed when an impression is recorded
      // for an ad.
    }

    override fun onAdLoaded() {
      // Code to be executed when an ad finishes loading.
    }

    override fun onAdOpened() {
      // Code to be executed when an ad opens an overlay that
      // covers the screen.
    }
  }

AdListener のオーバーライド可能なメソッドは、それぞれ広告のライフサイクルで生じるイベントに対応しています。

オーバーライド可能なメソッド
onAdClicked() onAdClicked() メソッドは、広告のクリックが記録されると呼び出されます。
onAdClosed() onAdClosed() メソッドは、ユーザーが広告のリンク先 URL にアクセスした後にアプリに戻ると呼び出されます。一時停止中のアクティビティを再開したり、アプリを操作可能な状態にするために必要な他の動作を実行したりするには、このメソッドを使用します。
onAdFailedToLoad() onAdFailedToLoad() メソッドは、パラメータを含む唯一のメソッドです。タイプ LoadAdError のエラー パラメータは、発生したエラーを示します。詳細については、広告読み込みエラーのデバッグのドキュメントをご覧ください。
onAdImpression() onAdImpression() メソッドは、広告のインプレッションが記録されると呼び出されます。
onAdLoaded() onAdLoaded() メソッドは、広告の読み込みが完了すると実行されます。たとえば、広告が確実に読み込まれるまで、アクティビティまたはフラグメントに AdManagerAdView が追加されないようにしたい場合は、このメソッドを使用できます。
onAdOpened() onAdOpened() メソッドは、広告からオーバーレイを開いて画面全体が覆われた場合に呼び出されます。

動画広告のハードウェア アクセラレーション

バナー広告で動画広告を正常に表示するには、ハードウェア アクセラレーションを有効にする必要があります。

ハードウェア アクセラレーションはデフォルトで有効になっていますが、一部のアプリでは無効にすることもできます。お客様のアプリで無効にできる場合、広告を使用する Activity クラスのハードウェア アクセラレーションを有効にすることをおすすめします。

ハードウェア アクセラレーションを有効にする

ハードウェア アクセラレーションをグローバルに有効にするとアプリが正しく動作しない場合は、個々のアクティビティでの設定が可能です。ハードウェア アクセラレーションを有効または無効にするには、AndroidManifest.xml<application> および <activity> 要素で android:hardwareAccelerated 属性を使用できます。次の例では、アプリ全体でハードウェア アクセラレーションを有効にしつつ、1 つのアクティビティで無効にしています。

<application android:hardwareAccelerated="true">
    <!-- For activities that use ads, hardwareAcceleration should be true. -->
    <activity android:hardwareAccelerated="true" />
    <!-- For activities that don't use ads, hardwareAcceleration can be false. -->
    <activity android:hardwareAccelerated="false" />
</application>

ハードウェア アクセラレーションを制御するオプションについて詳しくは、ハードウェア アクセラレーション ガイドをご覧ください。アクティビティが無効の場合、個々の広告ビューではハードウェア アクセラレーションを有効にできないため、アクティビティ自体でハードウェア アクセラレーションが有効になっている必要があります。

インプレッションの手動カウント

インプレッションの手動カウントは、アド マネージャーに直接入稿されるクリエイティブを含む直接販売キャンペーンと自社キャンペーンでのみ使用できます。バックフィルまたは第三者ネットワークの広告では使用できません。詳しくは、インプレッションとクリックのカウントをご覧ください。

インプレッションを記録するタイミングについて特別な条件がある場合は、インプレッションの信号をアド マネージャーに手動で送信できます。

Java

if (adManagerAdView != null) {
  adManagerAdView.setManualImpressionsEnabled(true);
}

Kotlin

adManagerAdView?.setManualImpressionsEnabled(true)

広告が正常に返され、画面に表示されていることを確認したら、インプレッションを手動で記録します。

Java

if (adManagerAdView != null) {
  adManagerAdView.recordManualImpression();
}

Kotlin

adManagerAdView?.recordManualImpression()

アプリ内イベント

アプリ内イベントを利用することで、アプリのコードにメッセージを送信する広告を作成できます。アプリは、送信されたメッセージに基づいて処理を行います。

アド マネージャー専用のアプリ内イベントをリッスンするには、AppEventListener を使用します。これらのイベントは、広告ライフサイクルのあらゆるタイミングで(onAdLoaded() が呼び出される前でも)発生する可能性があります。

AdManagerAdViewAppEventListener を設定します。

Java

if (adManagerAdView != null) {
  adManagerAdView.setAppEventListener(this);
}

Kotlin

adManagerAdView?.appEventListener = this

色名を含むアプリ内イベントに応じてアプリの背景色を変更する方法について、次に例を示します。

Java

@Override
public void onAppEvent(@NonNull String name, @NonNull String info) {
  if (name.equals("color")) {
    switch (info) {
      case "green":
        // Set background color to green.
        break;
      case "blue":
        // Set background color to blue.
        break;
      default:
        // Set background color to black.
        break;
    }
  }
}

Kotlin

override fun onAppEvent(name: String, info: String) {
  if (name == "color") {
    when (info) {
      "green" -> {
        // Set background color to green.
      }
      "blue" -> {
        // Set background color to blue.
      }
      else -> {
        // Set background color to black.
      }
    }
  }
}

また、対応するクリエイティブは次のとおりです。これは、色に関するアプリ内イベント メッセージをリスナーに送信します。

<html>
<head>
  <script src="//www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      // Send a color=green event when ad loads.
      admob.events.dispatchAppEvent("color", "green");

      document.getElementById("ad").addEventListener("click", function() {
        // Send a color=blue event when ad is clicked.
        admob.events.dispatchAppEvent("color", "blue");
      });
    });
  </script>
  <style>
    #ad {
      width: 320px;
      height: 50px;
      top: 0px;
      left: 0px;
      font-size: 24pt;
      font-weight: bold;
      position: absolute;
      background: black;
      color: white;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="ad">Carpe diem!</div>
</body>
</html>

API デモアプリでアプリ内イベントを実装するには、アド マネージャーによるアプリ内イベントの実装例をご覧ください。

Java Kotlin JetpackCompose

次のステップ

折りたたみ可能バナー

折りたたみ可能バナー広告は、最初は大きなオーバーレイとして表示され、小さいサイズに折りたたむためのボタンが付いたバナー広告です。パフォーマンスをさらに最適化する場合に、このバナーの使用をご検討ください。詳しくは、折りたたみ可能バナー広告をご覧ください。

インライン アダプティブ バナー

インライン アダプティブ バナーは、アンカー アダプティブ バナーよりも大きく、高さのあるバナーです。インライン アダプティブ バナーでは高さが変動するため、デバイス画面と同じ大きさで表示できます。スクロール可能なコンテンツにバナー広告を配置するアプリでは、アンカー アダプティブ バナー広告よりもインライン アダプティブ バナーの使用をおすすめします。詳しくは、インライン アダプティブ バナーをご覧ください。

その他のトピックを見る