Doğal reklamları görüntüleme

Doğal reklam yüklendiğinde uygulamanız, reklamın resimleri, metinleri ve videoları gibi reklam öğelerini içeren bir reklam nesnesi alır. Uygulamanız, reklam öğelerini doğal reklam görünümü düzeninde göstermekten sorumludur. Doğal reklamları uyumlu bir şekilde göstermek için Google Mobile Ads SDK for React Native aşağıdaki bileşenleri sağlar:

Doğal reklamları uyumlu bir şekilde gösterme hakkında ayrıntılı bilgi için Doğal gelişmiş biçimini kullanan doğal reklamlar başlıklı makaleyi inceleyin.

Bu sayfada, Google Mobile Ads SDK for React Native kullanarak doğal reklam öğelerini oluşturma, medya içeriğini yapılandırma ve reklam etkinliklerini işleme konuları ele alınmaktadır.

Ön koşullar

Devam etmeden önce şunları yapın:

Doğal reklam görüntüleme bileşenini tanımlama

NativeAdView bileşeni, doğal reklam düzeniniz için üst düzey kapsayıcıdır. Bu bileşen, tüm öğe görünümlerini sarmalar ve öğe görünümlerini yüklenen NativeAd örneğine bağlar.

Öğelerinizi NativeAdView bileşenine sarmak şunları yapar:

  • Reklam ekranda gösterildiğinde gösterimleri kaydedin.
  • Kullanıcı etkileşimli öğelere dokunduğunda tıklamaları kaydetme ve gezinmeyi yönetme
  • Reklam Seçenekleri yer paylaşımını görüntüleme ve konumlandırma

Reklam ilişkilendirmesi ve Reklam Seçenekleri

Reklam ilişkilendirmesi ve Reklam Seçenekleri yer paylaşımı, tüm Google doğal reklam uygulamaları için zorunlu politika koşullarıdır.

Düzeninizi NativeAdView ile sarmaladığınızda Google Mobile Ads SDK for React Native, Reklam Seçenekleri simgesini varsayılan olarak reklam görünümünün sağ üst köşesinde otomatik olarak oluşturur. Simgenin görünmesi için özel kod veya öğe görünümleri eklemeniz gerekmez.

Simgenin köşe yerleşimini özelleştirmek için Gelişmiş yerel özellikleri ayarlama bölümüne bakın.

Öğe görünümlerini doldurma ve kaydetme

Öğe görüntülemelerini Google Mobile Ads SDK for React Native ile kaydetmek için her öğe bileşenini bir NativeAdView.Asset sarmalayıcıyla sarmalayın ve NativeAdAssetNames nesnesini kullanarak öğe türünü belirtin. Her NativeAdView.Asset sarmalayıcısı, nativeID özelliğini kabul eden tek bir React Native ana makine öğesi (ör. Text, Image veya View) içermelidir. Kullanılabilir öğe özellikleri hakkında ayrıntılı bilgi için NativeAd sınıfı başlıklı makaleyi inceleyin.

Aşağıdaki tabloda, kullanılabilir öğe türleri, hedef mülkler ve öğe görünümlerini kaydetmeyle ilgili örnekler listelenmiştir:

Öğe türü Açıklama ve örnekler
ADVERTISER

Hedef mülk: NativeAd.advertiser

{/* The advertiser or sponsor name (optional). */}
{ad.advertiser && (
  <NativeAdView.Asset type={NativeAdAssetNames.ADVERTISER}>
    <Text>{ad.advertiser}</Text>
  </NativeAdView.Asset>
)}
BODY

Hedef mülk: NativeAd.body

{/* Detailed description text (optional). */}
{ad.body && (
  <NativeAdView.Asset type={NativeAdAssetNames.BODY}>
    <Text>{ad.body}</Text>
  </NativeAdView.Asset>
)}
CALL_TO_ACTION

Hedef mülk: 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

Hedef mülk: NativeAd.headline

{/* The main title of the ad (required). */}
<NativeAdView.Asset type={NativeAdAssetNames.HEADLINE}>
  <Text>{ad.headline}</Text>
</NativeAdView.Asset>
ICON

Hedef mülk: 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

Hedef mülk: 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

Hedef mülk: 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

Hedef mülk: 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>
)}

Aşağıdaki isteğe bağlı öğe görünümlerini her zaman koşullu olarak oluşturun:

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

Reklamda isteğe bağlı öğeler yer almıyorsa uygulamanız boş kullanıcı arayüzü öğeleri göstermemelidir.

Medya içeriğini görüntüleme

NativeAdMediaView bileşeni, reklamın video ve resim gibi görsel öğelerini oluşturur. Reklamda video içeriği varsa medya görünümü videoyu arabelleğe alır ve oynatır. Reklam yalnızca resim içeriği barındırıyorsa medya görünümü bunun yerine birincil resmi oluşturur.

Medya yeniden boyutlandırma modunu uygulama

Resimlerin medya görünümü kapsayıcısında nasıl ölçeklendirileceğini kontrol etmek için NativeAdMediaView bileşenine resizeMode özelliğini uygulayın:

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

Kullanılabilir ResizeMode değerleri şunlardır:

Medya en-boy oranını ayarlama

Medya görünümü düzeninizin en boy oranıyla eşleşen reklam öğeleri istemek için NativeAdRequest örneğinde aspectRatio özelliğini belirtin.

Aşağıdaki örnekte, yatay medya en boy oranına sahip bir doğal reklam istenmekte, başarılı olunduğunda yüklenen reklam döndürülmekte ve başarısız olunduğunda bir hata mesajı kaydedilmektedir:

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

Kullanılabilir NativeMediaAspectRatio değerleri şunlardır:

Reklam etkinliklerini dinleme

Gösterimler veya tıklamalar gibi reklam yaşam döngüsü olayları hakkında sizi bilgilendirmek için NativeAdView bileşenine etkinlik geri çağırmaları iletin. Kullanılabilir tüm geri çağırmalar için AdEventCallback sayfasına bakın.

Aşağıdaki örnekte, tam ekran içerik görüntüleme veya kapatma gibi reklam etkinlikleri için etkinlik geri çağırmaları NativeAdView bileşenine iletilmektedir:

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

Örneğin tamamını görüntüleyin

Bu bölümde, yeniden kullanılabilir bir doğal reklam kartı bileşeni oluşturmayla ilgili eksiksiz bir örnek verilmektedir.

Aşağıdaki örnekte, reklam ilişkilendirme rozeti gösteren, ayrı ayrı doğal reklam öğelerini koşullu olarak oluşturup kaydeden ve medya içeriğini NativeAdMediaView bileşeniyle oluşturan NativeAdCard bileşeni tanımlanmaktadır:

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