スタートガイド

このガイドでは、新しい iOS プロジェクトを作成する手順、Google Mobile Ads SDK を含める手順、最初のバナー リクエストを実行する手順を説明します。

前提条件

DFP バナーのサンプルをダウンロードする

新しいプロジェクトを作成する

このステップでは、Xcode で新しいプロジェクトを作成します。Xcode をまだ起動していない場合は、ここで起動します。

新しい Xcode プロジェクトを作成する

[File]、[New]、[Project] の順に選択し、[iOS] の [Application] の中にある [Single View Application] を選択して、[Next] をクリックします。

プロジェクトに名前を設定する

プロジェクトに「DFPBannerExample」という名前を設定し、言語設定で [Swift] か [Objective-C] を選択したら、[Next] をクリックします。

プロジェクトの場所を選択する

プロジェクトの場所を選択し、[Create] をクリックして、新しいプロジェクトの作成を完了します。

新しいプロジェクトをビルドして実行する

シミュレータを使用するには、[Product]、[Destination] の順に選択し、いずれかの iPhone シミュレータを選択します。次に [Product]、[Run] の順に選択して、アプリが立ち上がり、実行できることを確認します。この時点では、アプリに何もない白い画面が表示されます。以降のステップでコンテンツを追加していきます。

SDK を Xcode プロジェクトに追加する

Google Mobile Ads SDK を Xcode プロジェクトに追加するには、次の 2 つの方法があります。

CocoaPods を使用した効率的な方法

Podfile を作成する

DFPBannerExample.xcodeproj ファイルと同じディレクトリに、Podfile という名前のファイルを作成し、次の内容を含めます。

source 'https://github.com/CocoaPods/Specs.git'

platform :ios, '7.0'

target 'DFPBannerExample' do
  pod 'Google-Mobile-Ads-SDK', '~> 7.8'
end

pod install を実行する

ターミナルから Podfile と同じディレクトリで pod install を実行します。インストールが完了したら、DFPBannerExample.xcodeproj を閉じて、DFPBannerExample.xcworkspace を開きます。

プロジェクト ファイルに Pods プロジェクトが含まれており、その中に Pods/Google-Mobile-Ads-SDK ディレクトリがあることを確認します。

プロジェクトを再ビルドする

プロジェクトを再ビルドして実行します。アプリは、白い画面が表示されるままですが、Google Mobile Ads SDK を参照するようになっています。続いて、最初のバナー リクエストを実行します。

SDK ダウンロードを使用した手動による方法

Google Mobile Ads SDK をダウンロードしていない場合は、ダウンロード ページからダウンロードしてファイルを展開します。

フレームワークを追加する

[DFPBannerExample] プロジェクトを右クリックして、[Add Files To "DFPBannerExample"] を選択します。

GoogleMobileAds.framework を追加します。

プロジェクトを再ビルドする

プロジェクトを再ビルドして実行します。今回もアプリには白い画面が表示されますが、Xcode のコンソールには、使用している Google Mobile Ads SDK のバージョンを示すログが表示されます。

最初のバナー リクエスト

プロジェクトで SDK が参照されるようになりました。次に、プロジェクトにバナー広告を設置します。

DFPBannerView の作成は、ストーリーボードかコードから行います。レイアウトの定義は通常、ストーリーボードで行うため、このガイドではストーリーボードを使用する方法を説明します。

ストーリーボードで DFPBannerView を追加する

Main.storyboard を開き、右下の Object LibraryUIView を検索し、UIView 要素をビュー コントローラにドラッグします。次に、右上の Identity Inspector で、ビューのカスタムクラスを DFPBannerView に指定します。

DFPBannerView に制約を追加する

DFPBannerView に制約を設定して、画面下部の中央に 320×50 のサイズで表示されるようにします。

ビューが選択されていることを確認し、画面下部の [Pin] アイコンをクリックします。バナー下部に値 0 で [Spacing to nearest neighbor] 制約を追加します。これでビューが画面下部に固定されます。

また、ビューのサイズを設定するために、幅と高さの制約のチェックボックスをオンにし、それぞれ 32050 に設定します。

次に、[Pin] アイコンの左にある [Align] アイコンをクリックして、[Horizontal Center in Container] チェックボックスをオンにし、値 0 を設定します。

制約を変更したら、[Pin] アイコンの右にある [Resolve Auto Layout Issues] アイコンを選択して Update Frames を選択することで、ビューが表示される位置を確認できます。

これでバナーが適切な位置に表示されるようになります。

