ネイティブ広告を表示する

プラットフォームを選択: Android iOS React Native Android（以前のバージョン）

ネイティブ広告が読み込まれると、アプリは広告アセット（広告の画像、テキスト、動画など）を含む広告オブジェクトを受け取ります。アプリは、ネイティブ広告ビューのレイアウトで広告アセットを表示します。ネイティブ広告をポリシーに準拠した形で表示するため、Google Mobile Ads SDK for React Native には次のコンポーネントが用意されています。

• NativeAdView
• NativeAdMediaView

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

このページでは、Google Mobile Ads SDK for React Native を使用してネイティブ広告アセットをレンダリングし、メディア コンテンツを構成して、広告イベントを処理する方法について説明します。

前提条件

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

• Google Mobile Ads SDK for React Native を設定します。
• ネイティブ広告を読み込む

ネイティブ広告ビュー コンポーネントを定義する

NativeAdView コンポーネントは、ネイティブ広告レイアウトの最上位コンテナです。このコンポーネントは、個々のアセットビューをすべてラップし、読み込まれた NativeAd インスタンスにアセットビューをバインドします。

アセットを NativeAdView コンポーネントでラップすると、次の処理が行われます。

• 広告が画面に表示されたときにインプレッションを記録します。
• ユーザーがインタラクティブなアセットをタップしたときに、クリックを記録してナビゲーションを処理します。
• AdChoices オーバーレイを表示して配置する。

広告の帰属表示と AdChoices

広告の帰属表示と AdChoices オーバーレイは、Google ネイティブ広告を実装する際の必須のポリシー要件です。

レイアウトを NativeAdView でラップすると、Google Mobile Ads SDK for React Native はデフォルトで、広告ビューの右上隅に AdChoices アイコンを自動的にレンダリングします。アイコンを表示するために、カスタムコードやアセットビューを追加する必要はありません。

アイコンの角の配置をカスタマイズするには、高度なネイティブ機能を設定するをご覧ください。

アセットビューの設定と登録

アセットビューを Google Mobile Ads SDK for React Native に登録するには、各アセット コンポーネントを NativeAdView.Asset ラッパーでラップし、NativeAdAssetNames オブジェクトを使用してアセットタイプを指定します。各 NativeAdView.Asset ラッパーには、nativeID プロパティを受け入れる単一の React Native ホスト要素（Text、Image、View など）を含める必要があります。使用可能なアセット プロパティの詳細については、クラス NativeAd をご覧ください。

次の表に、使用可能なアセットタイプ、ターゲット プロパティ、アセットビューの登録例を示します。

アセットタイプ	説明と例
ADVERTISER	ターゲット プロパティ: NativeAd.advertiser {/* The advertiser or sponsor name (optional). */} {ad.advertiser && ( <NativeAdView.Asset type={NativeAdAssetNames.ADVERTISER}> <Text>{ad.advertiser}</Text> </NativeAdView.Asset> )}
BODY	ターゲット プロパティ: NativeAd.body {/* Detailed description text (optional). */} {ad.body && ( <NativeAdView.Asset type={NativeAdAssetNames.BODY}> <Text>{ad.body}</Text> </NativeAdView.Asset> )}
CALL_TO_ACTION	ターゲット プロパティ: NativeAd.callToAction {/* Action button text such as "Install" or "Shop Now" (optional). */} {ad.callToAction && ( <NativeAdView.Asset type={NativeAdAssetNames.CALL_TO_ACTION}> <View> <Text>{ad.callToAction}</Text> </View> </NativeAdView.Asset> )}
HEADLINE	ターゲット プロパティ: NativeAd.headline {/* The main title of the ad (required). */} <NativeAdView.Asset type={NativeAdAssetNames.HEADLINE}> <Text>{ad.headline}</Text> </NativeAdView.Asset>
ICON	ターゲット プロパティ: NativeAd.icon {/* The advertiser logo or app icon (optional). */} {ad.icon && ( <NativeAdView.Asset type={NativeAdAssetNames.ICON}> <Image source={{uri: ad.icon.uri}} /> </NativeAdView.Asset> )}
PRICE	ターゲット プロパティ: NativeAd.price {/* Price string for products or paid apps (optional). */} {ad.price && ( <NativeAdView.Asset type={NativeAdAssetNames.PRICE}> <Text>{ad.price}</Text> </NativeAdView.Asset> )}
STAR_RATING	ターゲット プロパティ: NativeAd.starRating {/* App rating score from 0 to 5 (optional). */} {ad.starRating !== undefined && ad.starRating > 0 && ( <NativeAdView.Asset type={NativeAdAssetNames.STAR_RATING}> <Text>★ {ad.starRating.toFixed(1)}</Text> </NativeAdView.Asset> )}
STORE	ターゲット プロパティ: NativeAd.store {/* App store source such as "Google Play" or "App Store" (optional). */} {ad.store && ( <NativeAdView.Asset type={NativeAdAssetNames.STORE}> <Text>{ad.store}</Text> </NativeAdView.Asset> )}

次のオプションのアセットビューは、常に条件付きでレンダリングします。

• ad.icon
• ad.body
• ad.advertiser
• ad.price
• ad.store
• ad.starRating

広告でオプションのアセットが省略されている場合、アプリは空の UI 要素を表示してはなりません。

メディア コンテンツを表示する

NativeAdMediaView コンポーネントは、動画や画像など、広告のビジュアル アセットをレンダリングします。広告に動画コンテンツが含まれている場合、メディアビューは動画をバッファリングして再生します。広告に画像コンテンツのみが含まれている場合、メディアビューには代わりにメイン画像がレンダリングされます。

