Fabric + MoPubでバナー広告を設置する


今回の記事はいつも連載している「JavaScriptプログラマがSwift iOSアプリを2週間で作って公開してみた」のリリース後に行った広告設置について番外編として紹介します。

TwitStockerのv1.2の更新で実はこっそり広告を追加しましたw もちろん稼ぎ目的ではなく、どのように広告を設置するか勉強のためです笑

広告を掲載する仕組みとしてはgoogleが提供しているAdMobやAppleのiAdが一番有名だと思いますが、Fabricと連携しているMoPubをせっかくなので使ってみようと思いました。
日本語記事が一切ないので、手順などまとめておきます。Fabricを使っているアプリなら設置に関してはかなりお手軽だと思うので、オススメです。

MoPubとは

MoPubはTwitter社が買収した広告ネットワークを持つ会社です。
Twitterでは広告基盤を統合しているので、おそらくtwitterのタイムライン上に表示されるNative広告はMoPubのものだと思います。
ネイティブ広告は、一般的なバナー広告などとは異なり、コンテンツの表示と自然に合った形で表示される広告のことです。MoPubはそのようなネイティブ広告を開発者が簡単に設置できる部分も特徴としてあります。

MoPubのマーケットプレイスという機能がいわゆるAdネットワークで、そこに自分のアプリの広告をお金を払って掲載の依頼をすることもできますし、そのようなマーケットプレイスの広告を自分の開発したアプリに掲載してアフィリエイトをすることもできます。

今回は自分が開発しているアプリにバナー広告を掲載するという観点でMoPubの使い方を説明します。
では、実際にアプリ内に広告を設置していきましょう。

MoPubの管理画面

まずはfabricにログイン

スクリーンショット 2015-03-23 23.21.15

こんな感じの画面が出てきて、”Go To MoPub Dashboard”をクリックします。Fabricに紐付いたアカウントで自動的にMoPubのアカウントが作成されます。

スクリーンショット 2015-03-23 23.27.55

ログインするとこんな感じの画面が表示されると思います。

MoPubでのユーザ・振り込みの設定

アフィリエイトをしてお金を稼いだ時の支払先などを指定します。英語で以下の項目を記入します。

User Settings
– Name
– Email
– Title <- 多分指定しなくても良い - Mailing List <- 多分指定しなくても良い Company Information - Company <- 個人のプロジェクトならなんでもいいと思います - Phone Number - Country - Address 1 - Address 2 - Address 3 - City - State/Province - Zip/Postal Code Payment Information - Tax Information - Business Name - Country Paypal Account(もしくは指定した金融機関) Paypal以外の金融機関を使った振り込みも指定できるようでしたが、かなり面倒くさそうだったのでやめておきました。 支払いも含めたユーザーが設定しなくてはいけないことは以上で良いはず。

MoPubでの開発中のアプリ

ログインするとfabricで作成していてitunes connectに登録しているアプリが自動的に表示されていると思います。ここら辺の登録作業が必要ないのはfabricと連携している良い点ですね。

スクリーンショット 2015-03-23 23.30.19

MoPub banner広告の作成

では広告を追加してみましょう。

MoPubのInventory右上のAdd an Ad Unitを押すと、以下のようなダイアログが表示されるので追加します。広告の種類はより自然な形で表示するためのNative Ad(ネイティブ広告)や、画面全体に出すようなFullScreen Adなどもありますが、今回は一番簡単に設置できそうな一般的なBanner広告を作成してみます。

スクリーンショット 2015-03-23 23.31.50

適当にパラメータを入れて、作成ボタンを押します。
自分はRefresh Interval(広告が入れ替わる時間の設定)を30 secondsにしました。

Banner Ad設置のためのswiftコード

MoPub上のCode Integrationのボタンを押してもわかりますが、Fabricを使っていれば、特にコードを事前に用意したりする必要もありません。

スクリーンショット 2015-03-23 23.29.51

ちなみにAdの表示を確認するためのTest Adというボタンもあります。

スクリーンショット 2015-03-23 23.34.39

Fabricと連携している場合は、xcodeでアプリを開いて表示されるガイド通りやれば基本的にOK。

スクリーンショット 2015-03-25 0.08.56

xcodeビルドすると次の画面に行きます。

スクリーンショット 2015-03-25 0.09.42

Bannerを選択します。すると以下のような感じで、swiftのソースコードの中に何を追加すればいいのかガイドが表示されます。

スクリーンショット 2015-03-25 0.10.32

2ページあって、基本的にそれ通りやればOKです。

AppDelegate.swift

