React Native Admob – Reklam Ekleme

Ücretsiz olarak geliştirilen uygulamalarda kazanç sağlayabilmek için en çok kullanılan yöntem reklam eklemedir. Mobil uygulamalarda en efektif ve kazançlı olan reklam markası da Admob reklamlarıdır.

React Native ile geliştirdiğimiz uygulamalarda Admob reklamları nasıl eklendiğini ve gösterildiğini basitçe anlatmaya çalışacağız.

Admob Kütüphanesini Ekleme

Öncelikle Admob kütüphanemizi kurmamız gerekmektedir. Bunun için react-native-admob kütüphanesini install komutu ile kurup link komutu ile uygulamaya bağlacağız.

npm i –save react-native-admob@next

react-native link react-native-admob

Kütüphanemiz kurulmuş vaziyettedir. Ancak bazen link komutu ile bağlama işi gerçekleşmeyebilmektedir. Bu durumu kontrol için Libraries klasöründe eklediğimiz kütüphaneye ait bir dosya var mı ya da eksik mi diye bakabiliriz. Eğer eksik ise ya da emin değilsek bağlama işini manuel olarak yapmamız gerekmektedir.

IOS için SDK Ekleme

Kütüphanemizi kurduktan sonra ise IOS için GoogleMobileAds SDK sı projemize eklenmesi gerekmektedir. GoogleMobileAds SDK eklemek için projemizin ios klasöründe Podfile açıp içerisine aşağıdaki ifadeyi eklemeliyiz.

pod ‘Google-Mobile-Ads-SDK’

Podfile dosyasını kapatıp alttaki komut ile SDK yüklemesini tamamlayabiliriz.

pod install –repo-update

Yukarıdaki otomatik yöntem birçok zaman düzgün çalışmayabilir. Bu yüzden manuel yöntemi tercih edebiliriz ki an itibari ile daha sağlıklı olduğunu söyleyebilirim. Manuel yöntemde şu linkten SDK zip dosyasını indirip içindekileri çıkartıyoruz. .framework uzantılı dosyayı XCode projemizde Frameworks klasörüne sürükleyip bırakıyoruz. Böylece SDK yükleme işi de tamamlanmış oluyor. Android için herhangi bir işlem gerekmemektedir. Çünkü Play Services ile otomatik olarak bu özellikler gelmektedir.

IOS için Admob ( Xcode )

Son olarak yine IOS için ufak eklemeler yapmak gerekmektedir. XCode açıp AppDelegate.m dosyamıza geliyoruz. Üst kısma aşağıdaki ifadeyi ekliyoruz.

@import GoogleMobileAds;

Daha sonra ise AppDelegate içerisine return Yes; ifadesinden önce alltaki ifadeyi ekliyoruz.

[GADMobileAds configureWithApplicationID:@”YOUR_ADMOB_APP_ID”];

YOUR_ADMOB_APP_ID kısmına Admob hesabınızdaki uygulama kimlik bilgisini giriyorsunuz. Şöyle birşey;

ca-app-pub-1111111111111111~1111111111

React Native Admob Reklam Gösterimi

React Native ile geliştirmekte olduğumuz uygulamamıza Admob reklamları ekleyebiliriz. Örnek olarak Banner ve Interstitial reklamlarını eklemeyi ve göstermeyi belirteceğim.

Öncelikle Banner reklam için AdMobBanner, Interstitial reklam için ise AdMobInterstitial kütüphanelerini import ediyoruz.

Banner reklam için aşağıdaki kod parçacığını Banner reklamın gösterilmesini istediğimiz yere ekliyoruz.

adUnitID alanına Banner reklam kimlik numaramızı girmeliyiz. Bu örnekte Google tarafından verilen test Id kullanılmıştır. Test için deneyebilirsiniz.

Interstitial reklam için ise aşağıdaki kod parçacığı ile gösterebilmekteyiz. Yine burada da test Id kullanılmıştır.

Teşekkürler.