Zaawansowane reklamy natywne

Wyświetlanie formatu reklamy natywnej zdefiniowanego przez system

Po załadowaniu reklamy natywnej aplikacja otrzyma obiekt reklamy natywnej za pomocą jednego z komunikatów protokołu GADAdLoaderDelegate. Aplikacja odpowiada za wyświetlanie reklamy (chociaż nie musi to robić natychmiast). Aby uprościć wyświetlanie formatów reklam zdefiniowanych w systemie, pakiet SDK udostępnia przydatne zasoby.

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

Reklama natywna GAD

Do klasy GADNativeAd jest przypisana klasa „wyświetlenie reklamy”: GADNativeAdView. Ta klasa wyświetlenia reklamy to UIView, której wydawcy powinni używać do wyświetlania reklamy. Na przykład pojedyncza właściwość GADNativeAdView może zawierać pojedyncze wystąpienie GADNativeAd. Każdy obiekt UIView używany do wyświetlania zasobów reklamy powinien być widokiem podrzędnym tego obiektu GADNativeAdView.

Jeśli np. wyświetlasz reklamę w kolumnie UITableView, hierarchia widoku dla jednej z tych komórek może wyglądać tak:

Klasa GADNativeAdView udostępnia też właściwość IBOutlets używaną do rejestrowania widoku używanego dla poszczególnych zasobów, a także metodę rejestrowania samego obiektu GADNativeAd. Rejestrowanie widoków w ten sposób umożliwia pakietowi SDK automatyczną obsługę takich zadań jak:

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

Nakładka Informacja

W przypadku pośrednich reklam natywnych (wyświetlanych dzięki AdMobzapasowym reklamom lub Ad Exchange albo AdSense) nałożony jest pakiet SDK Informacja. Pozostaw miejsce w preferowanym narożniku 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 we wskazówkach dotyczących implementacji natywnych reklam natywnych.

Atrybucja reklamy

W przypadku automatycznych reklam natywnych musisz podać atrybucję reklamy, która wskazuje, że widok jest reklamą.

Przykładowy kod

Przyjrzyjmy się, jak wyświetlać reklamy natywne na podstawie widoków wczytywanych dynamicznie z plików xib. Może to być bardzo przydatne podejście GADAdLoaders do konfigurowania wielu formatów.

Układy UIView

Najpierw utwórz układ UIViews, w którym będą się wyświetlać zasoby reklamy natywnej. Możesz to zrobić w kreatorze interfejsów tak samo jak w przypadku każdego innego pliku XIB. Tak może wyglądać reklama natywna:

Zanotuj wartość Klasa niestandardowa w prawym górnym rogu obrazu. Ustawiono

GADNativeAdView. Jest to klasa wyświetlania reklamy używana do wyświetlania parametru GADNativeAd.

Musisz też ustawić klasę niestandardową GADMediaView używaną do wyświetlania wideo lub obrazu reklamy.

Łączenie gniazd z widokami

Gdy widoki będą już dostępne i przypiszesz do nich prawidłową klasę widoku reklamy, połącz gniazda zasobów tego widoku z utworzonym przez Ciebie zasobem UIViews. Oto, jak możesz połączyć gniazda zasobów wyświetlenia reklamy z UIViews utworzonym dla reklamy:

Gniazdka w panelu GADNativeAdView są połączone z UIViews określonym w kreatorze interfejsów. Dzięki temu pakiet SDK będzie wiedział, który zasób UIView wyświetla dany zasób. Warto też pamiętać, że punkty te odpowiadają wyświetleniom, które można kliknąć w reklamie.

Wyświetlanie reklamy

Gdy układ będzie gotowy, a gniazdka zostaną połączone, ostatnim krokiem będzie dodanie kodu do aplikacji, która wyświetla 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 zawiera wezwanie do działania. Jeśli do wyświetlania zasobów reklamy natywnej używasz UIButtons, musisz też wyłączyć interakcję użytkowników, aby pakiet SDK do reklam mobilnych Google mógł prawidłowo odbierać i przetwarzać zdarzenia w interfejsie. Z tego względu często najlepiej jest unikać całkowicie przycisków UI i zamiast nich używać UILabel oraz UIImageView.

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

Pobierz zaawansowane przykładowe reklamy natywne

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ą strony GADMediaView. Jest to element UIView, który można określić w pliku XIB lub skonstruować dynamicznie. Należy go umieścić w hierarchii widoku elementu GADNativeAdView, jak w przypadku każdego innego widoku zasobu.

Podobnie jak w przypadku wszystkich wyświetleń zasobów, widok multimediów musi zawierać treści. Można to ustawić za pomocą 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 fragmentprzykładu zaawansowanej reklamy natywnej (Swift | Goal-C) wypełniający GADMediaView zasobami reklamy natywnej z wykorzystaniem GADMediaContent z GADNativeAd:

Swift

nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

Objective-C

nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;

Upewnij się, że w widoku reklamy natywnej masz ustawioną klasę niestandardową widoków danych GADMediaView i że jest ona połączona z gniazdkiem mediaView.

Zmiana trybu treści obrazu

Podczas wyświetlania obrazów klasa GADMediaView uwzględnia właściwość UIView contentMode. Aby zmienić sposób skalowania obrazu w metodzie GADMediaView, ustaw odpowiednią wartość UIViewContentMode we właściwości contentMode elementu GADMediaView.

Aby np. wypełnić GADMediaView, gdy wyświetlany jest obraz (reklama nie ma wideo):

Swift

nativeAdView.mediaView?.contentMode = .aspectFill

Objective-C

nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;

Treści GADMedia

Klasa GADMediaContent zawiera dane związane z treściami multimedialnymi 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 zostanie uruchomiony w obrębie komponentu GADMediaView. Dostępność komponentu wideo możesz sprawdzić na stronie hasVideoContent.

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

Ważne: domyślnie mainImage jest pierwszym pobranym komponentem z obrazem. Jeśli używana jest zasada disableImageLoading, właściwość mainImage ma wartość nil, a tę właściwość należy ustawić na obraz pobrany 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.