Howdy!
I know where you’re at this moment, I’ve been there too, you’re almost finishing your brand new React Native app BUT, you don’t know how you’ll be making money from it, well… ads are a way to do that.
Ads are not the biggest source of income for your application and they definitely should not be the primary source of your plan to monetize but they can definitely show interesting numbers if:
You have a lot of users / sessions.
You know how to implement them.
Here’s a quick guide for that.
This guide will consider you’re using Expo and that you want to implement only banners (those small ads at the bottom), if that’s not the case please refer to this package docs here
So, first of all. Add expo-ads-admob to your expo project by doing:
expo install expo-ads-admob
Then you’ll need to do changes on app.json should look like this:
{
"expo": {
"name": "My First App with Ads",
// ...
"android": {
// ...
"config": {
// ...
"googleMobileAdsAppId": <Your android app id here>
}
},
"ios": {
// ...
"config": {
// ...
"googleMobileAdsAppId": <Your ios app id here>
}
}
}
}
Note that both googleMobileAdsAppId are different depending on the OS that your app will run.
We’re ready for some React code!
import React, { useEffect } from 'react';
import { StyleSheet, View } from 'react-native';
import {AdMobBanner, setTestDeviceIDAsync} from 'expo-ads-admob';
export default function App() { useEffect(async() => {
await setTestDeviceIDAsync('EMULATOR');
}, []) return (
<View style={styles.container}>
<AdBannerComponent size="banner"/>
</View>
);
}
const AdBannerComponent = ({size}) => {
return (
<AdMobBanner
bannerSize={size}
adUnitID="<Your Ad Unit ID goes here>"
onDidFailToReceiveAdWithError={Error handling here}
/>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center',
},
});
In the code above we’re creating a component that receives size as prop and is able to display a particular banner Ad, note that the setTestDeviceIDAsync won’t be needed in prod, is just for testing purposes.
Notes:
setTestDeviceIDAsync: Sets the test device ID. For simulators/emulators you can use 'EMULATOR' for the test device ID.
This is the outcome of this small example:
If you reached until this point hopefully now you understand how to monetize your apps using Google AdMob.
If you’re looking to start a new product, build an app, or create a platform for your business, we can help! Develative is a tech company that helps startups and enterprise brands to reach their digital goals by providing development and staffing augmentation services.
Sounds interesting? Hit us up here
About the author
Marcos Ocon
Marcos is the Chief Operating Officer of Develative. He's in charge of several departments and currently manages a team of +50 engineers, SDRs and HR analysts. He enjoys nature, playing golf with friends and competitive Judo.