Zaawansowane reklamy natywne

Wyświetlanie zdefiniowanego przez system formatu reklamy natywnej

Po wczytaniu reklamy natywnej aplikacja otrzymuje obiekt reklamy natywnej przez jeden z GADAdLoaderDelegate komunikatu protokołu. Aplikacja jest wtedy odpowiedzialna za wyświetlanie reklamy (choć nie musi to być konieczne od razu). Aby ułatwić wyświetlanie formatów reklam zdefiniowanych przez system, pakiet SDK udostępnia przydatne i zasobami Google Cloud.

GADNativeAdView

W przypadku GADNativeAd ma też odpowiedni „wyświetlenie reklamy” zajęcia: GADNativeAdView Ta klasa wyświetlania reklamy to UIView, którego wydawcy powinni użyć, aby wyświetlić reklamę. Na przykład pojedynczy element GADNativeAdView może wyświetlać pojedyncze wystąpienie GADNativeAd. Każdy z obiektów UIView użytych do wyświetlenia powinny być widokami podrzędnymi tego obiektu GADNativeAdView.

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

Klasa GADNativeAdView zawiera również zasób IBOutlets używany do rejestracji widoku danych poszczególnych zasobów oraz metody 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: Ad Manager) reklamy zapasowej lub za pośrednictwem Ad Exchange albo AdSense), dodaje nakładkę Informacja pakietu SDK. Pozostaw miejsce w preferowanym obszarze narożnik wyświetlenia reklamy natywnej z automatycznie wstawionym logo Informacja. 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 automatycznych reklam natywnych

W przypadku wyświetlania automatycznych reklam natywnych musisz podać atrybucję w postaci: wskazują, że wyświetlenie jest reklamą. Na tej stronie znajdziesz wytyczne dotyczące 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 . 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 wyświetlenia 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 utworzeniu widoków i przypisaniu właściwej klasy wyświetleń reklamy do: połącz zasoby widoku reklamy z utworzonymi przez siebie UIViews. Aby połączyć źródła komponentów widoku reklamy z utworzonym UIViews dla reklamy:

Gniazdka w panelu gniazdka w lokalizacji GADNativeAdView zostały połączone z UIViews zdefiniowany w Kreatorze interfejsu. 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 tej reklamy 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)")
  }
}

Tworzenie obiektu UIViewReplicaable

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
  }

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.

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

Kompletny przykład w GitHubie

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

Przykład renderowania niestandardowego Swift Przykład reklam natywnych SwiftUI Przykład renderowania niestandardowego Objective-C

GADMediaView

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 znajdować się 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 domenie GADMediaView. mediaContent właściwość GADNativeAd zawiera treści multimedialne, które można przesłać do GADMediaView.

Oto fragment Przykład renderowania niestandardowego (Swift | Objective-C) który pokazuje, jak wypełnić GADMediaView komponentami reklam natywnych za pomocą GADMediaContent od 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 respektuje UIView contentMode. przy wyświetlaniu obrazów. Zmiana sposobu skalowania obrazu GADMediaView, ustaw odpowiedni UIViewContentMode aby to osiągnąć, za pomocą właściwości contentMode obiektu GADMediaView.

Aby np. wypełnić pole GADMediaView podczas wyświetlania obrazu (reklama nie ma wideo):

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

Dalsze kroki

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