Zaawansowana reklama natywna

Wyświetlanie zdefiniowanego przez system formatu reklamy natywnej

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 zasoby.

Ważne: Zapoznaj się z zasadami dotyczącymi reklam natywnych wytycznych , aby dowiedzieć się, jak renderować reklamy natywne.

GADNativeAdView

W przypadku GADNativeAd ma też odpowiedni „wyświetlenie reklamy” zajęcia: 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 na przykład wyświetlasz reklamę w UITableView hierarchia widoku 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

Pośrednie reklamy natywne (wyświetlane przez Ad Managera) reklamy zapasowej lub za pośrednictwem Ad Exchange albo AdSense), dodaje nakładkę Informacja pakietu SDK. 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 na temat wyglądu i funkcji nakładki znajdziesz w wskazówkami dotyczącymi implementacji automatycznych reklam natywnych.

Uwaga: informacje AdChoices są wyświetlane w przypadku reklam sprzedawanych bezpośrednio tylko w Europejskim Obszarze Gospodarczym.

Przypisywanie reklam w ramach zautomatyzowanych reklam natywnych

Podczas wyświetlania reklam natywnych w ramach programowania reklam musisz wyświetlić oznaczenie reklamy, aby wskazać, że wyświetlenie jest reklamą. Więcej informacji znajdziesz w wytycznych dotyczących zasad.

Przykładowy kod

Przyjrzyjmy się teraz, jak wyświetlać reklamy natywne, gdy widoki ładowane dynamicznie z plików XIB. Może to być bardzo przydatne podczas korzystania z narzędzia GADAdLoaders skonfigurowane pod kątem żądania wielu formatów.

Rozmieszczanie obiektów UIView

Pierwszym krokiem jest określenie UIViews, w którym będą wyświetlane komponenty reklamy natywnej. W Kreatorze interfejsów możesz to zrobić tak samo jak przy tworzeniu innych elementów . Oto przykład układu reklamy natywnej:

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

GADNativeAdView To klasa wyświetlenia 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.

Połącz sklepy z widokami

Po utworzeniu widoków i przypisaniu właściwej klasy wyświetleń reklamy do: połącz zasoby widoku reklamy z utworzonymi 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 zakończeniu tworzenia układu i po 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 widoku hierarchia:

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 używasz UIButtons do wyświetlania zasobów reklam natywnych, musisz wyłączyć interakcji użytkowników, aby pakiet SDK do reklam mobilnych Google mógł prawidłowo zdarzenia interfejsu użytkownika. Z tego powodu lepiej wyświetlać komponenty reklam natywnych za pomocą tagó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 niestandardowego renderowania w Swiftzie Przykład reklam natywnych SwiftUI Przykład niestandardowego renderowania w Objective-C

GADMediaView

Ważne: musisz korzystać z narzędzia GADMediaView z komponentem UIImageView, jeśli chcesz dodać obraz główny. do układu reklamy natywnej.

Obrazy i filmy są wyświetlane użytkownikom za pomocą GADMediaView Jest to UIView, który można zdefiniować w pliku xib lub utworzyć dynamicznie. Powinien on być umieszczony w hierarchii widoku elementu GADNativeAdView, tak jak w przypadku z innym widokiem zasobów.

Tak jak w przypadku wszystkich wyświetleń zasobów, widok multimediów musi zawierać treść . Wartość tę ustawia się za pomocą mediaContent usłudze w witrynie GADMediaView. Właściwość mediaContent obiektu GADNativeAd zawiera treści multimedialne, które można przekazać do elementu GADMediaView.

Oto fragment kodu z Renderingu niestandardowego (Swift | Objective-C), który pokazuje, jak wypełnić obiekt GADMediaView za pomocą komponentów reklam natywnych za pomocą funkcji GADMediaContent z plików GADNativeAd:

Swift

nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

Objective-C

nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;

Upewnij się, że w pliku konstruktora interfejsu dla widoku reklamy natywnej masz ustawioną klasę niestandardową widoków na GADMediaView i połączoną z miejscem docelowym mediaView.

Zmiana trybu zawartości obrazu

Klasa GADMediaView podczas wyświetlania obrazów uwzględnia właściwość UIView contentMode contentMode. Zmiana sposobu skalowania obrazu GADMediaView, ustaw odpowiedni UIViewContentMode. aby to osiągnąć, za pomocą 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 GADMediaViewmediaContent:

• Jeśli zasób wideo jest dostępny, jest buforowany i rozpoczyna się odtwarzanie w GADMediaView Aby dowiedzieć się, czy dany komponent wideo jest dostępny, hasVideoContent

• Jeśli reklama nie zawiera komponentu wideo, jest pobierany komponent mainImage i umieszczane w elemencie 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 zostanie użyty tylko wtedy, gdy nie ma komponentu wideo dostępne.

Dalsze kroki

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