- 1. What you need to know
- 2. Finished app preview
- 3. Include the Google AdMob SDK using cocoapods
- 4. Adding Banner View
- 5. Test devices
What you need to know
- 1. Storyboards
- 2. Views
- 3. View Controllers
- 4. Layout Constraints
Finished app preview
Include the Google AdMob SDK using cocoapods
- 1. Create a new Xcode project if you haven’t and then close it. If you have an existing project then
close that project in Xcode. We are going to open it again in different way.
- 2. Open terminal and type following command and press enter
sudo gem install cocoapods
- 3. Now go to your project directory through terminal
- 4. Initialise Cocoapods by typing this command
- 5. A new file named Podfile will be created in your application’s root. Open it in Xcode or any text
editor. It will look like Fig 2 only difference being the project name in line 6 and 10.
- 6. Now add this line between line 6 and line 8 i.e. inside the target ‘YourProjectName’ do section.
pod 'Google-AdMob-Ads-SDK', '~> 6.12’
- 7. Go back to terminal and navigate to your project directory if you aren’t in it. Then type this command.
- 8. Output of this command will be like Fig 3. It says at the last line that you have to use
‘ProjectName.xcworkspace’ from now on. A new file with white icon is created and its called workspace file which group and integrate your Project and GoogleAdMob-SDK into one. You will use that file (instead of blue project file) to open your project from now on. If your project is already open in Xcode then opening this may give you some error (YourProject is already open in Xcode). So you have to close your project first and then open this Project Workspace file.
Adding Banner View
- 1. After you have opened your Project Workspace, open you storyboard file (cmd + shift + O and type your storyboard filename).
- 2. Drag and drop a generic View from Object Library. We will call it AdMob BG. Set its height to 50px which is equal to the height of banner ad. Set its background to black. Position it where you want it to. Add necessary layout constraints.
- 3. Add another view, AdMob Container and it will hold the actual ad. Set its width to 320px and height to 50px as banner ad is 320 x 50px. Add necessary layout constraints. No open identity inspector (cmd + opt + 3) and set its class field to GADBannerView. Fig 4. Remember to select AdMob Container before doing this.
- 4. So far so good. You have to create a connection of AdMob Container view to the code file. Press option + command + 0 to open assistant editor and open header file (ends with .h) for that view controller. We have to insert following import statements before @interface ViewControllerClassName : UIViewController line.
- 5. Now for creating the connection click Admob Container in the document outline and ctrl + drag your cursor into he header file between @interface ViewControllerClassName : UIViewController and @end. Fig 5.
- Doing this will open a popup which will ask for name of connection. (Fig 6) lets call it bannerView. Hitting enter will add a new line for IBAction connection (Fig 7). Notice the circle on the start of that line. That indicates that the connection is working. An empty circle means there is something wrong with the connection.
- 7. Note: In all these screens the header file we imported in #Step 4 is missing.
- 8. Now its time to code. Open your view controller implementation file (hit option + cmd + 0, to open file in assistant view and select the .m file from) and in the viewDidLoad function after call to [super viewDidLoad] write the following code.
_bannerView.adUnitID = @"ca-app-pub-4987788162507876/7045971044"; _bannerView.rootViewController = self; GADRequest *request = [GADRequest request]; request.testDevices = @[GAD_SIMULATOR_ID]; [_bannerView loadRequest:request];
- 9. The first line sets adUnitID which you get from your Google AdMob account by creating a new app. The code pasted here will always open test ads and is just for demonstration purposes. _bannerView is the name we entered while making connection (Step 5). Precede it with underscore.
- 10. We are all good now. Hit cmd + R to run the app. You’ll see a output similar to Fig 1.
This is just the basics. We will update this guide soon with following content.
- 1. Interstitial or Fullscreen Ads.
- 2. Adaptive Ads for iPad and iPhone.
- 3. Removing AdMob in existing project.