Zaawansowana reklama natywna

Wyświetlanie formatu reklamy natywnej zdefiniowanego przez system

Po wczytaniu reklamy natywnej aplikacja otrzymuje obiekt reklamy natywnej przez jeden z GADAdLoaderDelegate komunikatu protokołu. 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 i zasobami Google Cloud.

Ważny punkt: więcej informacji o reklamach natywnych znajdziesz w Przewodniku po reklamach natywnych Zobacz też zasadami i wytycznymi dotyczącymi reklam natywnych , 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 zawiera również klasę IBOutlets używaną do rejestracji widok danych dla każdego zasobu oraz metodę rejestrowania GADNativeAd obiektu. Rejestrowanie widoków w ten sposób umożliwia pakietowi SDK automatyczne wykonywanie takich zadań jak:

• Rejestrowanie kliknięć.
• Rejestrowanie wyświetleń (gdy na ekranie jest widoczny pierwszy piksel).
• Wyświetlam nakładkę Informacja.

Nakładka Informacja

Pośrednie reklamy natywne (dostarczane przez AdMob) 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ż, upewnij się, że nakładka Informacja jest umieszczona w treści, która pozwala na umieszczenie ikony łatwo je zauważyć. Więcej informacji na temat wyglądu i funkcji nakładki znajdziesz w wskazówkami dotyczącymi implementacji automatycznych reklam natywnych.

Atrybucja reklam

W przypadku wyświetlania automatycznych reklam natywnych musisz podać atrybucję w postaci: wskazują, ż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 podczas korzystania z narzędzia GADAdLoaders skonfigurowane pod kątem żądania wielu formatów.

Rozmieszczanie widokó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 każdego innego pliku xib. Układ reklamy natywnej reklama może wyglądać:

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

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

Musisz też ustawić klasę niestandardową dla obiektu GADMediaView, który jest używany aby wyświetlić film lub obraz 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. Warto też pamiętać, że źródła te reprezentują poglądy klikalne w reklamie.

Wyświetl reklamę

Po ukończeniu układu i połączeniu gniazdek dodaj ten kod do aplikacji, która wyświetla reklamę po jej wczytaniu:

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

Tworzenie modelu 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 UIViewRepresentable dla domeny GADNativeView i zasubskrybuj zmiany danych w ViewModel zajęcia:

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 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. Ze względu na ten dodatkowy krok najlepiej wyświetlać reklamę natywną za pomocą komponentów UILabel i UIImageView.

Pełny przykład w GitHub

Zobacz pełny przykład integracji reklam natywnych w językach Swift, SwiftUI Objective-C, klikając odpowiedni link GitHub.

Przykład zaawansowanej reklamy natywnej Swift Przykład reklam natywnych SwiftUI Przykład zaawansowanej reklamy natywnej dla celu 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.

Komponenty z obrazem i filmem są wyświetlane użytkownikom za pomocą GADMediaView. Jest to UIView, który można zdefiniować w pliku xib lub utworzyć 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 GADMediaView.

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

Swift

nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

Objective-C

nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;

Upewnij się, że w pliku kreatora interfejsu dla widoku reklamy natywnej klasa niestandardowa widoków ustawiona na GADMediaView i została przez Ciebie połączona z Gniazdko mediaView.

Zmiana trybu zawartoś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

GADMediaContent przechowuje dane związane z zawartością multimedialną reklamy natywnej, które są wyświetlane za pomocą klasy GADMediaView. Po ustawieniu na urządzeniu GADMediaView Właściwość 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, jest pobierany komponent mainImage i umieszczane w elemencie GADMediaView.

.

Ważne: domyślnie jako pierwszy pobrany komponent z obrazem jest mainImage. Jeśli Używana jest kolumna disableImageLoading, mainImage to nil. Należy ją ustawić do obrazu pobranego ręcznie. 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.