Zaawansowane reklamy natywne

Wyświetlanie zdefiniowanego przez system formatu reklamy natywnej

Po załadowaniu reklamy natywnej aplikacja otrzyma obiekt reklamy natywnej za pomocą jednego z komunikatów protokołu GADAdLoaderDelegate. To ona odpowiada za wyświetlanie reklamy (niekoniecznie musi to jednak nastąpić od razu). Aby ułatwić wyświetlanie formatów reklam zdefiniowanych przez system, pakiet SDK udostępnia przydatne materiały.

Ważne: Więcej informacji o reklamach natywnych znajdziesz w Poradniku dla reklam natywnych. Zapoznaj się też z zasadami i wytycznymi dotyczącymi reklam natywnych. znajdziesz w artykule o renderowaniu reklam natywnych.

GADNativeAdView,

W przypadku obiektu GADNativeAd istnieje klasa „widok reklamy”: GADNativeAdView. Ta klasa wyświetlenia reklamy to UIView, którego wydawcy powinni używać do wyświetlania reklamy. Na przykład pojedyncza właściwość GADNativeAdView może wyświetlać jedno wystąpienie GADNativeAd. Każdy z obiektów UIView używanych do wyświetlania zasobów tej reklamy powinien być podwidokiem 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ż właściwość IBOutlets używaną do rejestrowania widoku danych dla poszczególnych zasobów, a także metodę rejestracji obiektu GADNativeAd. Rejestrowanie w ten sposób widoków pozwala pakietowi SDK automatycznie obsługiwać takie zadania jak:

• Rejestrowanie kliknięć.
• Rejestruje wyświetlenia (gdy na ekranie jest widoczny pierwszy piksel).
• Wyświetlanie nakładki Informacja.

Nakładka Informacja

W przypadku pośrednich reklam natywnych (wyświetlanych przez AdMobreklamy zapasowe albo Ad Exchange lub AdSense) nakładka Informacja jest dodawana przez pakiet SDK. Pozostaw miejsce w preferowanym rogu widoku reklamy natywnej na automatycznie wstawione logo Informacja. Upewnij się też, że nakładka Informacja jest na obszarze, który pozwala łatwo zauważyć ikonę. Więcej informacji o wyglądzie i funkcji nakładki znajdziesz w wytycznych dotyczących implementacji natywnych reklam natywnych.

Atrybucja reklamy

Wyświetlając automatyczne reklamy natywne, musisz uwzględnić w atrybucji reklamy informację, ż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 w przypadku użycia metody GADAdLoaders skonfigurowanej tak, aby żądała wielu formatów.

Układy UIUI

Pierwszym krokiem jest układ UIViews, który będzie wyświetlać zasoby reklamy natywnej. Możesz to zrobić w Kreatorze interfejsu w taki sam sposób jak podczas tworzenia innego pliku XIB. Tak może wyglądać układ reklamy natywnej:

Zanotuj wartość klasy niestandardowej w prawym górnym rogu obrazu. Ustawiono

GADNativeAdView. To jest klasa wyświetlania reklamy używana do wyświetlania atrybutu GADNativeAd.

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

Łączenie gniazdek z widokami

Gdy uzyskasz już widok i przypiszesz do układu właściwą klasę wyświetlenia reklamy, połącz wyjścia tego zasobu z utworzonym przez siebie zasobem UIViews. Oto jak można połączyć wyjścia zasobu w widoku reklamy z elementem UIViews utworzonym dla reklamy:

W panelu gniazdek GADNativeAdView zostały połączone z UIViews określonym w konstruktorze interfejsu. Dzięki temu pakiet SDK będzie wiedzieć, który zasób UIView wyświetla dany zasób. Trzeba też pamiętać, że wyjścia te zawierają widoki, które można kliknąć w reklamie.

Wyświetlanie reklamy

Po zakończeniu układu i połączeniu gniazd zewnętrznych ostatnim krokiem jest dodanie do aplikacji kodu, który wyświetli reklamę po jej załadowaniu. Aby wyświetlić reklamę 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: ten przykładowy kod wyłącza interakcję użytkownika z elementem UIButton, który wyświetla wezwanie do działania. Jeśli do wyświetlania zasobów reklam natywnych używasz przycisków UI, musisz też wyłączyć interakcje użytkowników, aby pakiet SDK do reklam mobilnych Google mógł prawidłowo odbierać i przetwarzać zdarzenia UI. Z tego względu lepiej unikać całego interfejsu i zamiast niego używać właściwości UILabel i UIImageView.

Nasze repozytorium GitHub zawiera pełne implementacjenatywnych reklam natywnych napisane zarówno w Swift, jak i w celu C.

Pobierz przykład zaawansowanej reklamy natywnej

GADMediaView

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

Zasoby graficzne i wideo są wyświetlane użytkownikom za pomocą: GADMediaView. Jest to plik UIView, który można zdefiniować w pliku XIB lub utworzyć go dynamicznie. Należy go umieścić w hierarchii widoku GADNativeAdView, tak jak w przypadku każdego innego widoku zasobów.

Podobnie jak w przypadku wszystkich wyświetleń zasobów, widok multimediów musi zawierać swoje treści. Aby to zrobić, użyj właściwości mediaContent w GADMediaView. Właściwość mediaContent elementu GADNativeAd zawiera treści multimedialne, które można przekazać do GADMediaView.

Oto fragment kodu z przykładem Zaawansowane reklamy natywne (Swift | Goal-C) wypełnia GADMediaView zasobami reklam natywnych z wykorzystaniem GADMediaContent z GADNativeAd:

Swift

nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

Objective-C

nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;

Sprawdź, czy w pliku narzędzia do tworzenia interfejsu natywnego dla widoku reklamy natywnej masz ustawioną klasę niestandardową „GADMediaView” i czy jest ona połączona z gniazdkiem mediaView.

Zmiana trybu treści obrazu

Podczas wyświetlania obrazów klasa GADMediaView przestrzega właściwości UIViewcontentMode. Jeśli chcesz zmienić sposób skalowania obrazu w elemencie GADMediaView, ustaw odpowiednią wartość UIViewContentMode we właściwości contentMode elementu GADMediaView, aby uzyskać ten efekt.

Aby na przykład wypełnić właściwość GADMediaView, gdy wyświetlany jest obraz (reklama nie zawiera wideo):

Swift

nativeAdView.mediaView?.contentMode = .aspectFill

Objective-C

nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;

Treści GAD

Klasa GADMediaContent zawiera dane związane z treścią multimedialną reklamy natywnej, które są wyświetlane za pomocą klasy GADMediaView. Po ustawieniu właściwości GADMediaView mediaContent:

• Jeśli zasób wideo jest dostępny, zostanie zbuforowany i zacznie się wyświetlać w obrębie GADMediaView. Zasób filmu jest dostępny, sprawdzając hasVideoContent.

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

Ważne: domyślnie mainImage jest pierwszym pobranym zasobem graficznym. Jeśli używana jest właściwość disableImageLoading, mainImage to nil, a w przypadku tej właściwości trzeba ustawić obraz pobierany ręcznie. Będzie on używany tylko wtedy, gdy nie będzie dostępny zasób wideo.