When you're looking to monetize your app, there are quite a few options available to you, and in-app ads are one of the easiest options to implement. In this tutorial, we'll take you through the process you can use to implement AdMob functionality in your React Native app.
6 October 2021
Displaying ads in-app is an increasingly popular method when it comes to monetizing your app. If you’ve ever used Facebook, Twitter, or Instagram, odds are you’ve seen them pop up on your feed. They’re common additions to the movies or videos you watch, the games you play, and the streaming services you use to listen to your favorite music. Many apps even draw on our distaste for interruption by offering to cut the ads out of our experience for a fee, and believe it or not, these tactics can really add up!
While there are quite a few options available to someone looking to monetize their app, few options are as easy to implement as in-app ads. That’s why we created this tutorial! Today, we’ll discuss how you can implement AdMob functionality in your React Native app. But first…
AdMob, a portmanteau for “advertising on mobile”, provides a way for Google to aid app developers in their pursuit of earning more money from their apps. The ads themselves are created and paid for by advertisers looking to promote their product, and it works by matching your app to ads based on criteria that you have set. As advertisers pay different prices for different ads, the amount you earn will vary, but it’s an easy method for bringing in extra revenue.
Banner: This is a basic, rectangular-shaped ad that appears at the top or bottom of the device screen.
Rewarded: This is a full-page ad that engages users by rewarding points or extra health in games. These ads support video content, and they are served only after the user chooses to view them.
Interstitial: These are full-page ads that appear at natural breaks and transition points like while you’re waiting for the next level in your game to load, and they support both video content and static ads.
Native: This is a kind of customizable ad format created to match the look and feel of your app. These ads appear naturally in line with your existing app content without distracting from the user experience. As with other ad types on this list, they support video content, but they can only be added in Native apps.
Now that we know the different options available to us, let’s identify the prerequisites you’ll need to implement AdMob ads in your React Native app.
Quick Note: Although you can implement AdMob ads in both iOS and Android apps, we’re going to be using an Android emulator for the purposes of this tutorial.
Now that we’ve gotten the prerequisites out of the way, here’s a breakdown of the steps we’ll take in this tutorial to implement AdMob in our Android emulator.
To integrate AdMob ads in a React Native app, we first need to get our App and Banner IDs. If you haven’t created an account yet, be sure to do so now before proceeding. Once you have accessed your account, navigate to your AdMob dashboard and create a new app by clicking the GET STARTED button.
From here, you’ll be taken to the screen below. For platform, choose “Android”, and select “Yes, the app is listed on a supported app store” before clicking on CONTINUE.
After creating our app, our app name will appear in the side menu. If we navigate to “App Settings” using the menu on the left, we can find our App ID underneath our App name as shown in the screenshot below. This App ID will be used in our React Native app to allocate the ad space.
From here, we’ll want to head over to “App overview” and create an Ad Unit using the button.
Once we click on the ADD AD UNIT button, we’ll be taken to the screen below. Here we can see the types of Ad units and the steps required to steps create each Ad unit. We can select an Ad unit by clicking the Select link at the bottom of each card. Using this section, we can add multiple types of Ad units to the app, but for our purposes, we’re going to stick with a simple Banner unit.
Once we select our Ad type, we can provide any name that we’d like for it. With that being said, choose a relevant name that will lend to clear documentation and understanding.
After we fill in our Ad unit name and click the Create ad unit button, we will receive the Ad unit ID.
After creating an Ad unit, we can also get Ad unit ID from the dashboard.
Next, we’re going to want to install our expo client, and we can do so using the command below.
npm install -g expo-cliAfter installing our expo client, we can create a React Native project using the following commands.
expo init AdmobApp
cd AdmobApp
From here, you’re going to want to go inside the project directory and run the project using the expo start command.
expo start
Next, we can run our Android emulator by clicking on the “Run on Android/emulator” option highlighted in the screenshot below. It is always better to run the emulator from the Android Studio before you run the project.
Once that step is complete, we can install the expo AdMob package to our app using the below command.
npm i expo-ads-admob
From here, we just need to add the AdMob App ID to app.json.
//app.json
{
"name": "AdmobApp",
"displayName": "AdmobApp",
"expo": {
"name": "AdmobApp",
"slug": "AdmobApp",
"version": "1.0.0",
"assetBundlePatterns": [
"**/*"
],
"android": {
"config": {
"googleMobileAdsAppId": "ca-app-pub-5750711746491614~7905204041"
}
},
"ios": {
"config": {
"googleMobileAdsAppId": "ca-app-pub-3940256099942544~1458002511"
}
}
}
}
Now our app is primed and ready for AdMob ads!
Now it’s time to create our banner ad! To do this, we need to import an AdMob dependency called AdMobBanner.
import React from "react";
import { Platform, View } from "react-native";
import { AdMobBanner } from "expo-ads-admob";
const BannerAd = () => {
const unitID = Platform.select({
ios: "ca-app-pub-3940256099942544/2934735716",
android: "ca-app-pub-5750711746491614/5984590042",
});
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<AdMobBanner
adUnitID={unitID}
bannerSize="smartBanner"
servePersonalizedAds={true}
style={{
padding: 30,
}}
/>
</View>
);
};
export default BannerAd;
When using the <AdmobBanner /> tag, we should consider some of its properties, such as:
Once we set the banner properties to display the way we’d like it to, we can import BannerAd.js to App.js, as shown below.
import React, { useState } from "react";
import { View, Button, StatusBar } from "react-native";
import BannerAd from "./BannerAd";
When you run the code, you should be able to see the banner ad.
Now let’s see how we can go about integrating Interstitial Ads into our React Native app. Interstitial ads are full-page, interactive ads that work on a trigger.
To start, let’s import the Interstitial ad to App.js as shown in the screenshot below.
import React from "react";
import { View, Button, StatusBar, Text } from "react-native";
import { AdMobInterstitial } from "expo-ads-admob";
// AD UNIT ID FOR INTERSTITIAL AD
const interstitialID = Platform.select({
ios: "ca-app-pub-39402560777742544/44777910",
android: " ca-app-pub-5750711746491614/3737075935",
});
Next, create the following function to display Interstitial ads.
// INTERSTITIAL AD
function showInterstitial() {
AdMobInterstitial.setAdUnitID(interstitialID);
AdMobInterstitial.requestAdAsync().then(() => {
AdMobInterstitial.showAdAsync().catch((e) => console.log(e));
});
}
Following this step, we can call the showInterstitial () function as seen below.
<Button title="Interstitial Ad" onPress={showInterstitial} />
Once you run the code, it should show your Interstitial ad in full screen.
AdMob Reward ads are a kind of video ad similar to Interstitial ads. Similar to Interstitial ads, they also work on trigger mechanisms, and the reward ads force users to watch a video up to a certain length in order to acquire specific rewards.
Let’s integrate Reward Ads into the screen. To accomplish this, we need to import the AdMobRewarded component from the expo-ads-admob package.
import React from "react";
import { View, Button, StatusBar, Text } from "react-native";
import { AdMobRewarded } from "expo-ads-admob";
Add your ad unit ID to App.js
// AD UNIT ID FOR REWARDED AD
const rewardedAdID = Platform.select({
ios: "ca-app-pub-3940256077742544/1712489713",
android: " ca-app-pub-5750711746491614/2844464964",
});
Next, create a function to show Reward ads.
// REWARD AD
function showRewardAds() {
AdMobRewarded.setAdUnitID(rewardedAdID);
AdMobRewarded.requestAdAsync().then(() => {
AdMobRewarded.showAdAsync().catch((e) => console.log(e.message));
});
}
Last but not least, call the showRewardAds () function as shown below.
<Button title="Rewarded Ad" onPress={showRewardAds} />
As you can see from this tutorial, AdMob ads really are easy to add to an app, and if you’re looking for new revenue streams for your app, they’re a fantastic option to help you get started.
Are you interested in seeing a specific tutorial here on the blog? Please feel free to share your thoughts with our Content Marketing Manager at eryn@crowdbotics.com!
Have you checked out the Crowdbotics App Builder yet? Designed to facilitate the rapid development of universal software applications, it allows developers to scaffold and deploy working apps quickly by identifying the best packages for a given feature set.
Consider Crowdbotics your all-in-one dashboard for app development! Do you have a project that you’re not sure where to start? We can help—our expert team of PMs, designers, developers, and engineers are here to help you go from idea to deployment 3x faster than manual development. To learn more and get a detailed estimate, get in touch with us today!