Google używa technologii AI do tłumaczenia treści na Twój preferowany język. Tłumaczenia wygenerowane przez AI mogą zawierać błędy.

Wyświetlanie reklam natywnych

Gdy reklama natywna się wczyta, aplikacja otrzyma obiekt reklamy zawierający komponenty reklamy, takie jak obrazy, tekst i filmy. Aplikacja odpowiada za wyświetlanie komponentów reklamy w układzie widoku reklamy natywnej. Aby wyświetlać reklamy natywne zgodnie z zasadami, Google Mobile Ads SDK for React Native udostępnia te komponenty:

Szczegółowe informacje o wyświetlaniu reklam natywnych zgodnie z zasadami znajdziesz w artykule Wyświetlanie zaawansowanych reklam natywnych.

Z tego artykułu dowiesz się, jak renderować komponenty reklam natywnych, konfigurować treści multimedialne i obsługiwać zdarzenia reklamowe za pomocą Google Mobile Ads SDK for React Native.

Wymagania wstępne

Zanim przejdziesz dalej, wykonaj te czynności:

Definiowanie komponentu widoku reklamy natywnej

Komponent NativeAdView to kontener najwyższego poziomu dla układu reklamy natywnej. Ten komponent zawiera wszystkie widoki poszczególnych komponentów i wiąże je z załadowaną instancją NativeAd.

Umieszczenie zasobów w komponencie NativeAdView:

Rejestruj wyświetlenia, gdy reklama pojawia się na ekranie.
rejestrować kliknięcia i obsługiwać nawigację, gdy użytkownik kliknie komponenty interaktywne;
wyświetlać i umieszczać nakładkę Informacja;

Oznaczenie reklamy i Informacja

Oznaczenie reklamy i nakładka Informacja to obowiązkowe wymagania wynikające z zasad, które dotyczą wszystkich implementacji reklam natywnych Google.

Gdy opakujesz układ w NativeAdView, Google Mobile Ads SDK for React Native automatycznie renderuje ikonę Informacja w prawym górnym rogu widoku reklamy. Nie musisz dodawać niestandardowego kodu ani widoków komponentów, aby ikona się wyświetlała.

Aby dostosować umieszczenie ikony w rogu, przeczytaj artykuł Konfigurowanie zaawansowanych funkcji natywnych.

Wypełnianie i rejestrowanie widoków zasobów

Aby zarejestrować wyświetlenia komponentów za pomocą Google Mobile Ads SDK for React Native, umieść każdy komponent w elemencie NativeAdView.Asset i określ typ komponentu za pomocą obiektu NativeAdAssetNames. Każdy element NativeAdView.Asset musi zawierać pojedynczy element hosta React Native, taki jak Text, Image lub View, który akceptuje właściwość nativeID. Szczegółowe informacje o dostępnych właściwościach zasobów znajdziesz w artykule o klasie NativeAd.

W tabeli poniżej znajdziesz dostępne typy zasobów, właściwości docelowe i przykłady rejestrowania widoków zasobów:

Typ zasobu	Opis i przykłady
`ADVERTISER`	Usługa docelowa: `NativeAd.advertiser` {/* The advertiser or sponsor name (optional). */} {ad.advertiser && ( <NativeAdView.Asset type={NativeAdAssetNames.ADVERTISER}> <Text>{ad.advertiser}</Text> </NativeAdView.Asset> )}
`BODY`	Usługa docelowa: `NativeAd.body` {/* Detailed description text (optional). */} {ad.body && ( <NativeAdView.Asset type={NativeAdAssetNames.BODY}> <Text>{ad.body}</Text> </NativeAdView.Asset> )}
`CALL_TO_ACTION`	Usługa docelowa: `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`	Usługa docelowa: `NativeAd.headline` {/* The main title of the ad (required). */} <NativeAdView.Asset type={NativeAdAssetNames.HEADLINE}> <Text>{ad.headline}</Text> </NativeAdView.Asset>
`ICON`	Usługa docelowa: `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`	Usługa docelowa: `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`	Usługa docelowa: `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`	Usługa docelowa: `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> )}

Zawsze renderuj warunkowo te opcjonalne widoki komponentów:

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

Jeśli reklama nie zawiera komponentów opcjonalnych, aplikacja nie może wyświetlać pustych elementów interfejsu.

Wyświetlanie treści multimedialnych

Komponent NativeAdMediaView renderuje komponent wizualny reklamy, np. filmy i obrazy. Jeśli reklama zawiera treści wideo, widok multimediów buforuje i odtwarza film. Jeśli reklama zawiera tylko obraz, widok multimediów renderuje obraz główny.

Zastosuj tryb zmiany rozmiaru multimediów

Aby kontrolować skalowanie obrazów w kontenerze widoku multimediów, zastosuj właściwość resizeMode w komponencie NativeAdMediaView:

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

Dostępne wartości ResizeMode:

Ustawianie formatu obrazu multimediów

Aby żądać kreacji reklamowych, które pasują do formatu obrazu układu widoku multimediów, określ właściwość aspectRatio w instancji NativeAdRequest.

Ten przykład żąda reklamy natywnej o poziomym formacie obrazu, zwraca wczytaną reklamę w przypadku powodzenia i rejestruje komunikat o błędzie w przypadku niepowodzenia:

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

Dostępne wartości NativeMediaAspectRatio:

Nasłuchiwanie zdarzeń reklamowych

Aby otrzymywać powiadomienia o zdarzeniach cyklu życia reklamy, takich jak wyświetlenia lub kliknięcia, przekaż wywołania zwrotne zdarzeń do komponentu NativeAdView. Wszystkie dostępne wywołania zwrotne znajdziesz na stronie AdEventCallback.

W tym przykładzie wywołania zwrotne zdarzeń reklamowych, takich jak wyświetlenie lub zamknięcie treści na pełnym ekranie, są przekazywane do komponentu 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}`,
        );
      }}
    />
  );
}

Zobacz pełny przykład

W tej sekcji znajdziesz kompletny przykład tworzenia komponentu karty reklamy natywnej wielokrotnego użytku.

W poniższym przykładzie zdefiniowano komponent NativeAdCard, który wyświetla plakietkę oznaczenia reklamy, warunkowo renderuje i rejestruje poszczególne komponenty reklamy natywnej oraz renderuje treści multimedialne za pomocą komponentu 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>
  );
}

Wyświetlanie reklam natywnych Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.