Google menggunakan teknologi AI untuk menerjemahkan konten ke dalam bahasa pilihan Anda. Terjemahan AI mungkin mengandung kesalahan.

Menampilkan iklan native

Saat iklan native dimuat, aplikasi Anda akan menerima objek iklan yang berisi aset iklan, seperti gambar, teks, dan video iklan. Aplikasi Anda bertanggung jawab untuk menampilkan aset iklan dalam tata letak tampilan iklan native. Untuk menampilkan iklan native secara mematuhi kebijakan, Google Mobile Ads SDK for React Native menyediakan komponen berikut:

Untuk mengetahui detail tentang cara menampilkan iklan native sesuai kebijakan, lihat Iklan native yang menggunakan native advanced.

Halaman ini membahas cara merender aset iklan native, mengonfigurasi konten media, dan menangani peristiwa iklan menggunakan Google Mobile Ads SDK for React Native.

Prasyarat

Sebelum melanjutkan, lakukan hal berikut:

Menentukan komponen tampilan iklan native

Komponen NativeAdView adalah penampung tingkat teratas untuk tata letak iklan native Anda. Komponen ini menggabungkan semua tampilan aset individual dan mengikat tampilan aset ke instance NativeAd yang dimuat.

Menggabungkan aset Anda dalam komponen NativeAdView akan melakukan hal berikut:

Mencatat tayangan iklan saat iklan ditampilkan di layar.
Mencatat klik dan menangani navigasi saat pengguna mengetuk aset interaktif.
Menampilkan dan memosisikan overlay AdChoices.

Atribusi iklan dan AdChoices

Atribusi iklan dan overlay AdChoices adalah persyaratan kebijakan wajib untuk semua penerapan iklan native Google.

Saat Anda menggabungkan tata letak dalam NativeAdView, Google Mobile Ads SDK for React Native akan otomatis merender ikon AdChoices di sudut kanan atas tampilan iklan secara default. Anda tidak perlu menambahkan kode kustom atau tampilan aset agar ikon muncul.

Untuk menyesuaikan penempatan ikon di sudut, lihat Menetapkan fitur native lanjutan.

Mengisi dan mendaftarkan tampilan aset

Untuk mendaftarkan tampilan aset dengan Google Mobile Ads SDK for React Native, gabungkan setiap komponen aset dengan wrapper NativeAdView.Asset dan tentukan jenis aset menggunakan objek NativeAdAssetNames. Setiap wrapper NativeAdView.Asset harus berisi satu elemen host React Native, seperti Text, Image, atau View, yang menerima properti nativeID. Untuk mengetahui detail tentang properti aset yang tersedia, lihat Class NativeAd.

Tabel berikut mencantumkan jenis aset yang tersedia, properti target, dan contoh pendaftaran tampilan aset:

Jenis aset	Deskripsi dan contoh
`ADVERTISER`	Properti target: `NativeAd.advertiser` {/* The advertiser or sponsor name (optional). */} {ad.advertiser && ( <NativeAdView.Asset type={NativeAdAssetNames.ADVERTISER}> <Text>{ad.advertiser}</Text> </NativeAdView.Asset> )}
`BODY`	Properti target: `NativeAd.body` {/* Detailed description text (optional). */} {ad.body && ( <NativeAdView.Asset type={NativeAdAssetNames.BODY}> <Text>{ad.body}</Text> </NativeAdView.Asset> )}
`CALL_TO_ACTION`	Properti target: `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`	Properti target: `NativeAd.headline` {/* The main title of the ad (required). */} <NativeAdView.Asset type={NativeAdAssetNames.HEADLINE}> <Text>{ad.headline}</Text> </NativeAdView.Asset>
`ICON`	Properti target: `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`	Properti target: `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`	Properti target: `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`	Properti target: `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> )}

Selalu render tampilan aset opsional berikut secara bersyarat:

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

Jika iklan menghilangkan aset opsional, aplikasi Anda tidak boleh menampilkan elemen UI kosong.

Menampilkan konten media

Komponen NativeAdMediaView merender aset visual iklan, seperti video dan gambar. Jika iklan berisi konten video, tampilan media akan melakukan buffering dan memutar video. Jika iklan hanya berisi konten gambar, tampilan media akan merender gambar utama.

Menerapkan mode pengubahan ukuran media

Untuk mengontrol cara gambar diskalakan dalam penampung tampilan media, terapkan properti resizeMode pada komponen NativeAdMediaView:

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

Nilai ResizeMode yang tersedia mencakup:

Menetapkan rasio aspek media

Untuk meminta materi iklan yang cocok dengan rasio aspek tata letak tampilan media, tentukan properti aspectRatio pada instance NativeAdRequest.

Contoh berikut meminta iklan native dengan rasio aspek media lanskap, menampilkan iklan yang dimuat jika berhasil, dan mencatat pesan error ke dalam log jika gagal:

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

Nilai NativeMediaAspectRatio yang tersedia mencakup hal berikut:

Memproses peristiwa iklan

Untuk memberi tahu Anda tentang peristiwa siklus proses iklan, seperti tayangan iklan atau klik, teruskan callback peristiwa ke komponen NativeAdView. Untuk semua callback yang tersedia, lihat AdEventCallback.

Contoh berikut meneruskan callback peristiwa untuk peristiwa iklan, seperti tampilan atau penutupan konten layar penuh, ke komponen 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}`,
        );
      }}
    />
  );
}

Lihat contoh lengkapnya

Bagian ini membahas contoh lengkap pembuatan komponen kartu iklan native yang dapat digunakan kembali.

Contoh berikut menentukan komponen NativeAdCard, yang menampilkan badge atribusi iklan, merender dan mendaftarkan setiap aset iklan native secara bersyarat, serta merender konten media dengan komponen 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>
  );
}

Menampilkan iklan native Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.