Zaawansowana reklama natywna

Wyświetlanie formatu reklamy natywnej zdefiniowanego przez system

Gdy wczytuje się reklama natywna, Twoja aplikacja otrzyma obiekt reklamy natywnej za pomocą jednego z wiadomości protokołu GADAdLoaderDelegate. Twoja aplikacja jest wtedy odpowiedzialna za wyświetlanie reklamy (chociaż nie musi robić tego od razu). Aby ułatwić wyświetlanie formatów reklam zdefiniowanych przez system, pakiet SDK udostępnia przydatne materiały.

Ważny punkt: więcej informacji o reklamach natywnych znajdziesz w Przewodniku po reklamach natywnych Zapoznaj się też z zasadami i wskazówkami dotyczącymi reklam natywnych, aby dowiedzieć się, jak renderować reklamy natywne.

GADNativeAdView

Obiektowi GADNativeAd odpowiada klasa „wyświetlenie reklamy”: GADNativeAdView. Ta klasa widoku reklamy to UIView, którego wydawcy powinni używać do wyświetlania reklamy. Na przykład jeden element GADNativeAdView może wyświetlać jedną instancję elementu GADNativeAd. Każdy z obiektów UIView służących do wyświetlania komponentów reklamy powinien być podwidokiem obiektu GADNativeAdView.

Jeśli wyświetlasz reklamę np. w elemencie UITableView, hierarchia widoku danych w jednej z komórek może wyglądać tak:

Klasa GADNativeAdView udostępnia też obiekt IBOutlets, który służy do rejestrowania widoku używanego dla każdego pojedynczego 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świetlam nakładkę Informacja.

Nakładka Informacja

W przypadku pośrednich reklam natywnych (wyświetlanych przez AdMob, Ad Exchange lub AdSense) SDK dodaje nakładkę AdChoices. Pozostaw miejsce w ulubionym rogu widoku reklamy natywnej na logo „Informacja”, które zostanie automatycznie wstawione. Upewnij się też, że nakładka AdChoices jest umieszczona w takim miejscu, aby ikona była dobrze widoczna. Więcej informacji o wyglądzie i funkcjonowaniu nakładki znajdziesz we wskazówkach na temat implementacji automatycznych reklam natywnych.

Atrybucja reklam

Podczas wyświetlania reklam natywnych w ramach programowania reklam musisz wyświetlić oznaczenie reklamy, aby wskazać, że wyświetlenie jest reklamą.

Przykładowy kod

Zobaczmy, jak wyświetlać reklamy natywne za pomocą widoków wczytywanych dynamicznie z plików xib. Może to być bardzo przydatne, gdy używasz GADAdLoadersskonfigurowanego tak, aby wysyłać żądania dotyczące wielu formatów.

Rozmieszczanie obiektów UIView

Pierwszym krokiem jest określenie UIViews, w którym będą wyświetlane komponenty reklamy natywnej. Możesz to zrobić w Interface Builder tak samo jak w przypadku tworzenia dowolnego innego pliku xib. Oto przykład układu reklamy natywnej:

Zwróć uwagę na wartość klasy niestandardowej w prawym górnym rogu obrazu. Jest ustawiony na

GADNativeAdView. 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 reklamy.

Łączenie punktów sprzedaży z widokami

Gdy widoki zostaną utworzone i przypiszesz do układu odpowiednią klasę widoku reklamy, połącz punkty wyjściowe komponentów widoku reklamy z utworzoną przez siebie UIViews. Oto, jak możesz połączyć z ujęciem reklamy wyjścia komponentów z UIViews utworzonym dla reklamy:

W panelu gniazdka gniazdka w GADNativeAdView zostały powiązane z UIViews w interfejsie konstruktora. Dzięki temu pakiet SDK będzie wiedzieć, który zasób UIView wyświetla dany zasób. Pamiętaj też, że te kanały reprezentują wyświetlenia, które można kliknąć w reklamie.

Wyświetl reklamę

Po ukończeniu tworzenia układu i połączeniu punktów sprzedaży dodaj do aplikacji ten kod, który wyświetla reklamę po jej załadowaniu:

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

