Hey, everybody.
I'm Andrew Brogdon, and welcome back to the Mobile Ads Garage,
where we cover mobile ads code the way
I enjoy cheese burgers-- thoroughly.
In our last episode, we covered how to import the Google Mobile
Ads SDK into your projects.
Today, with the help of my partner, Gary the Graphics Guy,
I'm going to build on that by talking about banner ads.
To start, let's imagine that I'm in an application.
[TONE]
Perfect.
One of the simplest ways to monetize an app
is just by adding a banner.
Here we go.
Now, there's a lot you can do with banners.
You can use different sizes.
You can put them in different places.
And you can even animate them.
But we'll keep it simple for now.
Let's start with Android Studio and a simple banner
across the bottom of the screen.
So here's my app in Android Studio.
It's just a simple Hello World, and I'm
going to add a banner ad right at the bottom.
And here are the steps involved.
So first, I'll place an AdView in my layout,
then I'll build a request object,
and then I'll load an ad.
So here's my layout file, and I'm going to drop in
and AdView element.
There we go.
And you can see Android Studio pointing out
that I need a new namespace reference, because of the ads
attributes, and I'll accept that, no problem.
There we go.
Now, let's talk real quick about what's in here.
So I've got the AdView element right there.
I've got my width and height set to Wrap Content,
which is what you want.
I've got some positioning code, and then I
have two attributes that I really
want to draw your attention to.
Ad size, right here, tells the SDK
what size ad you want to load-- banner, medium
rectangle, that sort of thing.
And then add unit ID tells the SDK which
ad unit corresponds to this banner placement in the ad.
Ad units are created at apps.admob.com,
and generally you want a unique ad unit ID
for each of the spots in your app where an AdView appears.
That way you can control things like mediation and refresh rate
and so on independently.
Now I can go into my activity code
and find a reference to that AdView object that
just dropped in the layout file by using Find View By ID.
There we go.
Perfect.
All right.
So step 1 done.
Now I'll move on to building a request.
So the SDK has a builder class for ad requests
that makes it really easy to construct them.
So I'll make a new one here and call its build method.
We're going to into a lot more detail on ad requests
and how they work in another video.
But for right now, just remember that every time you load an ad,
you'll need a fresh ad request object to do it.
Now, one thing I am going to do is add a test device ID
to this request by adding a function called
Just Before Build and giving it the emulators ID.
This way I can be sure I'll get test ads while I'm testing,
and that's important.
Always, always use test ads to test.
OK, that's all we need here to build my ad request.
So what's left?
Just making the actual call to load an ad.
And since I have my request object,
I just need to call AdView's Load Add Method,
and I'm ready to go.
Excellent.
All right.
Let's run this bad boy.
And there's my test banner.
Excellent.
So I placed an AdView, I built a request, and loaded an ad.
Job done.
Great.
Now that we've got Android down, let's move on to iOS
and, remember, it's like making a tarte tatin instead
of an apple pie.
Same concepts, different language.
Oh.
Fine, Gary.
It's like CK Ogden's seminal translation
of Wittgenstein's Tractatus.
Same concepts, different language.
You don't know me.
Now, on to Xcode.
All right.
So here we are in Xcode, and I've got my sample app going.
And I'd like a banner across the bottom.
So how can I do that?
Well, here are the steps for showing a banner in iOS.
If you just got done watching the Android section,
these should seem very familiar.
First, I'm going to place a GADBannerView on my storyboard.
Then I'm going to build a new request object.
And then I load an ad.
So here's my storyboard, and I'm just going
to drop a generic view onto it.
Let me drag that over.
And then I'll use the Identity Inspector to change the class
to get GADBannerView.
There we go.
And now I'll throw some constraints on my banner.
I'd like it to be at the bottom of the screen, centered.
And the size is going to be 320 by 50, which
is our standard banner size.
There we go.
Add the constraints.
Let's see how that looks.
Cool.
Now, I need to get a reference in my code.
I'm going to use Counterparts and just
drag it over to the View Controller
and make a property called BannerView.
Excellent.
And you can see Xcode complaining
that I'm missing an import.
So let me go ahead and add one in for Google Mobile Ads.
The SDK is distributed as a framework
to make that part easy.
Now I just need to give my banner an ad unit.
These are made at apps.admob.com, and generally
for every place in your app that you show an ad,
you'll need a different ad unit ID
so you can control things like refresh rate and mediation
independently.
And last thing, I just need to give the banner
a reference to the Root View Controller, which
my sample app is this one.
So GADBannerView is placed.
Now I need a request object.
Requests are represented by the GAD Request Class
in iOS, which has a static request method to build them.
There's a lot you can do with requests,
which were going to cover in one of our subsequent videos.
For now, just remember that each time you load an ad,
you'll need to build a fresh request object to do it.
And I'm going to go ahead and add the simulator to the list
of test devices on my request.
That way I can be sure I'll get a test ad in response
to it, which is important.
You should always, always use test ads when you're testing.
They prevent false impressions and false click-throughs,
both of which are bad things.
So the only thing left to do now is load an ad.
To do that, I just need to call the GADBannerView's Load
Request Method and pass it my ad request object.
Excellent.
So that's the last step.
Let me run the app, see what happens.
And there's my test banner.
All right.
So here are the steps one more time.
To get a banner working, you just place a GADBannerView,
build a request, and then load an ad.
Job done.
Banner adds are a great way to get started monetizing,
but there's a lot more to talk about.
Where's the best place to put them?
How can you avoid unintended click-throughs?
We'll cover all that and more in our next episode.
In the meantime, I've got some great resources
to link you to like our AdMob Interstitial Guides for iOS
and Android, which have notes for Java, Objective-C,
and Swift.
We also have sample code up on GitHub
for both operating systems.
So check those out if you're interested.
You might also like AdMob's no-nonsense guide
to ad monetization.
It's an overview of monetization strategies
that includes code and tips from other engineers.
As always, if you've got a technical question relating
to anything you've just seen, stop by our support forum.
And if you've got a question about this video series
or an idea for something you'd like us to cover,
leave a comment below, and Gary and I will see you next time.
[MUSIC PLAYING]