How to Implement AdMob Ads in a React Native App

Monetizing mobile apps is a common practice, and Google AdMob is one of the most reliable platforms to serve ads. Integrating AdMob into your React Native app can provide a consistent revenue stream while maintaining a smooth user experience. This guide will take you through the process step-by-step, complete with code examples, to help you integrate AdMob ads effectively in your React Native app.

Why Choose Google AdMob?

Google AdMob offers powerful tools for displaying banner ads, interstitial ads, and rewarded video ads. Key benefits include:

• Global Reach: Access to millions of advertisers worldwide.
• Flexibility: Customizable ad formats and placements.
• Detailed Insights: Advanced analytics to optimize ad performance.
• Easy Integration: Comprehensive SDK support for multiple platforms.

Prerequisites

Before you begin, ensure you have the following:

1. A working React Native project.
2. Node.js installed on your system.
3. Basic knowledge of React Native development.
4. A Google AdMob account with ad unit IDs.

Step 1: Install Dependencies

1. Add the react-native-google-mobile-ads library

Install the required package using npm or Yarn:

npm install react-native-google-mobile-ads

Or with Yarn:

yarn add react-native-google-mobile-ads

2. Install CocoaPods (iOS only)

Navigate to the iOS folder and run:

cd ios && pod install

This ensures that all native dependencies are linked correctly.

Step 2: Configure Firebase

AdMob requires Firebase for integration. Follow these steps:

1. Add Firebase to Your Project

• Create a Firebase project at Firebase Console.
• Download the google-services.json (for Android) and GoogleService-Info.plist (for iOS).

2. Integrate Firebase in Your App

For Android: Place the google-services.json file in the android/app/ directory.

For iOS: Place the GoogleService-Info.plist file in the Xcode project under the Runner folder.

Update your project configuration files:

Android (build.gradle):

// android/build.gradle
dependencies {
    classpath 'com.google.gms:google-services:4.3.15' // Add this line
}

Apply the plugin in app/build.gradle:

apply plugin: 'com.google.gms.google-services'

Step 3: Initialize AdMob

1. Import and Initialize AdMob

Add the initialization code in your entry file, typically App.js or index.js:

import { AdsConsent, initialize } from 'react-native-google-mobile-ads';

initialize()
  .then(adapterStatuses => {
    console.log('AdMob initialized:', adapterStatuses);
  });

2. Request User Consent (Optional)

If your app targets regions with privacy regulations, ensure user consent:

AdsConsent.requestInfoUpdate().then(state => {
  if (state.isConsentFormAvailable) {
    AdsConsent.showForm();
  }
});

Step 4: Implement Ad Formats

AdMob supports multiple ad formats. Here’s how to integrate the most common ones:

1. Banner Ads

Banner ads are small rectangular ads displayed at the top or bottom of the screen.

Code Example:

import { BannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads';

const BannerExample = () => {
  return (
    <BannerAd
      unitId={TestIds.BANNER} // Replace TestIds.BANNER with your ad unit ID
      size={BannerAdSize.FULL_BANNER}
      onAdFailedToLoad={(error) => console.error('Banner ad failed to load', error)}
    />
  );
};

export default BannerExample;

2. Interstitial Ads

Interstitial ads are full-screen ads shown at transition points, such as between game levels or content pages.

Code Example:

import { InterstitialAd, AdEventType, TestIds } from 'react-native-google-mobile-ads';

const interstitial = InterstitialAd.createForAdRequest(TestIds.INTERSTITIAL);

interstitial.onAdEvent((type, error) => {
  if (type === AdEventType.LOADED) {
    interstitial.show();
  } else if (type === AdEventType.ERROR) {
    console.error('Interstitial ad failed to load', error);
  }
});

interstitial.load();

3. Rewarded Ads

Rewarded ads provide incentives, such as in-app currency or extra features, for user interaction.

Code Example:

import { RewardedAd, AdEventType, TestIds } from 'react-native-google-mobile-ads';

const rewarded = RewardedAd.createForAdRequest(TestIds.REWARDED);

rewarded.onAdEvent((type, error, reward) => {
  if (type === AdEventType.LOADED) {
    rewarded.show();
  } else if (type === AdEventType.REWARD_EARNED) {
    console.log('User earned reward:', reward);
  } else if (type === AdEventType.ERROR) {
    console.error('Rewarded ad failed to load', error);
  }
});

rewarded.load();

Step 5: Test Your Ads

Always test ads using Google-provided test IDs to avoid violating AdMob policies. Replace your ad unit IDs with TestIds.BANNER, TestIds.INTERSTITIAL, or TestIds.REWARDED during development.

Step 6: Deploy and Monitor

Once your ads are integrated and tested, you can:

1. Replace test IDs with real ad unit IDs from your AdMob account.
2. Monitor ad performance through the AdMob dashboard to optimize your revenue.

Common Issues and Troubleshooting

1. Ads Not Showing:
   • Verify that your ad unit IDs are correct.
   • Check for network connectivity.
   • Ensure you’ve followed Firebase integration steps.
2. App Crashes:
   • Ensure all dependencies are properly linked (run pod install for iOS).
   • Verify the AdMob SDK version compatibility with React Native.
3. Policy Violations:
   • Use test IDs during development.
   • Adhere to AdMob’s ad placement policies.

Adding AdMob ads to your React Native app is a straightforward process that can significantly enhance your app’s monetization potential. By following this guide, you’ve learned how to configure Firebase, integrate various ad formats, and troubleshoot common issues.

Start experimenting with different ad placements and formats to find what works best for your app. With consistent monitoring and optimization, you can maximize revenue while maintaining a great user experience.