Używanie niestandardowych formatów reklam natywnych

Wybierz platformę: Android Nowy Android iOS

Niestandardowe formaty reklam

Podobnie jak ich odpowiedniki zdefiniowane przez system, niestandardowe formaty reklam natywnych są wczytywane za pomocą obiektów GADAdLoader. Jeśli podczas inicjowania GADAdLoader w tablicy adTypes uwzględnisz stałą GADAdLoaderAdTypeCustomNative, skonfigurujesz go tak, aby podczas wczytywania reklam żądał niestandardowych formatów natywnych.

GADCustomNativeAdLoaderDelegate

Protokół wczytywania formatów niestandardowych ma 2 metody. Pierwsza jest używana przez GADAdLoader do określania, o które identyfikatory formatów należy poprosić:

Swift

public func customNativeAdFormatIDs(for adLoader: AdLoader) -> [Any]

Objective-C

- (NSArray *)customNativeAdFormatIDsForAdLoader:(AdLoader *)adLoader;

Każdy niestandardowy format reklamy natywnej ma odpowiadający mu identyfikator formatu, który go identyfikuje. Gdy ta metoda zostanie wywołana, aplikacja powinna zwrócić tablicę zawierającą identyfikatory formatów reklam, które jest gotowa wyświetlić.

Drugi komunikat jest wysyłany po wczytaniu niestandardowej reklamy natywnej, podobnie jak w przypadku formatów zdefiniowanych przez system:

Swift

public func adLoader(_ adLoader: AdLoader,
    didReceive customNativeAd: CustomNativeAd)

Objective-C

- (void)adLoader:(AdLoader *)adLoader
    didReceiveCustomNativeAd:(CustomNativeAd *)customNativeAd;

Identyfikatory formatów

Identyfikatory formatów używane do jednoznacznego odwoływania się do niestandardowych formatów reklam natywnych można znaleźć w interfejsie Ad Managera w sekcji Natywne w menu Wyświetlanie dropdown:

Identyfikator formatu każdej niestandardowej reklamy natywnej jest wyświetlany obok jej nazwy. Kliknięcie jednej z nazw powoduje przejście do ekranu szczegółów, na którym wyświetlane są informacje o polach formatu:

Tutaj można dodawać, edytować i usuwać poszczególne pola. Zwróć uwagę na nazwę każdego zasobu. Nazwa jest kluczem używanym do pobierania danych każdego komponentu podczas wyświetlania niestandardowego formatu reklamy natywnej.

Wyświetlanie niestandardowych formatów reklam natywnych

Niestandardowe formaty reklam natywnych różnią się od formatów zdefiniowanych przez system tym, że wydawcy mogą definiować własną listę komponentów, z których składa się reklama. Z tego powodu proces wyświetlania niestandardowych reklam natywnych różni się od procesu wyświetlania formatów zdefiniowanych przez system na kilka sposobów:

  1. Ponieważ GADCustomNativeAd ma obsługiwać wszystkie tworzone przez Ciebie niestandardowe formaty reklam natywnych, nie ma nazwanych akcesorów komponentów. Zamiast tego oferuje metody takie jak imageForKey: i stringForKey:, które przyjmują nazwę pola jako argument.
  2. Nie ma dedykowanej klasy widoku reklamy, takiej jak GADNativeAdView, która byłaby używana z GADCustomNativeAd. Możesz użyć dowolnego widoku, który będzie odpowiedni dla Twoich użytkowników.
  3. Ponieważ nie ma dedykowanej klasy widoku reklamy, nie musisz rejestrować żadnego z widoków używanych do wyświetlania komponentów reklamy.

Oto przykład wyświetlenia reklamy, które może wyświetlać prostą niestandardową reklamę natywną:

MySimpleNativeAdView.h

Swift

import UIKit
import GoogleMobileAds

/// Custom native ad view class with format ID 10063170.
class MySimpleNativeAdView: UIView {

  /// Weak references to this ad's asset views.
  @IBOutlet weak var headlineView: UILabel!
  @IBOutlet weak var mainImageView: UIImageView!
  @IBOutlet weak var captionView: UILabel!

  ...

  /// Populates the ad view with the custom native ad object.
  func populateWithCustomNativeAd(_ customNativeAd: CustomNativeAd) {
    ...
  }
}

Objective-C

@import UIKit;
@import GoogleMobileAds;

/// View representing a custom native ad format with format ID 10063170.
@interface MySimpleNativeAdView : UIView