import UIKit
import Fabric
import MoPub

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
        Fabric.with([Twitter(), MoPub()])
        
        return true
    }

}

ViewController.swift

import UIKit
import MoPub

class <Your>BannerViewController: UIViewController, MPAdViewDelegate
{

    // TODO: Replace this test id with your personal ad unit id
    var adView: MPAdView = MPAdView(adUnitId: "xxxxxxxxxxxxxxxxxxxxx", size: MOPUB_BANNER_SIZE)

    override func viewDidLoad() {
        super.viewDidLoad()
        
                self.adView.delegate = self
        self.adView.frame = CGRectMake(0, self.view.bounds.size.height - MOPUB_BANNER_SIZE.height,
            MOPUB_BANNER_SIZE.width, MOPUB_BANNER_SIZE.height)
        self.view.addSubview(self.adView)
        self.adView.loadAd()
            }

        func viewControllerForPresentingModalView() -> UIViewController {
        return self
    }
    
}

スクリーンショット 2015-03-25 0.14.05

コードをガイドに沿って変更したらビルドして完成です!

これで開発中のアプリを起動してみて、以下のようにdemo用の広告が表示されればコードの準備はOKです。

テスト用のデモのバナー広告が出てますね。

MoPub Market Place

デモの広告では公開できないので、本物の広告を設置しましょう。

Inventoryのアプリの画面に行くと、画面下部に”MoPub Demo Line Item”というdemoようの広告が存在していると思います。
本物の広告を追加する方法はいくつかあるようです。MoPubはAdMobやiAdなど様々な広告ネットワークと連携しているようなので、既にそのようなネットワークを使用している方はそこから広告を表示することができるとのことです。MoPub自体もMarketplaceという広告ネットワークの仕組みをもっています。当然、そこにお金を払って掲載依頼をすることもできますし、自分のアプリに広告を設置してclickベースの報酬をもらうこともできます。

自分はAdMobなどは使ったことがなく初めて広告を設置するので、さらに他のサービスに登録するのも煩わしいのでMoPub Marketplaceを使うことにしました。マーケットプレイスの画面はこんな感じ。

スクリーンショット 2015-03-23 23.50.13

下の方でBanner AdのMinimum CPMの設定などができます。クリック単価の最小値だと思いますが、ガイドには少なく設置しろと書いてあります。理由は高く設置してしまうと広告そのものが表示されなくなるから、ということだそうです。

なお、上記の画面はMoPubからMarketplaceを使っていいという許可を得た後の画面です。

Marktplaceを使用するためにはReviewプロセスがあって、許可されていない状態だと「あなたはReview待ちの状態です」という内容のメッセージが表示されていると思います。

私は当時しばらく放っておけばレビュー完了するのかなと思って、確か当時1, 2週間ほど放っておきました。
でも何も変化がないので、もしかしたら自分の理解が違うのかもと思って、担当者にメッセージを送って確認してみました。

MoPub担当者にメールする

試しに以下のようなメールを送りました。Review状態で一向に変わらないけど、何かする必要があるんでしたっけ?という内容です。(コピペOK。)

Title: Question about MoPub market place review process‏
To: policy@mopub.com
——
Hi,

I’m Takuya in Japan who is a new user of mopub.
I have a question about MoPub marketplace.

I’d like to put a banner ad unit on my app TwitStocker using Twitter Fabric framework.
So I implemented a code to put an ad unit, and now I can see a Demo Banner Ad Unit at the bottom of my app.

But it seems that only demo ad unit is shown. I guess it is because my status of market place still being reviewed.
Is there anything I should do some extra settings?

Thanks
——

すると、割とすぐに以下のような返事がきました。

スクリーンショット 2015-03-23 22.49.12

「お問い合わせありがとう、Review OKしたから、Paymentの設定してね。」と。。
おいおい、待ってるだけだとだめで、メールしないといかんのかな?という感じでした。

そう思いつつも、アプリ起動してみると、きちんと広告が表示されました!

S__74801155

ここまでできたら、テスト用のDemo Ad Unitを消すか一時停止の状態にして、MarketplaceからのAd Unitだけ有効にすればOKです。(以下のようなイメージ)

スクリーンショット 2015-03-25 0.23.39

アプリバージョンアップの更新に含める

あとは、アプリをビルドしてitunes connectでリリース作業をすれば完了です!アプリの申請に関しては連載最終回で書きます。

以下のような感じで、更新するときに広告を追加したことを記入しました。

S__74801154

以上!アプリにMoPubの広告を設置する大まかな手順でした。