Introduction to AdMob in Ionic
What's up, Simonix, and welcome back to a new quick win. Today we're talking about a topic that you maybe requested like a hundred times, and that is AdMob. So that means we're going to integrate ads into our Ionic application using a Capacitor plugin. And you're going to see it's actually super easy. I also use this in one of the applications I recently worked on to add like a reward dialogue, and that's also what we're going to do. We're going to actually take a look at three different types of ads. We're going to show banner ads, we're going to show interstitial, so covering the full screen, and then we also going to take a look at reward applications.
And in the end, everything will work on both iOS and Android. It really is super easy. If you want to check out the source code, link below the video for all Ionic Academy members. And if you're not yet a member of the Ionic Academy, go check it out right now, ionicacademy.com, my place to help you with everything Ionic. But today, let's dive into the video. And before you do it, make sure you hit the like and subscribe for all the upcoming videos in the future. And now let's create some cool ads.
Initial Project and Plugin Setup
Alright, let's get started with today's tutorial. So we're going to start, as always, with a blank new Ionic application. And the only thing we need is the Capacitor Community AdMob plugin. We're going to take a look at it later. It's actually a quite popular plugin inside the Capacitor community, and it allows us to use banner, interstitial, and reward for both iOS and Android. So let's add the installation and then you can also run the first build so you can add the native platforms for iOS and Android.
But before we continue with the actual code in here, we're going to dive into Google AdMob because configuring these things is so much fun, usually just like universal links or in-app purchase. Now, if you don't have an account, create one for free, and then we can get started within Google AdMob.
Configuring Your App in Google AdMob
So apps.admob.com, there you should see apps. And I already got a little list in here, but that doesn't really matter. So I'm just going to add a new app. And what we need is an app for both iOS and Android. So you can create one for iOS, you can create one for Android. It doesn't really matter if it is already listed inside the store, so you can simply select no if it's not yet released or you're just starting to work on it, and later update this.
So I did this and I end up with two applications, Devdactic in here, Crossing Numbers. It's a game you might see this or hear about more in the future, but more importantly, we got two applications in here. Okay, the most important part is the ID here, the App ID for iOS and Android. So we're going to come back to that in a tiny second.
Native iOS Project Configuration
Because the next step is to open our Info.plist, which is the iOS file which contains some general information. And within that file, inside of the dictionary, we're going to have to add this block: manager.app = true. We then need our application identifier, and this is now exactly the number you find in here. So just go ahead, copy this and paste it in here. Of course, don't use mine, use your own ID.
This is another block that I found on the plugin page right here within the code. I'm actually not 100% sure if we need this or why we need this. There's no word about this inside the documentation, so perhaps just give it a try without this. I'm not an ad expert, so probably you need this. But what you need, or what you most likely need as well, is the NSUserTrackingUsageDescription in case you track your users in the app and use personalized apps. So in that case, you're going to have to allow this or add this string, and then this will show up in the dialog for the user. Perhaps maybe I can delete this. Let me try. I'm going to remove the application up front from my device so we will hopefully see this again in the future. Okay, this is the usage of the iOS ID.
Native Android Project Configuration
Now of course, we need the same for Android. So we're going to go into the strings.xml file, which is inside android/app/src/main/resources. Scroll down to values/strings. So in here we got some predefined strings that I didn't change, but most importantly, we got this line: admob_app_id, and in here put your own ID, but for Android this time. I'm actually not sure what would happen if I would use the same ID for iOS and Android. That's something for an adventurous person to figure out.
Once you've defined that ID in here, we also need to declare it inside the Android manifest. So that is once again in android/app/src/main. Actually, it's not in that folder, it's right here. So it's a bit easier to find. And then after the application, you can add this block of metadata. You don't need to replace this with your own ID or this with your application ID. This is just how it should look like inside of this file.
Initializing AdMob and Requesting Tracking
Okay, now we can go to our actual application. And in the meantime, I'm going to run a live reload. I'm going to do it for iOS. So ionic cap run ios --livereload. I got a few devices, yeah, please use my device and then we're gucci. Alright.
To begin with, you can open the HTML file, the template, and just insert a few buttons like I did here because we're going to try three examples. We're going to try the banner ad, we're going to try the interstitial, and we're going to try the reward. Or rewarded, actually. Why do I spell this so crazy? Okay, let's go to the home.page.ts now, and in here I also just added a few empty functions.
Now, let's begin by setting up our initialize function. We don't really need this. It looked cool on the repository, but now we don't really need this. So the first thing you can grab with the plugin is actually the tracking authorization status. So this is the status that you see inside the modal on iOS. It would be really cool if it would now show up. So let's do this. Where's my reflector application? But anyway, I'm going to already do a next step for you. Oops, there we go. Yes, you're way too big. Now you're way too small. Always the same fun in here. I'm using the Reflector app. I get this question about, well, actually every week or at least after every tutorial. So this is the Reflector app, not a special emulator.
Okay, let's hit save. Nothing happens. That's fine. And we're going to check out, or actually log out, the status. And then, because I'm also very adventurous, I'm going to dive into the log of that file. So let's hit save, and then we should see "not determined." That's fine because we actually never asked for any kind of tracking related information. Oh, that was great. Hopefully that didn't mess up my video. So if the status is like that, you could have a block in which you whatever inform the user about why the tracking is important. You're going to have super duper customized ads. But well, yeah, maybe you also don't just don't want to do this and you just want to use ads.
So more importantly, as you can see at this point, nothing in terms of tracking happened so far. This only happens once we run the initialize function, and that is important. We need to do this before we do anything else. So in here, we are going to add request tracking authorization, and that will bring up this little view. Now, there are two more things that you could do for testing. You could use specific testing devices. There's a whole guide on this available inside Google, how to set up a test device for Android. It's actually quite easy. Yeah, you just have to find your advertising ID, which you can do inside Android like this. For iOS, it's actually only possible with a third-party application, so that's a bit more complicated.
But we actually don't really need test devices in the first place. I'm going to talk about this in the end, hopefully again. But for now, we don't really need this. And we want to initialize all of this for testing. So let's hit save. And now because we're running the initialize dialog, we also see this tracking dialog and also the text that we find, "This helps to improve the quality of ads we show." Of course, I allow this because, well, usually I know how this. Okay. So this is fine. The initialization is done, and now we can dive into these three cases to create ads.
Implementing Banner Ads
Now, to create an ad, what we need are some options. So we need some options of the type BannerAdOptions. This is just a specific type that extends the general AdOptions of the plugin, so you can dive into all these interfaces. There are actually not too many properties to check out, but anyway, can be helpful.
We need definitely an ad ID in here. And now this would usually be a specific ad unit. So let's talk about ad units. If I find the right view again, there it is. So for every app that we got, we could dive into this and select the app and then create ad units. So we can create a banner ad, interstitial, rewarded interstitial (actually beta), or rewarded, native, and app open. Those are actually, I think, not included in our plugin yet. So then you would go ahead and create all the different ad units that you want to present in your application, and for each of them you will have a very specific ID. And then you would go ahead and use that ID right in here. So that also means if you have different apps, you have different ad units for both Android and iOS. So you might have a switch like this: if the platform is iOS, please use the iOS ad ID; otherwise, use the Android ad unit. And also keep these values inside your environment file. Not like they're protected here in any way, it's just a central place to keep a track of information like that.
But the big but, today we don't really need this if we're just doing the testing mode. Also, be careful using your real ad unit IDs without specifying testing devices or test mode, because then you're basically using production ads in a development build of your app, and you're going to get penalized for that in the end. So really be careful with that. Make sure you're first using the testing like we do, and in the second step, use testing devices with your real ad unit IDs. So then you're closer to a real production test, but still in development mode.
Anyway, for our ad unit, let me bring in some more information. So there we go. We can have an ad size from this BannerAdSize interface. There are a few available. I found that the adaptive banner worked kind of good for us. For the position, I just used bottom without margin and testing true. And then you could also for every ad option have this npa field. So this is the default behavior of the Google ads to serve personalized ads. Set this to true to request non-personalized ads. So it's just another option for personalized application ads, not apps.
Okay, so these are the options and then it's pretty easy, just use AdMob.showBanner with the options that we define. So let's hit save and let's show our banner. There we go, we got a nice adaptive banner at the bottom.
We can also have like the default banner. Let's try the top center and let's see what happens. Most likely this will look horrible. Yeah, it's kind of up here, replacing everything. We could also add like the margin of 200, an margin of 200 to every side. Yeah, there's a pretty horrible idea. Well, you can play around with those values, but what's pretty cool is if you also want to hide the banner for whatever reason, you could call hideBanner which would in the first place hide it. No, I don't want to have it top, it's really looking better at the bottom center. And I will want this one. So this will only hide the banner, remove it from the screen, but you can show it later. So you could later also run a resume call to show it again, but if you call remove, it will actually completely destroy the banner and remove it from the screen. So this helps in different screens to hide or show your banner. Pretty easy, right?
Implementing Interstitial Ads
And now the other options are pretty much the same. You just configure the options, then you show it, and that's it. So for the interstitial, once again, you got your ad options, basically same stuff like before. The only difference is that now we need to prepare this, which returns a promise. So we need to await that line, and then we can show the interstitial. So you could prepare the interstitial actually in advance and then later call show. That could improve the performance of your application. So let's give this a try.
Show interstitial. And then we get some nice German... I don't know if this is in other countries, I think it's in Italy as well. Anyway, as you can see, it's a full page thing that you could use like the game ends, you want to show something, you transition to a different screen, you show this, or when the app is resumed, that would work as well.
Implementing Rewarded Video Ads
And finally, the thing I actually like the most, and I think it's the most helpful to really generate an income from AdMob, this is a reward video. So once again, we got kind of specific options, this time reward options, because there's another property about we will talk. And then you prepare it, you show it. That's it.
The only difference here is this server-side verification, which means you could actually configure for a specific ad unit to send out a callback to your backend, and you would configure this right in here. So if I would create a rewarded video, whatever, I could also now enter the reward amount and the actual item, which is pretty cool. You get back that data within the application.
And now you might ask, where do you actually get this data back? That's a good question. And you get it back by using a listener for specific events on the AdMob plugin. So there are... no, it's not this one. It's... I actually don't know. There it is. If you look at the specification right here, you're going to see you can add a bunch of listeners for size change, loaded, fail to load, open, closed, and then for reward, plugin fail to load, load rewarded dismissed, and the other cases, because really you only want to show a, or only add something in the rewarded case.
So to see this in action, let me bring up my console logs once again and open the device. And we're going to show the reward video which will, yeah, will run now for about 30 seconds. So I'm going to let this run in the background, and then we can just take a look at what we get because in our case, we're getting back test data. In your case, you would really get back what you configured in here as a reward, and then you can apply this to your app. And again, you could define a callback. We can see a quick description of this right here as well about server-side verification. So in that case, you can include like specific user information in this block, a user ID or any kind of custom data that will be sent back to your backend.
But now, we see I get the reward. My video has finished, so reward granted. I can close this and I will now get back something like this: amount 10, type coins. That is the default setup. But again, I could configure this right here when I set up the application with the amount and whatever I want to give to the user in that case.
Ad Testing Strategy and Final Recap
And that already brings us to the end. There was something I wanted to get back to which I think, yeah, the testing devices. I pretty much covered this in between already. So stage one is what we did in here without any testing codes, just using AdMob in testing mode. Step two would be to create real ad units but still use testing devices, so you get production apps. I think they still have a label for testing, so be careful and don't use your IDs, your production IDs for development builds as you will get punished for that.
But otherwise, that's pretty easy. It's super quick to set up ads with the Capacitor AdMob plugin, so give it a try.
Outro
Alright, and that's it once again for today. I hope you enjoyed today's quick win. If you did, please leave a like and hit the subscribe icon if you're not yet subscribed to the channel. And of course, let me know if you got any problems with the Google AdMob integration because I think the process is really a lot easier than it was in the past. We just need to do a little bit of configuration inside AdMob with the app IDs and the ad unit and then bring all of the information in the right way into our Ionic application. But then using the Capacitor plugin is really a breeze and works mostly in my tests perfectly fine.
So let me know what you think about it. Once again, check out the Ionic Academy if you want more support on your journey learning Ionic. And I will hopefully catch you inside the next tutorial video, whatever you're going to watch on this channel. So have a great day and happy coding. Simon.
