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.
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.
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
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; }
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
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 elemencieGADMediaView
.
Dalsze kroki
Dowiedz się więcej o prywatności użytkowników.