Konfigurowanie reklam natywnych

Reklamy natywne udostępniają poszczególne komponenty reklamy, takie jak nagłówek, obrazy i tekst zachęty, które możesz stylizować i układać tak, aby pasowały do wyglądu aplikacji. Aby obsługiwać śledzenie kliknięć, wyświetlenia i odtwarzanie multimediów, 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.

Na tej stronie dowiesz się, jak wczytywać pojedyncze i wielokrotne reklamy natywne, zarządzać pamięcią i cyklem życia reklam oraz włączać akcelerację sprzętową w przypadku reklam wideo na Androidzie.

Wymagania wstępne

Zanim przejdziesz dalej, wykonaj te czynności:

Android

Format Przykładowy identyfikator jednostki reklamowej
Rodzimy użytkownik ca-app-pub-3940256099942544/2247696110
Natywna wideo ca-app-pub-3940256099942544/1044960115

iOS

Format Przykładowy identyfikator jednostki reklamowej
Rodzimy użytkownik ca-app-pub-3940256099942544/3986624511
Natywna wideo ca-app-pub-3940256099942544/2521693316

Wczytywanie reklamy

Aby wczytać reklamę natywną, wywołaj metodę NativeAd.load z obiektem NativeAdRequest zawierającym identyfikator jednostki reklamowej. Ta metoda zwraca obietnicę, która jest spełniana przez wczytany obiekt NativeAd lub odrzucana przez obiekt LoadAdError.

Poniższy przykład wczytuje pojedynczą reklamę natywną, zwraca wczytaną reklamę w przypadku powodzenia i rejestruje komunikat o błędzie w przypadku niepowodzenia:

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

Podczas wczytywania reklam natywnych i zarządzania nimi zalecamy wykonanie tych czynności:

  • Ogranicz liczbę wczytywanych reklam: komponenty reklam natywnych zużywają pamięć. Zamiast ładować duże partie reklam naraz, wczytuj tylko te, które użytkownicy mają zamiar wyświetlić, np. 1 lub 2 następne miejsca docelowe reklamy.
  • Usuwanie niezamontowanych reklam: gdy usuniesz lub zastąpisz reklamę na ekranie albo gdy komponent zawierający reklamę zostanie odmontowany, wywołaj metodę ad.destroy. Ta metoda zwalnia zasoby i pamięć używane przez reklamę.
  • Wyświetlaj wczytane reklamy w ciągu godziny: kreacje reklam natywnych wygasają po 60 minutach. Jeśli wczytana reklama nie została wyświetlona w ciągu godziny, zniszcz ją i poproś o inną.

Opcjonalnie: wczytywanie wielu reklam

Aby wczytać kilka reklam w jednym żądaniu, wywołaj metodę NativeAd.loadAds z obiektem NativeAdRequest, liczbą reklam do żądania i obiektem NativeAdLoadCallback. Żądanie może zawierać maksymalnie 5 reklam.

W poniższym przykładzie żądanie dotyczy wielu reklam natywnych, a każda wczytana reklama, błędy wczytywania i realizacja żądania są obsługiwane za pomocą wywołań zwrotnych:

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.');
    },
  });
}

Jeśli wyświetlasz reklamy w przewijanym kanale, wczytuj je z wyprzedzeniem. Dzięki temu renderowanie reklam odbywa się, gdy użytkownicy do nich przechodzą.

Włączanie akceleracji sprzętowej

Aby wyświetlać reklamy wideo w widokach reklam natywnych na urządzeniach z Androidem, włącz akcelerację sprzętową.

Domyślnie Android włącza akcelerację sprzętową. Aplikacje mogą wyłączyć akcelerację sprzętową globalnie. Jeśli aplikacja wyłącza akcelerację sprzętową globalnie, włącz to ustawienie w przypadku klas Activity, które wyświetlają reklamy.

Jeśli włączysz akcelerację sprzętową globalnie, a aplikacja nie będzie działać zgodnie z oczekiwaniami, możesz kontrolować akcelerację sprzętową w przypadku poszczególnych aktywności. Aby włączyć lub wyłączyć akcelerację sprzętową, użyj atrybutu android:hardwareAccelerated dla elementów application i activity w pliku AndroidManifest.xml.

W tym przykładzie akceleracja sprzętowa jest włączona globalnie dla aplikacji i wyłączona dla jednej aktywności:

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

Dalsze kroki

Po wczytaniu reklamy wyrenderuj ją w interfejsie React Native za pomocą komponentów NativeAdView i NativeAdMediaView. Więcej informacji znajdziesz w artykule Wyświetlanie reklam natywnych.