Tworzenie modelu widoku

Utwórz model widoku, który wczytuje reklamę natywną i publikuje dane reklamy natywnej. Zmiany:

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)")
  }
}
NativeAdViewModel.swift

Tworzenie obiektu UIViewRepresentable

Utwórz klasę UIViewRepresentable dla GADNativeView i subskrybuj zmiany danych w klasie 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
  }
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) {
        NativeAdView(nativeViewModel: nativeViewModel)  // Updates when the native ad data changes.
          .frame(minHeight: 300)  // minHeight determined from xib.
NativeContentView.swift

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;
}

Uwaga: przykładowy kod wyłącza interakcję użytkownika z wezwaniem do działania UIButton. Jeśli do wyświetlania komponentów reklam natywnych używasz komponentów UIButtons, musisz wyłączyć ich interakcję z użytkownikiem, aby pakiet SDK do reklam mobilnych Google mógł prawidłowo odbierać i przetwarzać zdarzenia UI. Z tego powodu lepiej wyświetlać komponenty reklam natywnych za pomocą atrybutów UILabel i UIImageView.

Kompletny przykład w GitHubie

Aby zobaczyć pełny przykład integracji reklam natywnych w Swift, SwiftUI i Objective-C, kliknij odpowiedni link do GitHuba.

Przykład zaawansowanej reklamy natywnej w języku Swift Przykład zaawansowanych reklam natywnych w SwiftUI Przykład zaawansowanej reklamy natywnej w języku Objective-C

GADMediaView

Ważna informacja: jeśli chcesz uwzględnić w układzie reklamy natywnej główny zasób obrazu, zamiast zasobu UIImageView musisz użyć zasobu GADMediaView.

Komponenty z obrazem i filmem są wyświetlane użytkownikom za pomocą GADMediaView. Jest to UIView, który może być zdefiniowany w pliku xib lub utworzony dynamicznie. Powinien on znajdować się w hierarchii widoków GADNativeAdView, tak jak każdy inny widok zasobu.

Podobnie jak w przypadku wszystkich widoków komponentów, widok multimediów musi zawierać treści. Wartość jest ustawiana za pomocą właściwości mediaContent w usługach GADMediaView. Właściwość mediaContent obiektu GADNativeAd zawiera treści multimedialne, które można przekazać do elementu GADMediaView.

Oto fragment z przykładu zaawansowanej reklamy natywnej (Swift | Objective-C), który pokazuje, jak wypełnić pole GADMediaView zasobami reklamy natywnej przy użyciu GADMediaContent z GADNativeAd:

Swift

nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

Objective-C

nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;

W pliku konstruktora interfejsu dla widoku reklamy natywnej sprawdź, czy klasa niestandardowa widoków jest ustawiona na GADMediaView i czy jest połączona z miejscem docelowym mediaView.

Zmiana trybu treści obrazu

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

Na przykład, aby wypełnić element GADMediaView, gdy wyświetlany jest obraz (reklama nie zawiera filmu):

Swift

nativeAdView.mediaView?.contentMode = .aspectFill

Objective-C

nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;

GADMediaContent

Klasa GADMediaContent przechowuje dane dotyczące multimediów reklamy natywnej, które są wyświetlane za pomocą klasy GADMediaView. Gdy jest ustawiona w przypadku właściwości GADMediaView mediaContent:

• Jeśli zasób wideo jest dostępny, jest buforowany i rozpoczyna się odtwarzanie w ramach GADMediaView. Aby sprawdzić, czy zasób wideo jest dostępny, sprawdź hasVideoContent.

• Jeśli reklama nie zawiera komponentu wideo, komponent mainImage jest pobierany i umieszczany w komponencie GADMediaView.

Ważna informacja: domyślnie mainImage to pierwszy pobrany komponent z obrazem. Jeśli używasz atrybutu disableImageLoading, a atrybut mainImage ma wartość nil, musisz ustawić tę właściwość na ręcznie pobrany obraz. Pamiętaj, że ten obraz będzie używany tylko wtedy, gdy nie ma dostępnego zasobu wideo.

Dalsze kroki

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