Konfigurowanie banerów reklamowych

Banery reklamowe zajmują stałą pozycję w układzie aplikacji, np. u góry lub u dołu ekranu urządzenia. Reklamy te pozostają na ekranie, gdy użytkownicy korzystają z aplikacji, i odświeżają się po upływie ustawionego przez Ciebie czasu. Zakotwiczone banery adaptacyjne używają rozmiaru reklamy dla każdego urządzenia, korzystając z określonej przez Ciebie szerokości reklamy.

Na tej stronie dowiesz się, jak zintegrować zakotwiczone banery adaptacyjne z aplikacją React Native.

Wymagania wstępne

Zanim przejdziesz dalej, wykonaj te czynności:

Android 

ca-app-pub-3940256099942544/9214589741

iOS 

ca-app-pub-3940256099942544/2435281174

Uzyskiwanie rozmiaru reklamy

Aby poprosić o zakotwiczony adaptacyjny baner reklamowy, wywołaj metodę AdSize.getLargeAnchoredAdaptiveBannerAdSize, podając dostępną szerokość kontenera reklamy w pikselach niezależnych od gęstości (dp). Ta metoda zwraca obietnicę, która jest rozwiązywana do obiektu AdSize.

Poniższy przykład pobiera i zwraca rozmiar zakotwiczonego adaptacyjnego banera reklamowego:

export async function getAdaptiveAdSize(width: number): Promise<AdSize> {
  const adSize = await AdSize.getLargeAnchoredAdaptiveBannerAdSize(width);
  return adSize;
}

Wczytywanie reklamy

Po uzyskaniu obiektu AdSize wywołaj metodę load w klasie BannerAd, podając identyfikator jednostki reklamowej i rozmiar reklamy.

W poniższym przykładzie wczytujemy zakotwiczony baner adaptacyjny o określonym rozmiarze i identyfikatorze jednostki reklamowej. Jeśli wczytywanie się powiedzie, otrzymujemy wczytaną instancję BannerAd, a jeśli nie, rejestrujemy błąd:

export function loadBannerAd(
  adUnitId: string,
  adSize: AdSize,
  callback?: BannerAdLoadCallback,
): void {
  BannerAd.load(
    {adUnitId, adSize},
    {
      // Called when an ad has finished loading.
      onAdLoaded: (ad) => {
        console.log('Banner ad loaded successfully.');
        callback?.onAdLoaded?.(ad);
      },
      // Called when an ad request fails.
      onAdFailedToLoad: (error: LoadAdError) => {
        console.error('Failed to load banner ad:', error.message);
        callback?.onAdFailedToLoad?.(error);
      },
    },
  );
}

Odświeżanie reklamy

Jeśli jednostka reklamowa jest skonfigurowana do odświeżania, nie musisz wysyłać kolejnego żądania reklamy, gdy nie uda się jej wczytać. Google Mobile Ads SDK for React Native uwzględnia częstotliwość odświeżania określoną w interfejsie AdMob. Jeśli nie masz włączonego odświeżania, wyślij nową prośbę. Więcej informacji o odświeżaniu jednostek reklamowych, np. o ustawianiu częstotliwości odświeżania, znajdziesz w artykule Używanie opcji automatycznego odświeżania w przypadku banerów reklamowych.

Wyświetlanie banera reklamowego

Aby wyświetlić wczytaną instancję BannerAd, przekaż instancję reklamy do właściwości ad komponentu BannerAdView w hierarchii widoków.

Poniższy przykład pokazuje reklamę i niszczy ją, gdy komponent zostanie odłączony:

export function BannerAdViewComponent({ad}: {ad: BannerAd}): React.JSX.Element {
  useEffect(() => {
    // Destroy native resources when the component unmounts.
    return () => {
      ad.destroy();
    };
  }, [ad]);

  return <BannerAdView ad={ad} />;
}

W tym przykładzie metoda destroy jest wywoływana, gdy komponent jest odłączany lub gdy instancja reklamy jest zastępowana. Ten proces zwalnia pamięć i zasoby używane przez reklamę.

Nasłuchiwanie zdarzeń reklamowych