メディアのサイズ変更モードを適用する

メディアビュー コンテナでの画像のスケーリング方法を制御するには、NativeAdMediaView コンポーネントに resizeMode プロパティを適用します。

      {/* Video or image media asset (optional). */}
      <NativeAdMediaView resizeMode={ResizeMode.COVER} />

使用可能な ResizeMode 値は次のとおりです。

• ResizeMode.CONTAIN
• ResizeMode.COVER
• ResizeMode.STRETCH

メディアのアスペクト比を設定する

メディアビュー レイアウトのアスペクト比に一致する広告クリエイティブをリクエストするには、NativeAdRequest インスタンスで aspectRatio プロパティを指定します。

次の例では、横向きのメディア アスペクト比のネイティブ広告をリクエストし、成功した場合は読み込まれた広告を返し、失敗した場合はエラー メッセージをログに記録します。

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

利用可能な NativeMediaAspectRatio 値には以下があります。

• NativeMediaAspectRatio.ANY
• NativeMediaAspectRatio.LANDSCAPE
• NativeMediaAspectRatio.PORTRAIT
• NativeMediaAspectRatio.SQUARE

広告イベントをリッスンする

インプレッションやクリックなどの広告ライフサイクル イベントを通知するには、イベント コールバックを NativeAdView コンポーネントに渡します。使用可能なすべてのコールバックについては、AdEventCallback をご覧ください。

次の例では、全画面コンテンツの表示や非表示などの広告イベントのイベント コールバックを NativeAdView コンポーネントに渡しています。

export function NativeAdWithEvents({ad}: {ad: NativeAd}) {
  return (
    <NativeAdView
      ad={ad}
      // Called when the user taps the ad.
      onAdClicked={() => {
        console.log('Native ad was clicked.');
      }}
      // Called when an impression is recorded.
      onAdImpression={() => {
        console.log('Native ad recorded an impression.');
      }}
      // Called when the ad presents full-screen content.
      onAdShowedFullScreenContent={() => {
        console.log('Native ad showed full screen content.');
      }}
      // Called when full-screen content is dismissed.
      onAdDismissedFullScreenContent={() => {
        console.log('Native ad dismissed full screen content.');
      }}
      // Called when the ad is estimated to have earned money.
      onAdPaid={(adValue: AdValue) => {
        console.log(
          `Native ad paid: ${adValue.amountMicros} ${adValue.currencyCode}`,
        );
      }}
    />
  );
}

サンプル全体を表示する

このセクションでは、再利用可能なネイティブ広告カード コンポーネントを作成する実証済みの例について説明します。

次の例では、NativeAdCard コンポーネントを定義しています。このコンポーネントは、広告の帰属表示バッジを表示し、個々のネイティブ広告アセットを条件付きでレンダリングして登録し、NativeAdMediaView コンポーネントを使用してメディア コンテンツをレンダリングします。

export function NativeAdCard({ad}: {ad: NativeAd}) {
  return (
    <NativeAdView ad={ad}>
      {/* 1. Ad Attribution Badge */}
      <View>
        <Text>Ad</Text>
      </View>

      {/* 2. Header: Icon, Headline, Advertiser, and Star Rating */}
      <View>
        {/* The advertiser logo or app icon (optional). */}
        {ad.icon && (
          <NativeAdView.Asset type={NativeAdAssetNames.ICON}>
            <Image source={{uri: ad.icon.uri}} />
          </NativeAdView.Asset>
        )}

        <View>
          {/* The main title of the ad (required). */}
          <NativeAdView.Asset type={NativeAdAssetNames.HEADLINE}>
            <Text>{ad.headline}</Text>
          </NativeAdView.Asset>

          {/* The advertiser or sponsor name (optional). */}
          {ad.advertiser && (
            <NativeAdView.Asset type={NativeAdAssetNames.ADVERTISER}>
              <Text>{ad.advertiser}</Text>
            </NativeAdView.Asset>
          )}

          {/* App rating score from 0 to 5 (optional). */}
          {ad.starRating !== undefined && ad.starRating > 0 && (
            <NativeAdView.Asset type={NativeAdAssetNames.STAR_RATING}>
              <Text>★ {ad.starRating.toFixed(1)}</Text>
            </NativeAdView.Asset>
          )}
        </View>
      </View>

      {/* 3. Media Content */}
      {/* Video or image media asset (optional). */}
      <NativeAdMediaView resizeMode={ResizeMode.COVER} />

      {/* 4. Body Text */}
      {/* Detailed description text (optional). */}
      {ad.body && (
        <NativeAdView.Asset type={NativeAdAssetNames.BODY}>
          <Text>{ad.body}</Text>
        </NativeAdView.Asset>
      )}

      {/* 5. Footer: Price, Store, and Call To Action */}
      <View>
        {/* Price string for products or paid apps (optional). */}
        {ad.price && (
          <NativeAdView.Asset type={NativeAdAssetNames.PRICE}>
            <Text>{ad.price}</Text>
          </NativeAdView.Asset>
        )}

        {/* App store source such as "Google Play" or "App Store" (optional). */}
        {ad.store && (
          <NativeAdView.Asset type={NativeAdAssetNames.STORE}>
            <Text>{ad.store}</Text>
          </NativeAdView.Asset>
        )}

        {/* Action button text such as "Install" or "Shop Now" (optional). */}
        {ad.callToAction && (
          <NativeAdView.Asset type={NativeAdAssetNames.CALL_TO_ACTION}>
            <View>
              <Text>{ad.callToAction}</Text>
            </View>
          </NativeAdView.Asset>
        )}
      </View>
    </NativeAdView>
  );
}