システム定義のネイティブ広告フォーマットを表示する
ネイティブ広告が読み込まれると、アプリは
GADAdLoaderDelegate
プロトコル メッセージ。この場合、アプリはユーザーの
広告を表示する(必ずしもすぐに行う必要はありません)。
システム定義の広告フォーマットを簡単に表示できるようにするため、SDK には便利ないくつかのツールが用意されています。
説明します。
GADNativeAdView
GADNativeAd
には、対応する「広告ビュー」があります。
クラス:
GADNativeAdView
。
この広告ビュークラスは、広告を表示するためにパブリッシャーが使用する必要がある UIView
です。
たとえば、1 つの GADNativeAdView
で、
GADNativeAd
。その広告の表示に使用される各 UIView
オブジェクトは、
アセットは、その GADNativeAdView
オブジェクトのサブビューにする必要があります。
たとえば、UITableView
で広告を表示している場合、
いずれかのセルのビュー階層は次のようになります。
GADNativeAdView
クラスには、登録に使用する IBOutlets
も用意されています。
ビューと、そのアセットを登録するメソッドを 1 つ
GADNativeAd
渡されます。この方法でビューを登録すると、SDK が自動的に
次のようなタスクを処理します。
- クリックの記録。
- インプレッションを記録する(画面に最初のピクセルが表示されたとき)。
- AdChoices オーバーレイの表示
AdChoices オーバーレイ
間接的なネイティブ広告(AdMob を通じて配信)の場合 バックフィル、Ad Exchange、AdSense など)を使用している場合、AdChoices オーバーレイは 説明します。 希望するスペースにスペースを残す 角 自動的に挿入される AdChoices ロゴのネイティブ広告ビューの視認性の高さです。また、 AdChoices オーバーレイがコンテンツ上に配置され、アイコンを表示できることを確認します。 見やすくします。 オーバーレイの外観と機能について詳しくは、 プログラマティック ネイティブ広告の実装ガイドラインをご覧ください。
広告の帰属表示
プログラマティック ネイティブ広告を表示する際には、広告の帰属表示を その視聴が広告であることを示す。
サンプルコード
動的に読み込まれるビューを使用してネイティブ広告を表示する方法を
取得できるからですこれは、GADAdLoaders
を使用する際に非常に便利なアプローチです。
複数の形式をリクエストするよう構成されています
UIViews をレイアウトする
まず、ネイティブ広告アセットを表示する UIViews
のレイアウトを行います。
これは、他のインターフェース ビルダーの場合と同様に、インターフェース ビルダーで行うことができます。
xib ファイルを作成します。ネイティブ広告のレイアウトは
広告は次のようになります。
画像の右上にあるカスタムクラス値に注目してください。設定:
GADNativeAdView
。
これは、GADNativeAd
の表示に使用される広告ビュークラスです。
また、GADMediaView
に使用するカスタムクラスも設定する必要があります。
広告の動画や画像を表示します。
アウトレットをビューにリンクする
ビューを設定し、適切な広告ビュークラスを
広告ビューのアセット アウトレットを、作成した UIViews
にリンクします。
ここでは、広告ビューのアセット アウトレットを、作成された UIViews
にリンクする方法を示します。
:
アウトレット パネルで GADNativeAdView
のコンセントがリンクされています
インターフェース ビルダーに設定された UIViews
。これにより、
SDK はどの UIView
がどのアセットを表示するかを判断します。
また、これらのアウトレットは
広告クリック可能なものを指定します
広告を表示する
レイアウトが完了し、コンセントをリンクしたら、次のコードを追加します。 追加すると、広告が読み込まれた後に広告を表示します。
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
// 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
}
SwiftUI
ビューモデルを作成する
ネイティブ広告を読み込み、ネイティブ広告データを公開するビューモデルを作成する 変更点:
import GoogleMobileAds
class NativeAdViewModel: NSObject, ObservableObject, GADNativeAdLoaderDelegate {
@Published var nativeAd: GADNativeAd?
private var adLoader: GADAdLoader!
func refreshAd() {
adLoader = GADAdLoader(
adUnitID: "ca-app-pub-3940256099942544/3986624511",
// The UIViewController parameter is optional.
rootViewController: nil,
adTypes: [.native], options: nil)
adLoader.delegate = self
adLoader.load(GADRequest())
}
func adLoader(_ adLoader: GADAdLoader, didReceive nativeAd: GADNativeAd) {
// Native ad data changes are published to its subscribers.
self.nativeAd = nativeAd
nativeAd.delegate = self
}
func adLoader(_ adLoader: GADAdLoader, didFailToReceiveAdWithError error: Error) {
print("\(adLoader) failed with error: \(error.localizedDescription)")
}
}
UIViewRepresentable を作成する
作成:
UIViewRepresentable
GADNativeView
について学び、ViewModel
でデータの変更にサブスクライブします。
クラス:
private struct NativeAdView: UIViewRepresentable {
typealias UIViewType = GADNativeAdView
// Observer to update the UIView when the native ad value changes.
@ObservedObject var nativeViewModel: NativeAdViewModel
func makeUIView(context: Context) -> GADNativeAdView {
return
Bundle.main.loadNibNamed(
"NativeAdView",
owner: nil,
options: nil)?.first as! GADNativeAdView
}
func updateUIView(_ nativeAdView: GADNativeAdView, context: Context) {
guard let nativeAd = nativeViewModel.nativeAd else { return }
// Each UI property is configurable using your native ad.
(nativeAdView.headlineView as? UILabel)?.text = nativeAd.headline
nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent
(nativeAdView.bodyView as? UILabel)?.text = nativeAd.body
(nativeAdView.iconView as? UIImageView)?.image = nativeAd.icon?.image
(nativeAdView.starRatingView as? UIImageView)?.image = imageOfStars(from: nativeAd.starRating)
(nativeAdView.storeView as? UILabel)?.text = nativeAd.store
(nativeAdView.priceView as? UILabel)?.text = nativeAd.price
(nativeAdView.advertiserView as? UILabel)?.text = nativeAd.advertiser
(nativeAdView.callToActionView as? UIButton)?.setTitle(nativeAd.callToAction, for: .normal)
// 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
}
ビューをビュー階層に追加する
次のコードは、UIViewRepresentable
をビューに追加する方法を示しています。
階層:
struct NativeContentView: View {
// Single source of truth for the native ad data.
@StateObject private var nativeViewModel = NativeAdViewModel()
var body: some View {
ScrollView {
VStack(spacing: 20) {
NativeAdView(nativeViewModel: nativeViewModel) // Updates when the native ad data changes.
.frame(minHeight: 300) // minHeight determined from xib.
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 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、SwiftUI、および それぞれの GitHub リンクに従って Objective-C を選択しましょう。
Swift ネイティブ アドバンスの例 SwiftUI のネイティブ広告の例 Objective-C ネイティブ アドバンスの例GADMediaView
画像アセットと動画アセットは、
GADMediaView
。
これは、xib ファイルで定義することも、動的に構築することもできる UIView
です。
これは、GADNativeAdView
のビュー階層内に配置する必要があります。
アセットビューにのみ影響します。
すべてのアセットビューと同様に、メディアビューにもコンテンツを含める必要があります
データが入力されます。これは
mediaContent
GADMediaView
のプロパティです。「
mediaContent
プロパティ
GADNativeAd
渡すことのできるメディア コンテンツが含まれていることを
GADMediaView
。
これは
ネイティブ アドバンスの例
(Swift |
Objective-C)
ネイティブ広告のアセットを GADMediaView
に入力する方法を、
GADNativeAd
から GADMediaContent
:
Swift
nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent
Objective-C
nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;
ネイティブ広告ビューのインターフェース ビルダー ファイルで、
ビューのカスタムクラスを 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
内に配置します。
次のステップ
詳しくは、ユーザーのプライバシーについての説明をご覧ください。