Zaawansowane reklamy natywne

Wyświetlanie zdefiniowanego przez system formatu reklamy natywnej

Po wczytaniu reklamy natywnej aplikacja otrzyma obiekt reklamy natywnej za pomocą jednego z komunikatów protokołu GADAdLoaderDelegate. To Twoja aplikacja odpowiada za wyświetlenie reklamy (choć nie musi to robić 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 i wskazówkami dotyczącymi reklam natywnych , aby dowiedzieć się, jak wyświetlać reklamy natywne.

GADNativeAdView

Dla klasy GADNativeAd istnieje odpowiadająca jej klasa „widok reklamy”: GADNativeAdView. Ta klasa wyświetlenia reklamy to właściwość UIView, której wydawcy powinni używać do wyświetlania reklamy. Pojedynczy element GADNativeAdView może na przykład wyświetlać pojedyncze wystąpienie elementu GADNativeAd. Każdy z obiektów UIView używanych do wyświetlania zasobów reklamy powinien być widokiem podrzędnymi tego obiektu GADNativeAdView.

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

Klasa GADNativeAdView udostępnia też metodę IBOutlets umożliwiającą rejestrowanie widoku używanego dla poszczególnych zasobów oraz metodę rejestrowania samego obiektu GADNativeAd. Zarejestrowanie widoków w ten sposób umożliwia pakietowi SDK automatyczne obsługę takich zadań jak:

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

Nakładka Informacja

Do niebezpośrednich reklam natywnych (wyświetlanych Ad Manager przez reklamy zapasowe lub przez Ad Exchange albo AdSense) pakiet SDK dodaje nakładkę Informacja. Pozostaw miejsce w preferowanym rogu widoku reklamy natywnej na automatycznie wstawiane logo Informacja. Zadbaj też o to, by nakładka Informacja była umieszczona na treściach, dzięki którym ikona będzie dobrze widoczna. Więcej informacji o wyglądzie i funkcji nakładki znajdziesz we wskazówkach na temat implementacji automatycznych reklam natywnych.

Uwaga: opcja Informacja wyświetla się w przypadku reklam sprzedawanych bezpośrednio w EOG.

Atrybucja automatycznych reklam natywnych

W przypadku wyświetlania automatycznych reklam natywnych musisz podać atrybucję reklamy, aby wskazać, że wyświetlenie jest związane z reklamą. Na tej stronie znajdziesz wytyczne dotyczące zasad.

Przykładowy kod

Przyjrzyjmy się, jak wyświetlać reklamy natywne za pomocą widoków ładowanych dynamicznie z plików xib. Może to być bardzo przydatne, gdy używasz obiektu GADAdLoaders skonfigurowanego na potrzeby żądania wielu formatów.

Układ elementów UIView

Pierwszym krokiem jest utworzenie UIViews, w którym będą wyświetlane zasoby reklamy natywnej. Możesz to zrobić w kreatorze interfejsów tak samo jak w przypadku dowolnego innego pliku xib. Oto jak może wyglądać układ reklamy natywnej:

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

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

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

Łączenie punktów sprzedaży z widokami

Gdy widoki danych będą już gotowe i przypiszesz do układu odpowiednią klasę widoku reklamy, połącz źródła zasobów widoku reklamy z utworzonym przez siebie obiektem UIViews. Aby połączyć miejsca wyświetlania zasobów dla danego wyświetlenia reklamy z elementem UIViews utworzonym dla reklamy:

Gniazdka w panelu gniazdek w budynku GADNativeAdView są połączone z elementem UIViews określonym w Kreatorze interfejsów. Dzięki temu pakiet SDK będzie wiedzieć, który zasób (UIView) wyświetla dany zasób. Pamiętaj też, że miejsca docelowe reprezentują wyświetlenia, które można kliknąć w reklamie.

Wyświetlanie reklamy

Wskazówka: dowiedz się, jak wyświetlać reklamy natywne za pomocą interfejsu SwiftUI.

Gdy układ jest gotowy i gniazdka są połączone, ostatnim krokiem jest dodanie do aplikacji kodu, który po wczytaniu reklamy będzie wyświetlać reklamę. Oto metoda wyświetlania reklamy w widoku zdefiniowanym powyżej:

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

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

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

Uwaga: jak widać, przykładowy kod powyżej wyłącza interakcję użytkownika z elementem UIButton, który wyświetla wezwanie do działania. Jeśli używasz interfejsu UIButtons do wyświetlania zasobów reklam natywnych, musisz też wyłączyć ich interakcję z użytkownikami, aby pakiet SDK do reklam mobilnych Google mógł prawidłowo odbierać i przetwarzać zdarzenia interfejsu. Z tego względu często najlepiej całkowicie unikać elementów UIButton i używać w zamian UILabel oraz UIImageView.

W naszym repozytorium GitHub znajdziesz kompletne implementacje natywnych reklam renderowanych niestandardowo napisanych w języku Swift i Objective-C.

Pobierz przykład renderowania niestandardowego w usłudze Google Ad Manager

GADMediaView

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

Komponenty z obrazem i filmami są wyświetlane użytkownikom przez GADMediaView. Jest to obiekt UIView, który można zdefiniować w pliku xib lub utworzyć dynamicznie. Powinien znajdować się w hierarchii widoków danych GADNativeAdView, tak jak każdy inny widok zasobu.

Tak jak w przypadku wszystkich wyświetleń zasobów widok mediów musi zawierać treść. Ustawia się je za pomocą właściwości mediaContent w systemie GADMediaView. Właściwość mediaContent elementu GADNativeAd zawiera treści multimedialne, które można przekazać do elementu GADMediaView.

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

Swift

nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

Objective-C

nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;

Sprawdź, czy w pliku kreatora interfejsów dla widoku reklamy natywnej masz klasę niestandardową widoków ustawioną na GADMediaView i czy jest ona podłączona do gniazdka mediaView.

Tryb zmiany zawartości obrazu

Podczas wyświetlania obrazów klasa GADMediaView przestrzega właściwości UIView contentMode. Aby zmienić sposób skalowania obrazu w funkcji GADMediaView, ustaw odpowiednią wartość UIViewContentMode we właściwości contentMode obiektu GADMediaView.

Aby np. wypełnić GADMediaView podczas wyświetlania obrazu (reklama nie zawiera filmu):

Swift

nativeAdView.mediaView?.contentMode = .aspectFill

Objective-C

nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;

GADMediaContent

Klasa GADMediaContent zawiera dane związane z zawartością multimedialną reklamy natywnej. Są one wyświetlane z użyciem klasy GADMediaView. Jeśli ustawisz ją we właściwości GADMediaView mediaContent:

• Jeśli zasób wideo jest dostępny, jest on buforowany i odtwarzany w elemencie GADMediaView. Aby sprawdzić, czy komponent wideo jest dostępny, sprawdź hasVideoContent.

• Jeśli reklama nie zawiera komponentu wideo, zasób mainImage jest pobierany i umieszczany w elemencie GADMediaView.

Ważne: domyślnie mainImage jest pierwszym pobranym komponentem z obrazem. Jeśli używana jest właściwość disableImageLoading, mainImage to nil. Ustaw tę właściwość na obraz pobrany ręcznie. Pamiętaj, że ten obraz będzie używany tylko wtedy, gdy nie będzie dostępny żaden komponent wideo.

Dalsze kroki

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