// Weak references to this ad's asset views.
@property(weak, nonatomic) IBOutlet UILabel *headlineView;
@property(weak, nonatomic) IBOutlet UIImageView *mainImageView;
@property(weak, nonatomic) IBOutlet UILabel *captionView;

/// Populates the ad view with the custom native ad object.
- (void)populateWithCustomNativeAd:(GADCustomNativeAd *)customNativeAd;

@end

MySimpleNativeAdView.m (fragment)

Swift

...
func populateWithCustomNativeAd(_ customNativeAd: CustomNativeAd) {
  self.customNativeAd = customNativeAd

  // Populate the custom native ad assets.
  headlineView.text = self.customNativeAd.stringForKey("Headline")
  mainImageView.image = self.customNativeAd.imageForKey("MainImage")?.image
  captionView.text = self.customNativeAd.stringForKey("Caption")
}
...

Objective-C

...
- (void)populateWithCustomNativeAd:(GADCustomNativeAd *)customNativeAd {
  self.customNativeAd = customNativeAd;

  // Populate the custom native ad assets.
  self.headlineView.text = [customNativeAd stringForKey:@"Headline"];
  self.mainImageView.image = [customNativeAd imageForKey:@"MainImage"].image;
  self.captionView.text = [customNativeAd stringForKey:@"Caption"];
}
...

Renderowanie ikony Informacja

W ramach wspierania aktu o usługach cyfrowych (DSA), reklamy z rezerwacji wyświetlane w Europejskim Obszarze Gospodarczym (EOG) muszą zawierać ikonę Informacja i link do strony „O tej reklamie” w Google. Implementując niestandardowe reklamy natywne, odpowiadasz za renderowanie ikony Informacja. Pamiętaj, aby zadbać o renderowanie i ustawienie detektora kliknięć ikony Informacja podczas renderowania głównych komponentów reklamy.

Poniższy przykład renderuje ikonę Informacja i konfiguruje odpowiednie działanie po kliknięciu.

Swift

class MySimpleNativeAdView: UIView {
  @IBOutlet weak var adChoicesView: UIImageView!

