システム定義のネイティブ広告フォーマットを表示する
ネイティブ広告が読み込まれると、アプリは
GADAdLoaderDelegate
プロトコル メッセージ。この場合、アプリはユーザーの
広告を表示する(必ずしもすぐに行う必要はありません)。
システム定義の広告フォーマットを簡単に表示できるようにするため、SDK には便利ないくつかのツールが用意されています。
説明します。
GADNativeAdView
GADNativeAd
には、対応する「広告ビュー」があります。
クラス:
GADNativeAdView
。
この広告ビュークラスは、広告を表示するためにパブリッシャーが使用する必要がある UIView
です。
たとえば、1 つの GADNativeAdView
で、
GADNativeAd
。その広告の表示に使用される各 UIView
オブジェクトは、
アセットは、その GADNativeAdView
オブジェクトのサブビューにする必要があります。
たとえば、UITableView
で広告を表示している場合、
いずれかのセルのビュー階層は次のようになります。
GADNativeAdView
クラスには、登録に使用する IBOutlets
も用意されています。
ビューと、そのアセットを登録するメソッドを 1 つ
GADNativeAd
渡されます。この方法でビューを登録すると、SDK が自動的に
次のようなタスクを処理します。
- クリックの記録。
- インプレッションを記録する(画面に最初のピクセルが表示されたとき)。
- AdChoices オーバーレイの表示
AdChoices オーバーレイ
間接販売のネイティブ広告の場合( Ad Managerで配信) バックフィル、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 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、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
内に配置します。
次のステップ
詳しくは、ユーザーのプライバシーについての説明をご覧ください。