DFPBannerView への参照をコードに追加する

DFPBannerView が広告を読み込むには、コード内に参照が必要です。[View]、[Assistant Editor]、[Show Assistant Editor] の順に選択して、Assistant Editor を起動します。Assistant Editor に ViewController.h ファイルが表示されていることを確認したら、コントロール キーを押したまま、DFPBannerView をクリックし、ViewController.h までカーソルをドラッグします。Swift プロジェクトの場合、上記の手順の後に、ViewController.swift ファイルにも DFPBannerView への参照を追加します。

Xcode によってプロパティが生成され、接続が行われます。「bannerView」という名前を付けて、[Connect] を選択します。

Objective-C

ViewController.m
#import <UIKit/UIKit.h>

@import GoogleMobileAds;

@interface ViewController : UIViewController

@property (weak, nonatomic) IBOutlet DFPBannerView  *bannerView;

@end

Swift

ViewController.swift
import UIKit
import GoogleMobileAds

class ViewController: UIViewController {

  @IBOutlet weak var bannerView: DFPBannerView!

} 

コンパイル エラーを解決するため、ViewController.h@import GoogleMobileAds を含めるか、ViewController.swiftimport GoogleMobileAds を含めて、コンパイラが DFPBannerView を有効なクラスとして解釈できるようにします。

DFPBannerView に広告を読み込む

最後に、広告をバナービューに読み込むコードを ViewController.mViewController.swift に追加します。

Objective-C

ViewController.m
- (void)viewDidLoad {
  [super viewDidLoad];

  NSLog(@"Google Mobile Ads SDK version: %@", [DFPRequest sdkVersion]);
  self.bannerView.adUnitID = @"/6499/example/banner";
  self.bannerView.rootViewController = self;
  [self.bannerView loadRequest:[DFPRequest request]];
}

Swift

ViewController.swift
override func viewDidLoad() {
  super.viewDidLoad()

  print("Google Mobile Ads SDK version: \(DFPRequest.sdkVersion())")
  bannerView.adUnitID = "/6499/example/banner"
  bannerView.rootViewController = self
  bannerView.loadRequest(DFPRequest())
}

次の 3 つの変更を加えます。

  1. viewDidLoad メソッドで、バナーに広告ユニット ID を設定します。後から DFP UI でご自身の広告申込情報を入稿し、広告ユニットを使用して広告申込情報のターゲットを設定して、アプリでその広告ユニット ID を使用する必要があります。ただし、テスト広告申込情報に関連付けられている上記のサンプル広告ユニット ID を、便宜のために使用してもかまいません。

  2. ルート ビュー コントローラを DFPBannerView を含むビュー コントローラに設定します。このビュー コントローラは、広告のクリック時に、オーバーレイの表示に使用されます。

  3. DFPRequest オブジェクトを指定して DFPBannerViewloadRequest: を呼び出します。

アプリを実行する

アプリをビルドして実行します。今回は、画面下部にテストバナー広告が表示されます。

以上の手順で、最初の広告リクエストが正常に実行できました。

GitHub で設定済みサンプルを確認する

Objective-C

Swift

バナー広告の実装例を GitHub で確認するには、下記のリンクからアクセスしてください。

Objective-C Swift

次のステップ

フルスクリーンのインタースティシャル広告の詳細については、インタースティシャル広告ガイドをご覧ください。

バナー設定をより詳細に調整するには、次のガイドをご覧ください。

よくある質問

CocoaPods を使用しています。SDK を更新するにはどうすればよいですか?
ターミナルから Podfile があるディレクトリで pod update を実行してください。
DFP 広告ユニット ID を取得するにはどうすればよいですか?
DFP 広告ユニット ID は、/networkCode/adUnitName のような形式になります。広告ユニット ID は DFP で作成できます。ご自身の DFP アカウントにログインし、[広告枠] タブで広告ユニットに移動し、[タグを作成] をクリックします。また、[ネットワークの設定] の [管理] タブで、ご自身のアカウントのネットワーク コードを確認することもできます。
「Invalid unknown request error: Cannot determine request type. Is your ad unit id correct?」(無効かつ不明なリクエスト エラー: リクエストの種類を特定できません。広告ユニット ID に間違いはありませんか?)というエラー メッセージが表示されます。
広告ユニット ID に間違いがないことをご確認ください。広告ユニット ID は、/<network_code>/<ad_unit_path> のような形式にする必要があります。

フィードバックを送信...

ご不明な点がありましたら、Google のサポートページをご覧ください。