  override func awakeFromNib() {
    super.awakeFromNib()

    // Enable clicks on AdChoices.
    adChoicesView.addGestureRecognizer(
      UITapGestureRecognizer(
        target: self,
        action: #selector(performClickOnAdChoices(_:))))
    adChoicesView.isUserInteractionEnabled = true
  }

  @objc func performClickOnAdChoices(_ sender: UIImage!) {
    customNativeAd.performClickOnAsset(withKey:
      NativeAssetIdentifier.adChoicesViewAsset.rawValue)
  }

  func populate(withCustomNativeAd customNativeAd: CustomNativeAd) {

    // Render the AdChoices image.
    let adChoicesKey = NativeAssetIdentifier.adChoicesViewAsset.rawValue
    let adChoicesImage = customNativeAd.image(forKey: adChoicesKey)?.image
    adChoicesView.image = adChoicesImage
    adChoicesView.isHidden = adChoicesImage == nil
    ...
  }
}

Objective-C

@interface MySimpleNativeAdView ()

@property(nonatomic, weak) IBOutlet UIImageView *adChoicesView;

@end

@implementation MySimpleNativeAdView

- (void)awakeFromNib {
  [super awakeFromNib];
  // Enable clicks on AdChoices.
  [self.adChoicesView addGestureRecognizer:[[UITapGestureRecognizer alloc]
                                            initWithTarget:self
                                            action:@selector(performClickOnAdChoices:)]];
  self.adChoicesView.userInteractionEnabled = YES;
}

- (void)performClickOnAdChoices:(UITapGestureRecognizer *)sender {
    [self.customNativeAd performClickOnAssetWithKey:GADNativeAdChoicesViewAsset];
}

- (void)populateWithCustomNativeAd:(GADCustomNativeAd *)customNativeAd {
  // Render the AdChoices image.
  GADNativeAdImage *adChoicesAsset = [customNativeAd
    imageForKey:GADNativeAdChoicesViewAsset];
  self.adChoicesView.image = adChoicesAsset.image;
  self.adChoicesView.hidden = (adChoicesAsset == nil);
  ...
}

Natywna kreacja wideo w niestandardowych formatach reklam natywnych

Podczas tworzenia formatu niestandardowego, możesz określić, czy ma on być odpowiedni do wyświetlania reklam wideo.

W implementacji aplikacji możesz użyć właściwości GADCustomNativeAd.mediaView, aby uzyskać widok filmu. Następnie dodaj ten widok do hierarchii widoków. Jeśli reklama nie zawiera treści wideo, przygotuj alternatywne plany wyświetlania reklamy bez filmu.

W przykładzie poniżej sprawdzamy, czy reklama zawiera treści wideo, a jeśli film jest niedostępny, wyświetlamy w jego miejscu obraz:

Swift

...
  /// Populates the ad view with the custom native ad object.
  func populate(withCustomNativeAd customNativeAd: CustomNativeAd) {
    if customNativeAd.videoController.hasVideoContent(),
      let mediaView = customNativeAd.mediaView {
      updateMainView(mediaView)
    } else {
      // Assumes your native format has an image asset with the name MainImage.
      let image: UIImage? = customNativeAd.image(forKey: "MainImage")?.image
      updateMainView(UIImageView(image: image))
    }
  }

  private func updateMainView(_ mainView:UIView) {
    // Assumes you have a placeholder view for your media content.
    // Remove all the placeholder's subviews.
    for subview: UIView in mainPlaceholder.subviews {
      subview.removeFromSuperview()
    }
    mainPlaceholder.addSubview(mainView)
    // Size the media view to fill our container size.
    mainView.translatesAutoresizingMaskIntoConstraints = false
    let viewDictionary: [AnyHashable: Any] = ["mainView":mainView]
    mainPlaceholder.addConstraints(NSLayoutConstraint.constraints(
      withVisualFormat: "H:|[mainView]|", options: [], metrics: nil,
      views: viewDictionary as? [String : Any] ?? [String : Any]()))
    mainPlaceholder.addConstraints(NSLayoutConstraint.constraints(
      withVisualFormat: "V:|[mainView]|", options: [], metrics: nil,
      views: viewDictionary as? [String : Any] ?? [String : Any]()))
  }
...

Objective-C

...
- (void)populateWithCustomNativeAd:(GADCustomNativeAd *)ad {
  UIView *mainView = nil;
  if (ad.videoController.hasVideoContent) {
    mainView = ad.mediaView;
  } else {
    // Assumes your native format has an image asset with the name MainImage.
    UIImage *image = [ad imageForKey:@"MainImage"].image;
    mainView = [[UIImageView alloc] initWithImage:image];
  }
  // Assumes you have a placeholder view for your media content.
  for (UIView *subview in self.mainPlaceholder.subviews) {
    [subview removeFromSuperview];
  }
  [self.mainPlaceholder addSubview:mainView];

  // Size the main view to fill our container size.
  [mainView setTranslatesAutoresizingMaskIntoConstraints:NO];
  NSDictionary *viewDictionary = NSDictionaryOfVariableBindings(mainView);
  [self.mainPlaceholder
      addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[mainView]|"
                                                             options:0
                                                             metrics:nil
                                                               views:viewDictionary]];
}
...

Więcej informacji o tym, jak dostosować wyświetlanie filmu w niestandardowej reklamie natywnej, znajdziesz w artykule GADVideoController.

Aby zobaczyć działający przykład natywnej kreacji wideo, pobierz przykład renderowania niestandardowego w Ad Managerze .

Obsługa kliknięć i wyświetleń niestandardowych reklam natywnych

W przypadku niestandardowych formatów reklam natywnych aplikacja odpowiada za rejestrowanie wyświetleń i zgłaszanie zdarzeń kliknięć do pakietu SDK.

Rejestrowanie wyświetleń

Aby zarejestrować wyświetlenie niestandardowej reklamy natywnej, wywołaj metodę recordImpression w odpowiednim obiekcie GADCustomNativeAd:

Swift

myCustomNativeAd.recordImpression()

Objective-C

[myCustomNativeAd recordImpression];

Pakiet SDK uniemożliwia rejestrowanie zduplikowanych wyświetleń w przypadku jednego żądania, jeśli aplikacja przypadkowo wywoła metodę wiele razy w przypadku tej samej reklamy.

Zgłaszanie kliknięć

Aby zgłosić do pakietu SDK, że kliknięto widok komponentu, wywołaj metodę performClickOnAssetWithKey: w odpowiednim obiekcie GADCustomNativeAd i przekaż nazwę klikniętego komponentu. Jeśli na przykład masz komponent w formacie niestandardowym o nazwie „MainImage” i chcesz zgłosić kliknięcie widoku odpowiadającego temu komponentowi, kod będzie wyglądać tak:

Swift

myCustomNativeAd.performClickOnAsset(withKey: "MainImage")

Objective-C

[myCustomNativeAd performClickOnAssetWithKey:@"MainImage"];

Pamiętaj, że nie musisz wywoływać tej metody w przypadku każdego widoku zasobu powiązanego z reklamą. Jeśli na przykład masz inny zasób o nazwie „Caption”, który ma być wyświetlany, ale nie ma być klikany ani dotykany przez użytkownika, aplikacja nie musi wywoływać metody performClickOnAssetWithKey: w przypadku tego widoku.

Reagowanie na niestandardowe działania po kliknięciu

GADCustomNativeAd ma właściwość customClickHandler typu GADNativeAdCustomClickHandler.

Swift

typealias NativeAdCustomClickHandler = (assetID: String) -> Void

Objective-C

typedef void (^GADNativeAdCustomClickHandler)(NSString *assetID);

Jest to blok (Objective-C) lub domknięcie (Swift), które przyjmuje assetID jako parametr wejściowy. Identyfikuje on komponent, który został kliknięty.

Gdy klikniesz niestandardową reklamę natywną, pakiet SDK może zareagować na 3 sposoby, w tej kolejności:

