DEV Community

Cover image for Adding Google AdMob to Expo Apps

Adding Google AdMob to Expo Apps

Josie Daw on January 21, 2024

Table of Contents 1. Getting Started 2. Using Expo Development Builds 3. Preparing AdMob 4. Using React Native Google Mobile Ads 5. Cre...
Collapse
 
shanejones profile image
Shane • Edited

Hey Josie!

Thanks for this, I rarely comment on posts but wanted to let you know after following FAR TOO MANY guides around getting Ads in my Expo app your straightforward guide was the only one that made sense and now works for me.

Collapse
 
josie profile image
Josie Daw

Thanks Shane! I too experienced going through all those guides and decided to make a more definitive one 😅

Collapse
 
leandro_cunha profile image
Leandro Cunha

Hey @josie thank you for the article, helped a lot. Just an update about the app.json config, the app_ids should be placed inside the plugins sections, like:



// <project-root>/app.json
{
  "expo": {
    "plugins": [
      [
        "react-native-google-mobile-ads",
        {
          "androidAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx",
          "iosAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx"
        }
      ]
    ]
  }
}



Enter fullscreen mode Exit fullscreen mode
Collapse
 
ppillo profile image
José Carlos López

It's the kind of tutorial that you want to start playing!

Collapse
 
enegraso profile image
Federico Ortiz

Thanks to this tutorial I was able to add the ads although in test form, for now. I have 2 queries:

How to obtain the googleadsmobile.json for my next apps, since in the app I am testing I use an old file obtained from a previous app made with Android Studio (I hope not to use it again), I don't know if it will work in production.
The other question is whether with the command: eas build -p android (or ios), the release for the desired store will be generated correctly.

Thank you so much.

Collapse
 
josie profile image
Josie Daw

Hello Federico,
For the first question, I am not sure about googleadsmobile.json because it is not included in the guide above. You may be following a slightly different or older integration strategy.
For the second question, the eas build command will build the app properly but you will need to submit it to the App Store and Play Console after the build is finished.

Collapse
 
enegraso profile image
Federico Ortiz

Hello, I tell you that I generated the file from firebase.io for the app by entering the package name as it appears in app.json and it was a 10!
And indeed the compilation also looks very good.
Now the issue is that since it is an app from a news agency, Google Play has not yet published it to me, since it requests several modifications to ensure that the app adheres to its policies.
Thank you so much

Collapse
 
mihyo profile image
minyo

I'm going crazy. Please help me.
I'm proceeding with the post you wrote, but I keep getting the following errors.
Is admob unavailable on expo...

should NOT have additional property 'react-native-google-mobile-ads'

Collapse
 
josie profile image
Josie Daw

When you use Admob with Expo, you cannot use the normal Expo development process. You have to use Expo development builds as outlined in this step.

Collapse
 
mihyo profile image
minyo

Thank you so much.
You must have been really stupid.
It was a simple one, but I didn't see it.

Collapse
 
tosey profile image
Tosin Seyi

Will the react-native-google-mobile-ads work on production with the expo framework?

Collapse
 
josie profile image
Josie Daw

Yes, you can see how to make it work on production here: dev.to/josie/adding-google-admob-t...

Collapse
 
tosey profile image
Tosin Seyi • Edited

Yes. Thank you. So i have followed your instructions accordingly on how to make it work on production but when i build my project, i'm getting the following error:

A problem occurred evaluating project ':react-native-google-mobile-ads'.

Cannot get property 'googleMobileAdsJson' on extra properties extension as it does not exist

Kindly help if you have faced and solved this kind of error before.

Thread Thread
 
josie profile image
Josie Daw

It looks like you have added googleMobileAdsJson somewhere? That is not something included in the guide above. If you can find that by searching your project, that should help you to debug the problem.

Thread Thread
 
tosey profile image
Tosin Seyi

I didn't add it. It came with the react-native-google-mobile-ads package after the installation. Because it gave me reference to the error in the 'build.gradle' file of the package and i found it there.

But now, i honestly don't know what to do to make the 'googleMobileAdsJson' error disappear so that i can have a successful build to production. I have tried a few things but none of them worked so far.

Collapse
 
antonio_oliveira_6343ec0c profile image
Antonio Oliveira • Edited

I have a app that was only on pure native java, recently I change everything and did a version using expo/react native and implemented ads with this tutorial.
Apparently everything is working fine, but my ads performance is 80% lower and becoming worst each new day. What could be? 🥲🥲
Please, help.

Collapse
 
antonio_oliveira_6343ec0c profile image
Antonio Oliveira

)=
Image description

Collapse
 
david_khayutin_4c149c365c profile image
David Khayutin

Thanks for the article Josie

One question - will real ads show in staging environment or is it right that they will only show in production when app is on app store / google play store

Collapse
 
josie profile image
Josie Daw

When you are in the staging environment, it should show test ads as long as you have correctly registered your devices on AdMob. If you are seeing real ads in staging, make sure that the devices are registered properly on AdMob.