システム定義のネイティブ広告フォーマットを表示する
ネイティブ広告が読み込まれると、GADAdLoaderDelegate
プロトコルのいずれかのメッセージを介してネイティブ広告オブジェクトがアプリに届きます。次に、アプリによってその広告が表示されます(ただし、必ずしもすぐに表示される必要はありません)。システム定義の広告フォーマットを簡単に表示できるようにするため、SDK には便利なリソースが用意されています。
GADNativeAdView
GADNativeAd
には、対応する「広告ビュー」クラス GADNativeAdView
があります。この広告ビュークラスは UIView
で、広告を表示する際に必ず使います。たとえば、1 つの GADNativeAdView
で GADNativeAd
の 1 つのインスタンスを表示できます。その広告のアセットの表示に使われる UIView
オブジェクトはいずれも、GADNativeAdView
オブジェクトのサブビューになります。
たとえば、UITableView
に広告を表示している場合、そのセルの 1 つでのビュー階層は次のようになります。
GADNativeAdView
クラスには、個々のアセットで使うビューの登録に使用する IBOutlets
と、GADNativeAd
オブジェクト自体を登録するためのメソッドがあります。この方法でビューを登録すると、次のようなタスクを SDK が自動的に処理できるようになります。
- クリックを記録する。
- インプレッションを記録する(画面に最初のピクセルが表示されたとき)。
- AdChoices オーバーレイを表示する。
AdChoices オーバーレイ
間接販売のネイティブ広告(AdMob バックフィル、Ad Exchange、AdSense 経由で配信される広告)については、SDK で AdChoices オーバーレイが追加されます。AdChoices ロゴは自動挿入されるため、ネイティブ広告ビューのご希望の隅にスペースを空けておいてください。また、AdChoices オーバーレイは、そのアイコンをコンテンツ上で簡単に識別できる場所に配置してください。オーバーレイのデザインや機能について詳しくは、プログラマティック ネイティブ広告の実装に関するガイドラインをご確認ください。
広告の帰属表示
プログラマティック ネイティブ広告を表示する際は、広告の帰属表示を行って、そのビューが広告であることを示す必要があります。
サンプルコード
次に、xib ファイルから動的に読み込まれるビューを使ってネイティブ広告を表示する方法を見ていきましょう。この方法は、複数のフォーマットをリクエストする設定の GADAdLoaders
を使う場合に極めて便利です。
UIViews をレイアウトする
まず、ネイティブ広告アセットを表示する UIViews
をレイアウトします。この作業は Interface Builder で行います(他の xib ファイルを作成する場合と同様です)。ネイティブ広告をレイアウトする方法は次のようになります。
画像右上の [Custom Class(カスタムクラス)] の値を見ると、
GADNativeAdView
が設定されています。これは、GADNativeAd
の表示に使われる広告ビュークラスです。
また、広告の動画や画像の表示に使われる GADMediaView
にもカスタムクラスを設定する必要があります。
アウトレットをビューにリンクする
ビューの設定が完了し、レイアウトに適切な広告ビュークラスを割り当てたら、作成済みの UIViews
に広告ビューのアセット アウトレットをリンクします。広告用に作成した UIViews
に、広告ビューのアセット アウトレットをリンクする方法を次に示します。
[Outlets(アウトレット)] パネルにおいて、Interface Builder でレイアウトした UIViews
に、GADNativeAdView
のアウトレットがリンクされています。これにより、どの UIView
でどのアセットを表示するかを SDK に知らせます。また、これらのアウトレットは、広告内でクリック可能なビューを表していることも踏まえておいてください。
広告を表示する
レイアウトが完成してアウトレットをリンクしたら、最後のステップとして、読み込まれた広告を表示するコードを記述します。上で定義したビューに広告を表示するメソッドは以下のとおりです。
Swift
// Mark: - GADNativeAdLoaderDelegate func adLoader(_ adLoader: GADAdLoader, didReceive nativeAd: GADNativeAd) { print("Received native ad: \(nativeAd)") refreshAdButton.isEnabled = true // Create and place ad in view hierarchy. let nibView = Bundle.main.loadNibNamed("NativeAdView", owner: nil, options: nil)?.first guard let nativeAdView = nibView as? GADNativeAdView else { return } setAdView(nativeAdView) // Set ourselves as the native ad delegate to be notified of native ad events. nativeAd.delegate = self // Populate the native ad view with the native ad assets. // The headline and mediaContent are guaranteed to be present in every native ad. (nativeAdView.headlineView as? UILabel)?.text = nativeAd.headline nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent // This app uses a fixed width for the GADMediaView and changes its height to match the aspect // ratio of the media it displays. if let mediaView = nativeAdView.mediaView, nativeAd.mediaContent.aspectRatio > 0 { let heightConstraint = NSLayoutConstraint( item: mediaView, attribute: .height, relatedBy: .equal, toItem: mediaView, attribute: .width, multiplier: CGFloat(1 / nativeAd.mediaContent.aspectRatio), constant: 0) heightConstraint.isActive = true } // These assets are not guaranteed to be present. Check that they are before // showing or hiding them. (nativeAdView.bodyView as? UILabel)?.text = nativeAd.body nativeAdView.bodyView?.isHidden = nativeAd.body == nil (nativeAdView.callToActionView as? UIButton)?.setTitle(nativeAd.callToAction, for: .normal) nativeAdView.callToActionView?.isHidden = nativeAd.callToAction == nil (nativeAdView.iconView as? UIImageView)?.image = nativeAd.icon?.image nativeAdView.iconView?.isHidden = nativeAd.icon == nil (nativeAdView.starRatingView as? UIImageView)?.image = imageOfStars( fromStarRating: nativeAd.starRating) nativeAdView.starRatingView?.isHidden = nativeAd.starRating == nil (nativeAdView.storeView as? UILabel)?.text = nativeAd.store nativeAdView.storeView?.isHidden = nativeAd.store == nil (nativeAdView.priceView as? UILabel)?.text = nativeAd.price nativeAdView.priceView?.isHidden = nativeAd.price == nil (nativeAdView.advertiserView as? UILabel)?.text = nativeAd.advertiser nativeAdView.advertiserView?.isHidden = nativeAd.advertiser == nil // In order for the SDK to process touch events properly, user interaction should be disabled. nativeAdView.callToActionView?.isUserInteractionEnabled = false // Associate the native ad view with the native ad object. This is // required to make the ad clickable. // Note: this should always be done after populating the ad views. nativeAdView.nativeAd = nativeAd }
Objective-C
#pragma mark GADNativeAdLoaderDelegate implementation - (void)adLoader:(GADAdLoader *)adLoader didReceiveNativeAd:(GADNativeAd *)nativeAd { NSLog(@"Received native ad: %@", nativeAd); self.refreshButton.enabled = YES; // Create and place ad in view hierarchy. GADNativeAdView *nativeAdView = [[NSBundle mainBundle] loadNibNamed:@"NativeAdView" owner:nil options:nil].firstObject; [self setAdView:nativeAdView]; // Set the mediaContent on the GADMediaView to populate it with available // video/image asset. nativeAdView.mediaView.mediaContent = nativeAd.mediaContent; // Populate the native ad view with the native ad assets. // The headline is guaranteed to be present in every native ad. ((UILabel *)nativeAdView.headlineView).text = nativeAd.headline; // These assets are not guaranteed to be present. Check that they are before // showing or hiding them. ((UILabel *)nativeAdView.bodyView).text = nativeAd.body; nativeAdView.bodyView.hidden = nativeAd.body ? NO : YES; [((UIButton *)nativeAdView.callToActionView)setTitle:nativeAd.callToAction forState:UIControlStateNormal]; nativeAdView.callToActionView.hidden = nativeAd.callToAction ? NO : YES; ((UIImageView *)nativeAdView.iconView).image = nativeAd.icon.image; nativeAdView.iconView.hidden = nativeAd.icon ? NO : YES; ((UIImageView *)nativeAdView.starRatingView).image = [self imageForStars:nativeAd.starRating]; nativeAdView.starRatingView.hidden = nativeAd.starRating ? NO : YES; ((UILabel *)nativeAdView.storeView).text = nativeAd.store; nativeAdView.storeView.hidden = nativeAd.store ? NO : YES; ((UILabel *)nativeAdView.priceView).text = nativeAd.price; nativeAdView.priceView.hidden = nativeAd.price ? NO : YES; ((UILabel *)nativeAdView.advertiserView).text = nativeAd.advertiser; nativeAdView.advertiserView.hidden = nativeAd.advertiser ? NO : YES; // In order for the SDK to process touch events properly, user interaction // should be disabled. nativeAdView.callToActionView.userInteractionEnabled = NO; // Associate the native ad view with the native ad object. This is // required to make the ad clickable. nativeAdView.nativeAd = nativeAd; }
GitHub リポジトリでは、ネイティブ アドバンス広告の完全な実装サンプル(Swift と Objective-C の両方のサンプル)をご覧いただけます。
ネイティブ アドバンスのサンプルをダウンロードGADMediaView
画像アセットと動画アセットは、GADMediaView
を介してユーザーに表示されます。このビューは xib ファイルで定義するか動的に構築される UIView
であり、他のアセットビューの場合と同様に GADNativeAdView
のビュー階層内に配置する必要があります。
他のすべてのアセットビューと同様に、メディアビューのコンテンツも設定する必要があります。これは、GADMediaView
の mediaContent
プロパティを使って設定します。GADNativeAd
の mediaContent
プロパティには、GADMediaView
に渡すことができるメディア コンテンツが含まれています。
次に示すスニペットはネイティブ アドバンスのサンプル(Swift | Objective-C)で、GADNativeAd
から GADMediaContent
を使って GADMediaView
にネイティブ広告アセットを設定する方法を示しています。
Swift
nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent
Objective-C
nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;
必ずネイティブ広告ビューの Interface Builder ファイルで、そのビューのカスタムクラスに GADMediaView
を設定し、それを mediaView
アウトレットにリンクします。
画像コンテンツ モードを変更する
GADMediaView
クラスは、画像を表示する際に UIView
contentMode
プロパティに従います。GADMediaView
での画像のスケーリング方法を変更する場合は、対応する UIViewContentMode
を GADMediaView
の contentMode
プロパティに設定します。
たとえば、画像を GADMediaView
のビューいっぱいに表示するには、次のように設定します(広告に動画がない場合)。
Swift
nativeAdView.mediaView?.contentMode = .aspectFill
Objective-C
nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;
GADMediaContent
GADMediaContent
クラスは、GADMediaView
クラスを使って表示されるネイティブ広告のメディア コンテンツに関するデータを保持します。GADMediaView
mediaContent
プロパティでの設定は次のようになります。
動画アセットがある場合は、その動画アセットがバッファリングされ、
GADMediaView
内で再生されます。動画アセットの有無は、hasVideoContent
で確認できます。広告に動画アセットがない場合は、代わりに
mainImage
アセットがダウンロードされ、GADMediaView
内に配置されます。