  1. Wywoła blok customClickHandler w Objective-C lub domknięcie w Swift, jeśli zostały ustawione.
  2. Przejdzie przez adresy URL linków bezpośrednich reklamy i otworzy pierwszy, dla którego można znaleźć pasującą aplikację.
  3. Otworzy przeglądarkę i przejdzie do tradycyjnego docelowego adresu URL reklamy.

Właściwość customClickHandler przyjmuje blok w Objective-C i domknięcie w Swift. Jeśli ustawisz blok lub domknięcie, pakiet SDK zastosuje je i nie podejmie żadnych dalszych działań. Jeśli jednak ustawisz wartość nil, pakiet SDK powróci do linków bezpośrednich lub docelowych adresów URL zarejestrowanych w reklamie.

Niestandardowe procedury obsługi kliknięć umożliwiają aplikacji samodzielne określenie najlepszego działania w odpowiedzi na kliknięcie, niezależnie od tego, czy jest to aktualizacja interfejsu, wyświetlenie innego kontrolera widoku czy tylko zarejestrowanie kliknięcia. Oto przykład, który wyświetla alert:

Swift

myCustomNativeAd.customClickHandler = { assetID in
  if assetID == "MainImage" {
    let alertView = UIAlertView(title: "Custom Click",
        message: "You just clicked on the image!",
        delegate: self,
        cancelButtonTitle: "OK")
    alertView.alertViewStyle = .default
    alertView.show()
  }
}
myCustomNativeAd.performClickOnAsset(withKey: "MainImage")

Objective-C

[self.customNativeAd setCustomClickHandler:^(NSString *assetID){
  if ([assetID isEqualToString:@"MainImage"]) {
    [[[UIAlertView alloc] initWithTitle:@"Custom Click"
                                message:@"You just clicked on the image!"
                               delegate:self
                      cancelButtonTitle:@"OK"
                      otherButtonTitles:nil] show];
  }
}];
[self.customNativeAd performClickOnAssetWithKey:@"MainImage"];

Testowanie kodu reklamy natywnej

Reklamy sprzedawane bezpośrednio

Jeśli chcesz sprawdzić, jak działają reklamy natywne sprzedawane bezpośrednio, możesz użyć tego identyfikatora jednostki reklamowej Ad Managera:

/21775744923/example/native

Jest ona skonfigurowana do wyświetlania przykładowych reklam instalacji aplikacji i reklam z treścią, a także niestandardowego formatu reklamy natywnej z tymi komponentami:

  • Nagłówek (tekst)
  • Główny obraz (obraz)
  • Podpis (tekst)

Reklamy natywne z wypełnienia

Aby przetestować działanie reklam natywnych z wypełnienia, użyj tej jednostki reklamowej Ad Managera:

/21775744923/example/native-backfill

Będzie ona wyświetlać przykładowe reklamy instalacji aplikacji i reklamy z treścią, które zawierają nakładkę Informacja.

Zanim opublikujesz aplikację, pamiętaj, aby zaktualizować kod i podać w nim rzeczywiste identyfikatory jednostek reklamowych i formatów.