ネイティブ広告を設定する

ネイティブ広告では、広告見出し、画像、プロンプト テキストなどの個別の広告アセットが提供され、アプリのビジュアル デザインに合わせてスタイル設定や配置を行うことができます。クリック トラッキング、インプレッション、メディア再生を処理するために、Google Mobile Ads SDK for React Native には次のコンポーネントが用意されています。

ネイティブ広告をポリシーに準拠して表示する方法について詳しくは、ネイティブ アドバンスを使用するネイティブ広告をご覧ください。

このページでは、単一または複数のネイティブ広告を読み込む方法、広告のメモリとライフサイクルを管理する方法、Android で動画広告のハードウェア アクセラレーションを有効にする方法について説明します。

前提条件

先に進む前に、次のことを実施してください。

Android

形式 サンプル広告ユニット ID
ネイティブ ca-app-pub-3940256099942544/2247696110
ネイティブ動画 ca-app-pub-3940256099942544/1044960115

iOS

形式 サンプル広告ユニット ID
ネイティブ ca-app-pub-3940256099942544/3986624511
ネイティブ動画 ca-app-pub-3940256099942544/2521693316

広告を読み込む

ネイティブ広告を読み込むには、広告ユニット ID を含む NativeAdRequest オブジェクトを指定して NativeAd.load メソッドを呼び出します。このメソッドは、読み込まれた NativeAd オブジェクトで解決されるか、LoadAdError オブジェクトで拒否される Promise を返します。

次の例では、1 つのネイティブ広告を読み込み、成功した場合は読み込まれた広告を返し、失敗した場合はエラー メッセージをログに記録します。

export async function loadNativeAd(adUnitId: string): Promise<NativeAd | null> {
  try {
    const ad = await NativeAd.load({adUnitId});
    return ad;
  } catch (error) {
    const loadError = error as LoadAdError;
    console.error('Failed to load native ad:', loadError.message);
    return null;
  }
}

ネイティブ広告を読み込んで管理する際は、次のことをおすすめします。

  • 読み込む広告を制限する: ネイティブ広告アセットはメモリを消費します。一度に大量の広告を読み込むのではなく、ユーザーがこれから見る広告（次の 1 ～ 2 個の広告プレースメントなど）のみを読み込みます。
  • マウントされていない広告をクリーンアップする: 画面から広告を削除または置換する場合、またはコンテナ コンポーネントがマウント解除された場合は、ad.destroy メソッドを呼び出します。このメソッドは、広告が使用するリソースとメモリを解放します。
  • 読み込まれた広告を 1 時間以内に表示する: ネイティブ広告クリエイティブは 60 分後に期限切れになります。読み込まれた広告を 1 時間以内に表示しなかった場合は、広告を破棄して別の広告をリクエストします。

省略可: 複数の広告を読み込む

1 回のリクエストで複数の広告を読み込むには、NativeAdRequest オブジェクト、リクエストする広告の数、NativeAdLoadCallback オブジェクトを指定して NativeAd.loadAds メソッドを呼び出します。リクエストには最大 5 つの広告を含めることができます。

次の例では、複数のネイティブ広告をリクエストし、読み込まれた各広告、読み込みエラー、リクエストの完了をコールバックを使用して処理しています。

export function loadMultipleNativeAds(adUnitId: string, numAds: number): void {
  NativeAd.loadAds({adUnitId}, numAds, {
    // Called when an individual native ad finishes loading.
    onNativeAdLoad: (ad) => {
      console.log('Loaded native ad:', ad.headline);
    },
    // Called when an individual native ad fails to load.
    onAdFailedToLoad: (error) => {
      console.error('Failed to load native ad:', error.message);
    },
    // Called when all requested ads have finished loading.
    onAdLoadingCompleted: () => {
      console.log('All requested native ads finished loading.');
    },
  });
}

スクロール可能なフィードに広告を表示する場合は、広告を事前に読み込みます。このプロセスにより、ユーザーが広告に移動したときに広告がレンダリングされます。

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

Android のネイティブ広告ビューに動画広告を表示するには、ハードウェア アクセラレーションを有効にします。

デフォルトでは、Android はハードウェア アクセラレーションを有効にします。アプリは、ハードウェア アクセラレーションをグローバルに無効にできます。アプリでハードウェア アクセラレーションをグローバルに無効にしている場合は、広告を表示する 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>

次のステップ

広告を読み込んだら、NativeAdView コンポーネントと NativeAdMediaView コンポーネントを使用して、React Native UI で広告をレンダリングします。詳しくは、ネイティブ広告を表示するをご覧ください。