Menyiapkan iklan banner

Iklan banner menempati posisi tetap dalam tata letak aplikasi Anda, seperti di bagian atas atau bawah layar perangkat. Iklan ini tetap berada di layar saat pengguna berinteraksi dengan aplikasi Anda, dan dimuat ulang setelah jangka waktu yang Anda tetapkan. Banner adaptif anchor menggunakan ukuran iklan untuk setiap perangkat menggunakan lebar iklan yang Anda tentukan.

Halaman ini membahas cara mengintegrasikan iklan banner adaptif anchor ke dalam aplikasi React Native.

Prasyarat

Sebelum melanjutkan, lakukan hal berikut:

Android 

ca-app-pub-3940256099942544/9214589741

iOS 

ca-app-pub-3940256099942544/2435281174

Mendapatkan ukuran iklan

Untuk meminta iklan banner adaptif anchor, panggil metode AdSize.getLargeAnchoredAdaptiveBannerAdSize dengan lebar penampung iklan yang tersedia dalam piksel kepadatan mandiri (dp). Metode ini menampilkan promise yang di-resolve ke objek AdSize.

Contoh berikut mendapatkan dan menampilkan ukuran iklan untuk iklan banner adaptif anchor:

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

Memuat iklan

Setelah Anda mendapatkan objek AdSize, panggil metode load di class BannerAd dengan ID unit iklan dan ukuran iklan Anda.

Contoh berikut memuat iklan banner adaptif anchor dengan ukuran iklan dan ID unit iklan, menerima instance BannerAd yang dimuat jika berhasil, dan mencatat error ke dalam log jika gagal:

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

Memuat ulang iklan

Jika Anda mengonfigurasi unit iklan untuk dimuat ulang, Anda tidak perlu meminta iklan lain saat iklan gagal dimuat. Google Mobile Ads SDK for React Native mematuhi kecepatan refresh yang Anda tentukan di UI AdMob. Jika Anda belum mengaktifkan refresh, ajukan permintaan baru. Untuk mengetahui detail selengkapnya tentang pemuatan ulang unit iklan, seperti menetapkan kecepatan refresh, lihat Menggunakan pemuatan ulang otomatis untuk iklan Banner.

Menampilkan iklan banner

Untuk menampilkan instance BannerAd yang dimuat, teruskan instance iklan ke properti ad komponen BannerAdView dalam hierarki tampilan Anda.

Contoh berikut menampilkan iklan dan menghancurkan iklan saat komponen dilepas:

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

Contoh ini memanggil metode destroy saat komponen dilepas atau saat instance iklan diganti. Proses ini mengosongkan memori dan resource yang digunakan iklan.

Memproses peristiwa iklan

Untuk memproses peristiwa iklan, seperti tayangan iklan dan klik, tetapkan callback pada komponen BannerAdView. Untuk semua callback, lihat BannerAdViewProps.

Contoh berikut menetapkan callback untuk memproses peristiwa iklan banner:

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

Contoh ini memproses peristiwa iklan, seperti penutupan iklan, tayangan iklan, klik, presentasi layar penuh, estimasi pendapatan iklan, serta keberhasilan dan kegagalan refresh.

Lihat contoh lengkapnya

Bagian ini membahas contoh lengkap cara mengintegrasikan iklan banner ke dalam komponen React Native.

Contoh berikut mengintegrasikan iklan banner ke dalam komponen React Native dan mengelola instance iklan dalam status:

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

Ganti BANNER_AD_UNIT_ID dengan ID unit iklan Anda.

Langkah berikutnya

Setelah Anda mengintegrasikan iklan banner, pelajari topik berikut: