Banner reklamları oluşturma

Banner reklamlar, uygulamanızın düzeninde sabit bir konumu (ör. cihaz ekranının üst veya alt kısmı) kaplar. Bu reklamlar, kullanıcılarınız uygulamanızla etkileşim kurarken ekranda kalır ve belirlediğiniz bir süre sonra yenilenir. Sabit uyarlanabilir banner'lar, belirttiğiniz reklam genişliğini kullanarak her cihaz için reklam boyutunu kullanır.

Bu sayfada, sabit uyarlanabilir banner reklamların React Native yerel uygulamalarına nasıl entegre edileceği açıklanmaktadır.

Ön koşullar

Devam etmeden önce şunları yapın:

Android 

ca-app-pub-3940256099942544/9214589741

iOS 

ca-app-pub-3940256099942544/2435281174

Reklam boyutunu alma

Sabit uyarlanabilir banner reklam istemek için mevcut reklam kapsayıcı genişliğinizi yoğunluktan bağımsız piksel (dp) cinsinden belirterek AdSize.getLargeAnchoredAdaptiveBannerAdSize yöntemini çağırın. Bu yöntem, AdSize nesnesine çözümlenen bir promise döndürür.

Aşağıdaki örnekte, sabit uyarlanabilir banner reklamın reklam boyutu alınır ve döndürülür:

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

Reklam yükleme

AdSize nesnesi aldıktan sonra reklam birimi kimliğiniz ve reklam boyutunuzla BannerAd sınıfında load yöntemini çağırın.

Aşağıdaki örnekte, reklam boyutu ve reklam birimi kimliğiyle sabit uyarlanabilir banner reklam yüklenir, işlem başarılı olursa yüklenen BannerAd örneği alınır ve başarısız olursa hata kaydedilir:

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

Reklamı yenileme

Reklam biriminizi yenilenecek şekilde yapılandırdıysanız reklam yüklenemediğinde başka bir reklam istemeniz gerekmez. Google Mobile Ads SDK for React Native, AdMob kullanıcı arayüzünde belirttiğiniz yenileme hızına uyar. Yenilemeyi etkinleştirmediyseniz yeni bir istek gönderin. Yenileme hızı ayarlama gibi reklam birimi yenileme hakkında daha fazla bilgi için Banner reklamlar için otomatik yenilemeyi kullanma başlıklı makaleyi inceleyin.

Banner reklam gösterme

Yüklenen bir BannerAd örneğini görüntülemek için reklam örneğini görünüm hiyerarşinizdeki bir BannerAdView bileşeninin ad özelliğine iletin.

Aşağıdaki örnekte bir reklam gösterilmekte ve bileşen kaldırıldığında reklam imha edilmektedir:

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

Bu örnekte, bileşen kaldırıldığında veya reklam örneği değiştirildiğinde destroy yöntemi çağrılır. Bu işlem, reklamın kullandığı belleği ve kaynakları serbest bırakır.

Reklam etkinliklerini dinleme

Reklam gösterimleri ve tıklamaları gibi reklam etkinliklerini dinlemek için BannerAdView bileşeninde geri çağırmalar ayarlayın. Tüm geri çağırmalar için BannerAdViewProps sayfasına bakın.

Aşağıdaki örnekte, banner reklam etkinliklerini dinlemek için geri çağırmalar ayarlanmaktadır:

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

Bu örnekte; reklam kapatma, gösterim, tıklama, tam ekran sunum, tahmini reklam geliri, yenileme başarıları ve başarısızlıkları gibi reklam etkinlikleri dinlenir.

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

Bu bölümde, bir banner reklamın React Native bileşenine entegre edilmesiyle ilgili tam örnek verilmektedir.

Aşağıdaki örnekte, bir banner reklam React Native bileşenine entegre edilmekte ve reklam örneği durumda yönetilmektedir:

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

BANNER_AD_UNIT_ID yerine reklam birimi kimliğinizi yazın.

Sonraki adımlar

Banner reklamları entegre ettikten sonra aşağıdaki konuları inceleyin: