Google verwendet KI-Technologie, um Inhalte in Ihre bevorzugte Sprache zu übersetzen. KI-Übersetzungen können Fehler enthalten.

Native Anzeigen für das Displaynetzwerk

Wenn eine native Anzeige geladen wird, erhält Ihre App ein Anzeigenobjekt mit Anzeigen-Assets wie Bildern, Text und Videos der Anzeige. Ihre App ist für die Darstellung der Anzeigen-Assets in einem Layout für native Anzeigen verantwortlich. Damit native Anzeigen richtlinienkonform ausgeliefert werden, bietet Google Mobile Ads SDK for React Native die folgenden Komponenten:

Weitere Informationen zur richtlinienkonformen Auslieferung nativer Anzeigen finden Sie unter Native Anzeigen und erweiterte native Anzeigen.

Auf dieser Seite wird beschrieben, wie Sie mit Google Mobile Ads SDK for React Native Assets für native Anzeigen rendern, Medieninhalte konfigurieren und Anzeigenereignisse verarbeiten.

Vorbereitung

Bevor Sie fortfahren, führen Sie die folgenden Schritte aus:

Komponente für die Ansicht nativer Anzeigen definieren

Die Komponente NativeAdView ist der übergeordnete Container für das Layout Ihrer nativen Anzeige. Diese Komponente umschließt alle einzelnen Asset-Ansichten und bindet sie an die geladene NativeAd-Instanz.

Wenn Sie Ihre Assets in die NativeAdView-Komponente einbinden, geschieht Folgendes:

Impressionen werden erfasst, wenn die Anzeige auf dem Bildschirm zu sehen ist.
Klicks aufzeichnen und die Navigation verarbeiten, wenn ein Nutzer auf interaktive Assets tippt.
Datenschutzinfo-Overlay einblenden und positionieren

Anzeigenkennzeichnung und Datenschutzinfo

Die Anzeigenkennzeichnung und das AdChoices-Overlay sind obligatorische Richtlinienanforderungen für alle nativen Anzeigenimplementierungen von Google.

Wenn Sie Ihr Layout in NativeAdView einbinden, rendert Google Mobile Ads SDK for React Native das Datenschutzinfo-Symbol standardmäßig automatisch in der oberen rechten Ecke der Anzeigenansicht. Sie müssen keinen benutzerdefinierten Code oder Asset-Ansichten hinzufügen, damit das Symbol angezeigt wird.

Informationen zum Anpassen der Platzierung des Symbols in einer Ecke finden Sie unter Erweiterte native Funktionen festlegen.

Asset-Ansichten füllen und registrieren

Wenn Sie Asset-Aufrufe mit Google Mobile Ads SDK for React Native registrieren möchten, umschließen Sie jede Asset-Komponente mit einem NativeAdView.Asset-Wrapper und geben Sie den Asset-Typ mit dem NativeAdAssetNames-Objekt an. Jeder NativeAdView.Asset-Wrapper muss ein einzelnes React Native-Hostelement enthalten, z. B. Text, Image oder View, das die Property nativeID akzeptiert. Weitere Informationen zu verfügbaren Asset-Attributen finden Sie unter Klasse NativeAd.

In der folgenden Tabelle sind die verfügbaren Asset-Typen, die Zielattribute und Beispiele für die Registrierung der Asset-Ansichten aufgeführt:

Asset-Typ	Beschreibung und Beispiele
`ADVERTISER`	Ziel-Property: `NativeAd.advertiser` {/* The advertiser or sponsor name (optional). */} {ad.advertiser && ( <NativeAdView.Asset type={NativeAdAssetNames.ADVERTISER}> <Text>{ad.advertiser}</Text> </NativeAdView.Asset> )}
`BODY`	Ziel-Property: `NativeAd.body` {/* Detailed description text (optional). */} {ad.body && ( <NativeAdView.Asset type={NativeAdAssetNames.BODY}> <Text>{ad.body}</Text> </NativeAdView.Asset> )}
`CALL_TO_ACTION`	Ziel-Property: `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`	Ziel-Property: `NativeAd.headline` {/* The main title of the ad (required). */} <NativeAdView.Asset type={NativeAdAssetNames.HEADLINE}> <Text>{ad.headline}</Text> </NativeAdView.Asset>
`ICON`	Ziel-Property: `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`	Ziel-Property: `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`	Ziel-Property: `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`	Ziel-Property: `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> )}

Rendern Sie die folgenden optionalen Asset-Ansichten immer bedingt:

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

Wenn in einer Anzeige optionale Assets weggelassen werden, dürfen in Ihrer App keine leeren UI-Elemente angezeigt werden.

Medieninhalte anzeigen

Mit der Komponente NativeAdMediaView wird das visuelle Asset der Anzeige gerendert, z. B. Videos und Bilder. Wenn die Anzeige Videoinhalte enthält, wird das Video in der Medienansicht zwischengespeichert und abgespielt. Wenn die Anzeige nur Bildinhalte enthält, wird stattdessen das primäre Bild gerendert.

Modus zum Ändern der Mediengröße anwenden

Wenn Sie festlegen möchten, wie Bilder im Medienansichtscontainer skaliert werden, wenden Sie das Attribut resizeMode auf die Komponente NativeAdMediaView an:

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

Folgende ResizeMode-Werte sind verfügbar:

Seitenverhältnis für Medien festlegen

Wenn Sie Anzeigen-Creatives anfordern möchten, die dem Seitenverhältnis Ihres Medienansichtslayouts entsprechen, geben Sie das Attribut aspectRatio für die Instanz NativeAdRequest an.

Im folgenden Beispiel wird eine native Anzeige mit einem Querformat-Seitenverhältnis angefordert. Bei Erfolg wird die geladene Anzeige zurückgegeben, bei einem Fehler wird eine Fehlermeldung protokolliert:

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

Zu den verfügbaren NativeMediaAspectRatio-Werten gehören:

Auf Anzeigenereignisse warten

Wenn Sie über Lifecycle-Events von Anzeigen wie Impressionen oder Klicks benachrichtigt werden möchten, übergeben Sie Event-Callbacks an die Komponente NativeAdView. Alle verfügbaren Callbacks finden Sie unter AdEventCallback.

Im folgenden Beispiel werden Ereignis-Callbacks für Anzeigenereignisse wie die Anzeige oder das Schließen von Vollbildinhalten an die NativeAdView-Komponente übergeben:

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}`,
        );
      }}
    />
  );
}

Vollständiges Beispiel ansehen

In diesem Abschnitt wird ein vollständiges Beispiel für das Erstellen einer wiederverwendbaren nativen Anzeigenkartenkomponente beschrieben.

Im folgenden Beispiel wird die Komponente NativeAdCard definiert, die ein Anzeigenkennzeichnungs-Badge anzeigt, einzelne native Anzeigen-Assets bedingt rendert und registriert und den Medieninhalt mit der Komponente NativeAdMediaView rendert:

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

Native Anzeigen für das Displaynetzwerk Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.