Annunci nativi sulla Rete Display

Quando viene caricato un annuncio nativo, l'app riceve un oggetto annuncio contenente gli asset annuncio, come immagini, testo e video. L'app è responsabile della visualizzazione degli asset annuncio in un layout di visualizzazione di annuncio nativo. Per visualizzare gli annunci nativi in modo conforme, Google Mobile Ads SDK for React Native fornisce i seguenti componenti:

Per informazioni dettagliate sulla visualizzazione degli annunci nativi in modo conforme, consulta Annunci nativi che utilizzano il formato nativo avanzato.

Questa pagina spiega come eseguire il rendering degli asset annuncio nativi, configurare i contenuti multimediali e gestire gli eventi dell'annuncio utilizzando Google Mobile Ads SDK for React Native.

Prerequisiti

Prima di continuare, completa queste operazioni:

Definisci il componente di visualizzazione dell'annuncio nativo

Il componente NativeAdView è il contenitore di primo livello per il layout dell'annuncio nativo. Questo componente aggrega tutte le visualizzazioni dei singoli asset e le associa all'istanza NativeAd caricata.

Se inserisci gli asset nel componente NativeAdView:

  • Registra le impressioni quando l'annuncio viene visualizzato sullo schermo.
  • Registra i clic e gestisci la navigazione quando un utente tocca gli asset interattivi.
  • Visualizza e posiziona l'overlay Scegli Tu!.

Attribuzione dell'annuncio e Scegli Tu!

L'attribuzione dell'annuncio e l'overlay Scegli Tu! sono requisiti previsti dalle norme obbligatori per tutte le implementazioni di annunci nativi di Google.

Quando racchiudi il layout in NativeAdView, Google Mobile Ads SDK for React Native esegue automaticamente il rendering dell'icona Scegli Tu! nell'angolo in alto a destra della visualizzazione dell'annuncio per impostazione predefinita. Non è necessario aggiungere codice personalizzato o visualizzazioni di asset per visualizzare l'icona.

Per personalizzare la posizione dell'icona nell'angolo, consulta Imposta le funzionalità native avanzate.

Compila e registra le visualizzazioni degli asset

Per registrare le visualizzazioni degli asset con Google Mobile Ads SDK for React Native, racchiudi ogni componente dell'asset con un wrapper NativeAdView.Asset e specifica il tipo di asset utilizzando l'oggetto NativeAdAssetNames. Ogni wrapper NativeAdView.Asset deve contenere un singolo elemento host React Native, ad esempio Text, Image o View, che accetta la proprietà nativeID. Per maggiori dettagli sulle proprietà degli asset disponibili, consulta Classe NativeAd.

La tabella seguente elenca i tipi di asset disponibili, le proprietà di destinazione ed esempi di registrazione delle visualizzazioni degli asset:

Tipo di asset Descrizione ed esempi
ADVERTISER

Proprietà di destinazione: NativeAd.advertiser

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

Proprietà di destinazione: NativeAd.body

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

Proprietà di destinazione: 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

Proprietà di destinazione: NativeAd.headline

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

Proprietà di destinazione: 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

Proprietà di destinazione: 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

Proprietà di destinazione: 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

Proprietà di destinazione: 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>
)}

Esegui sempre il rendering condizionale delle seguenti visualizzazioni degli asset facoltativi:

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

Quando un annuncio omette gli asset facoltativi, l'app non deve mostrare elementi UI vuoti.

Visualizza contenuti multimediali

Il componente NativeAdMediaView esegue il rendering dell'asset visivo dell'annuncio, ad esempio video e immagini. Se l'annuncio contiene contenuti video, la visualizzazione multimediale memorizza nel buffer e riproduce il video. Se l'annuncio contiene solo contenuti immagine, la visualizzazione media mostra l'immagine principale.

Applica la modalità di ridimensionamento dei contenuti multimediali

Per controllare la scalabilità delle immagini nel contenitore della visualizzazione media, applica la proprietà resizeMode al componente NativeAdMediaView:

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

I valori ResizeMode disponibili includono:

Imposta le proporzioni dei contenuti multimediali

Per richiedere creatività degli annunci che corrispondano alle proporzioni del layout della visualizzazione media, specifica la proprietà aspectRatio nell'istanza NativeAdRequest.

Il seguente esempio richiede un annuncio nativo con proporzioni multimediali orizzontali, restituisce l'annuncio caricato in caso di esito positivo e registra un messaggio di errore in caso di esito negativo:

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;
  }
}

I valori NativeMediaAspectRatio disponibili includono:

Ascolta gli eventi degli annunci

Per ricevere notifiche sugli eventi del ciclo di vita degli annunci, come impressioni o clic, passa i callback degli eventi al componente NativeAdView. Per tutti i callback disponibili, consulta AdEventCallback.

L'esempio seguente passa i callback degli eventi per gli eventi degli annunci, come la visualizzazione o la chiusura dei contenuti a schermo intero, al componente 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}`,
        );
      }}
    />
  );
}

Visualizza l'esempio completo

Questa sezione illustra l'esempio completo di creazione di un componente di scheda di annuncio nativo riutilizzabile.

L'esempio seguente definisce il componente NativeAdCard, che mostra un badge di attribuzione dell'annuncio, esegue il rendering e registra in modo condizionale i singoli asset annuncio nativo ed esegue il rendering dei contenuti multimediali con il componente 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>
  );
}