Usually we, indie game developers, need to monetize our creations by showing advertisements but don’t worry, in this tutorial you will learn how to add an AdMob banner to any scene of your games.

This tutorial will consist on three sections:

  • Creating a new AdMob banner
  • Installing Google’s CocoaPod
  • Adding the banner to your game

Note that we are not covering the way to create a new SpriteKit game because you’re supposed to know it before thinking on adding the ads. If not, don’t try to put the cart before the horse. :)

Creating a new AdMob banner

First of all you need to log into AdMob‎ (create a new account if you don’t have one).

Then access the Monetize link on the top menu and then click on the Monetize new app button placed on the top left of the screen.

We are creating the banner for a game that is not on the App Store yet so choose Add your app manually on the following screen and.

Enter My banner game (or your desired game) into App name and choose iOS on Platform and click Add app.

Select Banner as format for the advertisement, edit the style and enter My first banner (or another desired text) as the name of the ad unit before clicking on Save.

After these steps you will find a unit ID (take note of it and keep it close for the future) and a link where you will see how to add the new banner to an iOS app but it doesn’t cover how to add it to your game, which is a little different. Don’t worry you will learn it in the last section of this tutorial.

Installing Google’s CocoaPod

For this purpose you better follow Google’s official guide, which provides the steps to get the resources needed to render the banner on your game.

Adding the banner to your game

Time to code! This is the key step of the process as adding a banner to a game is slightly different than to an app due to the classes used in each of both types of products.

  • Open your game on Xcode (remember to choose the .xcworkspace file) and add the following line to GameScene, just after “import SpriteKit”:

    import GoogleMobileAds

    This way you will be able to use the classes provided by GoogleMobileAds framework.

    Now we can declare a couple of variables that will be useful for our purpose so add the following lines just before the didMoveToView method:

    var viewController: GameViewController!
    var bannerView: GADBannerView!

    With these lines you are declaring a view controller and a GADBannerView, which will render an AdMob banner.

  • Then is time to initialize the banner so, for this purpose, first add the below code at the end of didMoveToView:

    if bannerView == nil {
    initializeBanner()
    }

    And implement this new method with the following lines:

    func initializeBanner() {
    // Create a banner ad and add it to the view hierarchy.
    bannerView = GADBannerView(adSize: kGADAdSizeSmartBannerPortrait)
    bannerView.adUnitID = "ca-app-pub-5767684210972160/3268052334"
    bannerView.rootViewController = viewController
    view!.addSubview(bannerView)
    }

    You are creating a new GADBannerView specifying the smart banner portrait size, which you can modify if you want to show a different kind of banner.

    Then you specify the unit ID that you took note previously and set the root view controller as the one we have declared before.

    Finally you add the banner to the game’s view.

  • Now that the banner is ready you can request an ad so let’s call a new method by adding the following line at the end of didMoveToView:

    loadRequest()

    And implement it with the following lines:

    func loadRequest() {
    let request = GADRequest()
    request.testDevices = [kGADSimulatorID, "22ed9df524b90565f5e15t23ad232415"]
    bannerView.loadRequest(request)
    }

    You first create a new ad request and then specify the devices you will use to test it (this way you will avoid the possibility of getting penalized by AdMob if you request so much ads during the test process). In above’s example I’m specifying the Xcode simulator and my iPhone’s id, which I got previously by running the game on it.

    Finally you load the new request on the banner view.

  • There is only a left step, which is to initialize the viewController variable we are using. For this purpose go to GameViewController and add the following line before the initialization of the skView constant:

    // Linking view controller and scene to show ads
    scene.viewController = self

    This way you link your game’s view controller to the root of the banner view.

  • If you run the project now you will see something similar to this image:

    Simulator Screen Shot 29 Mar 2016 17.08.00

    And that’s all, you now can load any kind of ads to your games!

    You can find the source code of this tutorial here.

    @jjordanarenas