Aby nasłuchiwać zdarzeń reklamowych, takich jak wyświetlenia i kliknięcia reklam, ustaw wywołania zwrotne w komponencie BannerAdView. Wszystkie wywołania zwrotne znajdziesz na stronie BannerAdViewProps.

W tym przykładzie ustawiono wywołania zwrotne, które nasłuchują zdarzeń banera reklamowego:

export function BannerEventsExample({ad}: {ad: BannerAd}): React.JSX.Element {
  return (
    <BannerAdView
      ad={ad}
      // Called when an impression is recorded for an ad.
      onAdImpression={() => {
        console.log('Banner ad recorded an impression.');
      }}
      // Called when a click is recorded for an ad.
      onAdClicked={() => {
        console.log('Banner ad clicked.');
      }}
      // Called when the ad opens an in-app overlay or landing page.
      onAdShowedFullScreenContent={() => {
        console.log('Banner ad opened overlay content.');
      }}
      // Called when the user dismisses the ad overlay.
      onAdDismissedFullScreenContent={() => {
        console.log('Banner ad overlay dismissed.');
      }}
      // Called when the ad is estimated to have earned money.
      onAdPaid={(adValue) => {
        console.log(
          `Banner ad paid: ${adValue.amountMicros} ${adValue.currencyCode}`,
        );
      }}
      // Called when the ad automatically refreshes.
      onAdRefreshed={() => {
        console.log('Banner ad refreshed.');
      }}
      // Called when the ad fails to automatically refresh.
      onAdFailedToRefresh={(error) => {
        console.error('Banner ad failed to refresh:', error.message);
      }}
    />
  );
}

Ten przykład wykrywa zdarzenia związane z reklamami, takie jak zamknięcia, wyświetlenia, kliknięcia, wyświetlenia na pełnym ekranie, szacunkowe przychody z reklam oraz udane i nieudane odświeżenia.

Zobacz pełny przykład

W tej sekcji znajdziesz pełny przykład integracji banera reklamowego z komponentem React Native.

Poniższy przykład integruje baner reklamowy z komponentem React Native i zarządza instancją reklamy w stanie:

export function BannerScreen() {
  const {width} = useWindowDimensions();
  const insets = useSafeAreaInsets();
  const [ad, setAd] = useState<BannerAd | null>(null);
  const [status, setStatus] = useState('Idle');

  useEffect(() => {
    return () => {
      ad?.destroy();
    };
  }, [ad]);

  const handleLoadAd = async () => {
    setStatus('Loading adaptive banner ad...');
    try {
      const adaptiveSize = await getAdaptiveAdSize(width);
      loadBannerAd(BANNER_AD_UNIT_ID, adaptiveSize, {
        onAdLoaded: (loadedAd) => {
          setAd(loadedAd);
          setStatus('Banner ad loaded successfully.');
        },
        onAdFailedToLoad: (error: LoadAdError) => {
          setStatus(`Failed to load banner ad: ${error.message}`);
        },
      });
    } catch (error) {
      setStatus(`Failed to get adaptive ad size: ${error}`);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Anchored Adaptive Banner Ad</Text>
      <Text style={styles.status}>Status: {status}</Text>
      <View style={styles.buttonGroup}>
        <Button title="Load Banner Ad" onPress={handleLoadAd} />
      </View>
      {ad ? (
        <View style={[styles.bannerContainer, {bottom: insets.bottom}]}>
          <BannerAdView
            ad={ad}
            onAdImpression={() => setStatus('Banner ad recorded impression.')}
            onAdClicked={() => setStatus('Banner ad clicked.')}
            onAdShowedFullScreenContent={() =>
              setStatus('Banner ad showed overlay content.')
            }
            onAdDismissedFullScreenContent={() =>
              setStatus('Banner ad overlay dismissed.')
            }
          />
        </View>
      ) : null}
    </View>
  );
}

Zastąp BANNER_AD_UNIT_ID identyfikatorem jednostki reklamowej.

Dalsze kroki

Po zintegrowaniu banerów reklamowych zapoznaj się z tymi tematami: