Wyświetlanie reklamy natywnej

Wyświetlanie zdefiniowanego przez system formatu reklamy natywnej

Gdy reklama natywna się wczyta, Twoja aplikacja otrzyma obiekt reklamy natywnej za pomocą jednego z komunikatów protokołu GADAdLoaderDelegate. Twoja aplikacja jest wtedy odpowiedzialna za wyświetlenie reklamy (choć nie musi tego robić od razu). Aby ułatwić wyświetlanie formatów reklam zdefiniowanych przez system, pakiet SDK udostępnia kilka przydatnych zasobów.

GADNativeAdView

W przypadku GADNativeAd istnieje odpowiednia klasa „wyświetlenia reklamy” : GADNativeAdView. Ta klasa widoku reklamy to UIView, której wydawcy powinni używać do wyświetlania reklamy. Pojedynczy element GADNativeAdView może na przykład wyświetlać pojedynczą instancję elementu GADNativeAd. Każdy z obiektów UIView używanych do wyświetlania komponentów reklamy powinien być podrzędnym widokiem obiektu GADNativeAdView.

Jeśli na przykład wyświetlasz reklamę w UITableView, hierarchia widoków jednej z komórek może wyglądać tak:

Klasa GADNativeAdView udostępnia też IBOutlets służące do rejestrowania widoku używanego w przypadku każdego zasobu oraz metodę rejestrowania samego obiektu GADNativeAd. Rejestrowanie widoków w ten sposób umożliwia pakietowi SDK automatyczne wykonywanie takich zadań jak:

rejestrowanie kliknięć;
rejestrowanie wyświetleń (gdy pierwszy piksel jest widoczny na ekranie);
wyświetlanie nakładki Informacja.

Nakładka Informacja

W przypadku pośrednich reklam natywnych (wyświetlanych za pomocą zapasowego elementu zamówienia AdMob lub za pomocą Ad Exchange albo AdSense) pakiet SDK dodaje nakładkę Informacja. Zostaw miejsce w preferowanym rogu widoku reklamy natywnej na automatycznie wstawiane logo Informacja. Upewnij się też, że nakładka Informacja jest umieszczona w treści, w której ikonę można łatwo zauważyć. Więcej informacji o wyglądzie i działaniu nakładki znajdziesz w wytycznych dotyczących implementacji automatycznych reklam natywnych.

Oznaczenie reklamy

Podczas wyświetlania automatycznych reklam natywnych musisz wyświetlać oznaczenie reklamy, aby wskazać, że widok jest reklamą.

Przykładowy kod

W tej sekcji pokazujemy, jak wyświetlać reklamy natywne za pomocą widoków wczytywanych dynamicznie z plików xib. Może to być bardzo przydatne podejście, gdy używasz GADAdLoaders skonfigurowanych do wysyłania żądań w wielu formatach.

Rozmieszczanie UIViews

Pierwszym krokiem jest rozmieszczenie UIViews, które będą wyświetlać komponenty reklamy natywnej. Możesz to zrobić w Interface Builderze tak jak w przypadku tworzenia dowolnego innego pliku xib. Oto jak może wyglądać układ reklamy natywnej:

Zwróć uwagę na wartość Custom Class w prawym górnym rogu obrazu. Jest ona ustawiona na

GADNativeAdView. Jest to klasa widoku reklamy, która służy do wyświetlania GADNativeAd.

Musisz też ustawić klasę niestandardową dla GADMediaView, która służy do wyświetlania filmu lub obrazu w reklamie.

Łączenie elementów z widokami

Gdy widoki są na swoim miejscu i do układu przypiszesz odpowiednią klasę wyświetlenia reklamy, połącz elementy komponentów wyświetlenia reklamy z utworzonymi UIViews. Oto jak możesz połączyć elementy komponentów widoku reklamy z UIViews utworzonymi na potrzeby reklamy:

W panelu elementów elementy w GADNativeAdView zostały połączone z UIViews rozmieszczonymi w Interface Builderze. Dzięki temu pakiet SDK wie, który UIView wyświetla który zasób. Warto też pamiętać, że te elementy reprezentują widoki, które można kliknąć w reklamie.

Wyświetlanie reklamy

Gdy układ jest gotowy, a elementy połączone, dodaj do aplikacji ten kod, który wyświetla reklamę po jej wczytaniu:

Swift

func adLoader(_ adLoader: AdLoader, didReceive nativeAd: NativeAd) {
  // ...

  // 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

  // Some native ads will include a video asset, while others do not. Apps can use the
  // GADVideoController's hasVideoContent property to determine if one is present, and adjust their
  // UI accordingly.
  let mediaContent = nativeAd.mediaContent
  if mediaContent.hasVideoContent {
    // By acting as the delegate to the GADVideoController, this ViewController receives messages
    // about events in the video lifecycle.
    mediaContent.videoController.delegate = self
    videoStatusLabel.text = "Ad contains a video asset."
  } else {
    videoStatusLabel.text = "Ad does not contain a video."
  }

  // 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 aspectRatioConstraint = NSLayoutConstraint(
      item: mediaView,
      attribute: .width,
      relatedBy: .equal,
      toItem: mediaView,
      attribute: .height,
      multiplier: CGFloat(nativeAd.mediaContent.aspectRatio),
      constant: 0)
    mediaView.addConstraint(aspectRatioConstraint)
    nativeAdView.layoutIfNeeded()
  }

  // 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(from: 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
}ViewController.swift

SwiftUI

Tworzenie modelu widoku

Utwórz model widoku, który wczytuje reklamę natywną i publikuje zmiany danych reklamy natywnej:

import GoogleMobileAds

class NativeAdViewModel: NSObject, ObservableObject, NativeAdLoaderDelegate {
  @Published var nativeAd: NativeAd?
  private var adLoader: AdLoader!

  func refreshAd() {
    adLoader = AdLoader(
      adUnitID: "ca-app-pub-3940256099942544/3986624511",
      // The UIViewController parameter is optional.
      rootViewController: nil,
      adTypes: [.native], options: nil)
    adLoader.delegate = self
    adLoader.load(Request())
  }

  func adLoader(_ adLoader: AdLoader, didReceive nativeAd: NativeAd) {
    // Native ad data changes are published to its subscribers.
    self.nativeAd = nativeAd
    nativeAd.delegate = self
  }

  func adLoader(_ adLoader: AdLoader, didFailToReceiveAdWithError error: Error) {
    print("\(adLoader) failed with error: \(error.localizedDescription)")
  }
}NativeAdViewModel.swift

Tworzenie UIViewRepresentable

Utwórz UIViewRepresentable dla NativeView i zasubskrybuj zmiany danych w klasie ViewModel:

private struct NativeAdViewContainer: UIViewRepresentable {
  typealias UIViewType = NativeAdView

  // Observer to update the UIView when the native ad value changes.
  @ObservedObject var nativeViewModel: NativeAdViewModel

  func makeUIView(context: Context) -> NativeAdView {
    return
      Bundle.main.loadNibNamed(
        "NativeAdView",
        owner: nil,
        options: nil)?.first as! NativeAdView
  }

  func updateUIView(_ nativeAdView: NativeAdView, 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
  }NativeContentView.swift

Dodawanie widoku do hierarchii widoków

Ten kod pokazuje, jak dodać UIViewRepresentable do hierarchii widoków:

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) {
        // Updates when the native ad data changes.
        NativeAdViewContainer(nativeViewModel: nativeViewModel)
          .frame(minHeight: 300)  // minHeight determined from xib.NativeContentView.swift

Objective-C

- (void)adLoader:(GADAdLoader *)adLoader didReceiveNativeAd:(GADNativeAd *)nativeAd {
  // ...

  GADNativeAdView *nativeAdView = self.nativeAdView;

  // Set ourselves as the 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.
  ((UILabel *)nativeAdView.headlineView).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 content it displays.
  if (nativeAdView.mediaView != nil && nativeAd.mediaContent.aspectRatio > 0) {
    NSLayoutConstraint *aspectRatioConstraint =
        [NSLayoutConstraint constraintWithItem:nativeAdView.mediaView
                                     attribute:NSLayoutAttributeWidth
                                     relatedBy:NSLayoutRelationEqual
                                        toItem:nativeAdView.mediaView
                                     attribute:NSLayoutAttributeHeight
                                    multiplier:(nativeAd.mediaContent.aspectRatio)
                                      constant:0];
    [nativeAdView.mediaView addConstraint:aspectRatioConstraint];
    [nativeAdView layoutIfNeeded];
  }

  if (nativeAd.mediaContent.hasVideoContent) {
    // By acting as the delegate to the GADVideoController, this ViewController
    // receives messages about events in the video lifecycle.
    nativeAd.mediaContent.videoController.delegate = self;

    self.videoStatusLabel.text = @"Ad contains a video asset.";
  } else {
    self.videoStatusLabel.text = @"Ad does not contain a video.";
  }

  // 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.
  // Note: this should always be done after populating the ad views.
  nativeAdView.nativeAd = nativeAd;
}ViewController.m

Pełny przykład na GitHubie

Aby zobaczyć pełny przykład integracji reklam natywnych w językach Swift, SwiftUI i Objective-C, kliknij odpowiedni link na GitHubie.

Swift Native Advanced Example SwiftUI Native Ads Example Objective-C Native Advanced Example

GADMediaView

Komponenty z obrazami i filmami są wyświetlane użytkownikom za pomocą GADMediaView. Jest to UIView, który można zdefiniować w pliku xib lub utworzyć dynamicznie. Podobnie jak w przypadku każdego innego widoku komponentu, należy go umieścić w hierarchii widoków GADNativeAdView.

Podobnie jak w przypadku wszystkich widoków komponentów, widok multimediów musi być wypełniony treścią. Ustawia się to za pomocą właściwości mediaContent w GADMediaView. Właściwość mediaContent w GADNativeAd zawiera treści multimedialne, które można przekazać do GADMediaView.

Oto fragment przykładu Native Advanced (Swift | Objective-C), który pokazuje, jak wypełnić GADMediaView komponentami reklamy natywnej za pomocą GADMediaContent z GADNativeAd:

Swift

nativeAdView.mediaView?.mediaContent = nativeAd.mediaContentViewController.swift

Objective-C

nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;ViewController.m

Upewnij się, że w pliku Interface Builder dla widoku reklamy natywnej masz ustawioną klasę niestandardową widoków na GADMediaView i że jest ona połączona z elementem mediaView.

Zmiana trybu treści obrazu

Klasa GADMediaView uwzględnia właściwość UIView contentMode podczas wyświetlania obrazów. Jeśli chcesz zmienić sposób skalowania obrazu w klasie GADMediaView, ustaw odpowiedni UIViewContentMode we właściwości contentMode klasy GADMediaView.

Aby na przykład wypełnić GADMediaView, gdy wyświetla się obraz (reklama nie zawiera filmu):

Swift

nativeAdView.mediaView?.contentMode = .scaleAspectFitNativeAdSnippets.swift

Objective-C

nativeAdView.mediaView.contentMode = UIViewContentModeScaleAspectFit;NativeAdSnippets.m

GADMediaContent

Klasa GADMediaContent zawiera dane związane z treściami multimedialnymi reklamy natywnej, które są wyświetlane za pomocą klasy GADMediaView. Gdy ustawisz ją we właściwości mediaContent klasy GADMediaView:

Jeśli dostępny jest komponent wideo, jest on buforowany i zaczyna się odtwarzać w GADMediaView. Możesz sprawdzić, czy komponent wideo jest dostępny, sprawdzając wartość hasVideoContent.
Jeśli reklama nie zawiera komponentu wideo, zamiast niego pobierany jest komponent mainImage i umieszczany w GADMediaView.

Dalsze kroki

Dowiedz się więcej o prywatności użytkowników.

Wyświetlanie reklamy natywnej Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Wyświetlanie zdefiniowanego przez system formatu reklamy natywnej

GADNativeAdView

Nakładka Informacja

Oznaczenie reklamy

Przykładowy kod

Rozmieszczanie UIViews

Łączenie elementów z widokami

Wyświetlanie reklamy

Swift

SwiftUI

Tworzenie modelu widoku

Tworzenie UIViewRepresentable

Dodawanie widoku do hierarchii widoków

Objective-C

Pełny przykład na GitHubie

GADMediaView

Swift

Objective-C

Zmiana trybu treści obrazu

Swift

Objective-C

GADMediaContent

Dalsze kroki

Wyświetlanie reklamy natywnej