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…
What is AdMob?
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.
Types of AdMob Ads
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.
Prerequisites
- An active
After creating an Ad unit, we can also get Ad unit ID from the dashboard.
Step 2 – Install Expo
Next, we’re going to want to install our expo client, and we can do so using the command below.
npm install -g expo-cliStep 3 – Create a Simple React Native App
After installing our expo client, we can create a React Native project using the following commands.
expo init AdmobAppcd AdmobAppFrom here, you’re going to want to go inside the project directory and run the project using the expo start command.
expo startOnce the project runs, you should be able to see something like this:
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.
Step 4 – Install Other Dependencies
Once that step is complete, we can install the expo AdMob package to our app using the below command.
npm i expo-ads-admobFrom 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!
Step 5 – Create Your Banner Ad
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:- adUnitID: The ad unit ID retrieved from your AdMob account.
- bannerSize: The size of the banner ad (ex; smartBanner, fullBanner, banner)
- servePersonalizedAds: Whether you want to show personalized ads. This should be a boolean value.
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 example similar to how it is shown in the screenshot below.
Step 6 – Create Different Types of Ads
Interstitial Ads
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";Add Your Ad Unit ID
// 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, as you can see in the following screenshot.
Reward Ads
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} />Once you run the code, the Reward ad show pop up similar to the one in the screenshot below.
Conclusion
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!