Build WordPress Client App with React Native #21 : Firebase Admob

This series intends to show how I build app to serve content from my WordPress blog by using react native. Since, my blog is talking about react-native, the series and the articles are interconnected. We will learn how to set-up many packages that make our lives comfortable and learn how to deal with WordPress APIs. Here, the most prominent features talked about in the book are the dark theme , offline mode, infinite scroll and many more. You can discover much more in this series.this inspiration to do this tutorial series came from the React Native App Templates from instamobile

In case of wanting to learn from the beginning, all the previous parts for this tutorial series are available below:

Integrating your mobile app with AdMob helps you to earn more revenue while delivering the users a better user experience. In this chapter, you will learn how to include AdMob in your mobile app to easily monetize your product with relatively less work.

The first step of adding AdMob to your mobile app, be it android or ios, is creating an AdMob account here. After setting up your account, you can follow the steps that suit your mobile OS.

Add AdMob to Your iOS Apps

iOS app developers have the option to integrate AdMob to an app built with or without the use of Firebase. Here, we will be considering how to add AdMob to an app built with Firebase.

You can add the AdMob dependencies to your project using the following command.

in iOS install Google-Mobile-Ads-SDK

pod 'Firebase/AdMob'

Then run pod install in your command line to install the dependency.

Update the app’s Info.plist file with a GADApplicationIndentifier key using your AdMob app ID as its value.

<key>GADApplicationIdentifier</key> 
<string>ca-app-pub-2547344479047582~xxxxxxx</string>

Add Banner Ads to an iOS App Using AdMob

You can easily add banners to your already setup Firebase ios app now.

First, create a banner from the AdMob dashboard.

Then, install and import react-native AdMob package. Now you can import Firebase to the home screen and create an AdMob Banner object and an AdRequest. When setting up a banner ID, you can use a platform component as a condition.

import firebase from 'react-native-firebase';
const Banner = firebase.admob.Banner;
const AdRequest = firebase.admob.AdRequest;
const request = new AdRequest();
import ContentCard from '../components/ContentCard';
const unitId =
  Platform.OS === 'ios'
    ? 'ca-app-pub-2547344479047582/1964568575'
    : 'ca-app-pub-2547344479047582/3578793688';

Now you can add the banner to the home screen.

<View> 
<Headline style={{marginLeft: 30}}>Lastest Post</Headline> 
<Banner unitId={unitId} 
 size={'SMART_BANNER'} 
 request={ request.build()} onAdLoaded={() => { console.log('Advert loaded'); }} 
/>

The resulting banner on your home screen would look like this.

Add AdMob to Your Android App

Add Banner Adds to an Android App Using AdMob

In your build.gradle file, add the following dependency to start using AdMob in your app.

dependencies { 
     ......other dependencies implementation 
    "com.google.firebase:firebase-ads:17.2.1"

Import the following package to the MainApplication.js file in your project.

import io.invertase.firebase.admob.RNFirebaseAdMobPackage;

Add **packages.add(new RNFirebaseAdMobPackage())**; to your code to get the package.

@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
// Packages that cannot be autolinked yet can be added manually here, for example:
// packages.add(new MyReactNativePackage());
packages.add(new RNFirebaseDatabasePackage());
**packages.add(new RNFirebaseAdMobPackage());**

Finally, add the AdMob publisher key to your AndroidManifest.xml to complete the creation of the banner ad.

<meta-data 
   android:name="com.google.android.gms.ads.APPLICATION_ID" 
   android:value="ca-app-pub-2547344479047582~8100137404"
/>

The resulting page would look like this with the new addition of the banner ad.

Summary

Now that you understand how to add AdMob, generating revenues from your mobile app would be an easier task. You can now dig deeper into the field and find out more about adding other types of adds, like interstitial, native, and rewarded adds, in addition to banner ads.

Also published on Medium.