Używanie niestandardowych formatów reklam natywnych

Niestandardowe formaty reklam

Podobnie jak w przypadku formatów zdefiniowanych przez system niestandardowe formaty reklam natywnych są wczytywane za pomocą obiektów GADAdLoader. Uwzględnienie stałej GADAdLoaderAdTypeCustomNative w tablicy adTypes podczas inicjowania GADAdLoader spowoduje, że będzie on żądać niestandardowych formatów natywnych podczas wczytywania reklam.

GADCustomNativeAdLoaderDelegate

Protokół wczytywania formatów niestandardowych obejmuje 2 metody. Pierwszy z nich jest używany przez GADAdLoader do określenia, o jakie identyfikatory formatów ma prosić:

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

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

Każdy niestandardowy format reklamy natywnej ma odpowiadający mu identyfikator formatu, który go identyfikuje. Po wywołaniu tej metody 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:

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

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

Identyfikatory formatów

Identyfikatory formatów, które służą 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:

Identyfikator formatu każdej niestandardowej reklamy natywnej jest widoczny 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:

W tym miejscu możesz dodawać, edytować i usuwać poszczególne pola. Zwróć uwagę na nazwę każdego komponentu. Nazwa to klucz używany do pobierania danych dla 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 w systemie pod kilkoma względami:

1. Klasa GADCustomNativeAd jest przeznaczona do obsługi dowolnych utworzonych przez Ciebie niestandardowych formatów reklam natywnych, więc nie ma nazwanych akcesorów zasobó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, do użycia z GADCustomNativeAd. Możesz użyć dowolnego widoku, który będzie odpowiedni dla użytkowników.
3. Nie ma dedykowanej klasy widoku reklamy, więc nie musisz rejestrować żadnych widoków używanych do wyświetlania komponentów reklamy.

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

MySimpleNativeAdView.h

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) {
    ...
  }
}

@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)

...
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")
}
...

...
- (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 przestrzegania 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 zachowanie po kliknięciu.

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

@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);
  ...
}

Natywne reklamy wideo w niestandardowych formatach reklam natywnych

Podczas tworzenia formatu niestandardowego możesz wybrać, czy ma on być dostępny w przypadku wideo.

W implementacji aplikacji użyj właściwości GADCustomNativeAd.mediaContent, aby uzyskać instancję GADMediaContent reklamy. Aby sprawdzić, czy reklama zawiera treści wideo, sprawdź właściwość hasVideoContent. Jeśli reklama zawiera treści wideo, utwórz widok GADMediaView, przypisz właściwość mediaContent i dodaj widok multimediów do hierarchii widoków. Jeśli reklama nie zawiera treści wideo, wyrenderuj komponent alternatywny, np. obraz.

W tym przykładzie sprawdzamy, czy reklama zawiera treści wideo, i wyświetlamy obraz, jeśli film jest niedostępny:

func populate(withCustomNativeAd customNativeAd: CustomNativeAd) {
  // Remove all the media placeholder's subviews.
  for subview: UIView in mainPlaceholder.subviews {
    subview.removeFromSuperview()
  }

  // This custom native ad has both a video and image associated with it. Use the video
  // asset if available, or fall back to the image asset.
  let mainView: UIView
  if customNativeAd.mediaContent.hasVideoContent {
    let mediaView = MediaView()
    mediaView.mediaContent = customNativeAd.mediaContent
    mainView = mediaView
  } else {
    let image: UIImage? = customNativeAd.image(forKey: "MainImage")?.image
    mainView = UIImageView(image: image)
  }
  mainPlaceholder.addSubview(mainView)

  // Size the media view to fill the container size.
  mainView.translatesAutoresizingMaskIntoConstraints = false
  NSLayoutConstraint.activate([
    mainView.leadingAnchor.constraint(equalTo: mainPlaceholder.leadingAnchor),
    mainView.trailingAnchor.constraint(equalTo: mainPlaceholder.trailingAnchor),
    mainView.topAnchor.constraint(equalTo: mainPlaceholder.topAnchor),
    mainView.bottomAnchor.constraint(equalTo: mainPlaceholder.bottomAnchor),
  ])
}
NativeAdSnippets.swift

- (void)populateWithCustomNativeAd:(GADCustomNativeAd *)customNativeAd {
  // Remove all the media placeholder's subviews.
  for (UIView *subview in self.mainPlaceholder.subviews) {
    [subview removeFromSuperview];
  }

  // This custom native ad has both a video and image associated with it. Use the video
  // asset if available, or fall back to the image asset.
  UIView *mainView = nil;
  if (customNativeAd.mediaContent.hasVideoContent) {
    GADMediaView *mediaView = [[GADMediaView alloc] init];
    mediaView.mediaContent = customNativeAd.mediaContent;
    mainView = mediaView;
  } else {
    UIImage *image = [customNativeAd imageForKey:@"MainImage"].image;
    mainView = [[UIImageView alloc] initWithImage:image];
  }
  [self.mainPlaceholder addSubview:mainView];

  // Size the media view to fill the container size.
  mainView.translatesAutoresizingMaskIntoConstraints = NO;
  [NSLayoutConstraint activateConstraints:@[
    [mainView.leadingAnchor constraintEqualToAnchor:self.mainPlaceholder.leadingAnchor],
    [mainView.trailingAnchor constraintEqualToAnchor:self.mainPlaceholder.trailingAnchor],
    [mainView.topAnchor constraintEqualToAnchor:self.mainPlaceholder.topAnchor],
    [mainView.bottomAnchor constraintEqualToAnchor:self.mainPlaceholder.bottomAnchor],
  ]];
}
NativeAdSnippets.m

Szczegółowe informacje o dostosowywaniu niestandardowej reklamy natywnej wideo znajdziesz w opisie klasy GADVideoController.

Aby dowiedzieć się, jak wdrożyć niestandardowe natywne reklamy wideo, zapoznaj się z przykładem renderowania niestandardowego w Ad Managerze w języku Swift i Objective-C.

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

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

Rejestrowanie wyświetleń

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

myCustomNativeAd.recordImpression()

[myCustomNativeAd recordImpression];

Pakiet SDK zapobiega rejestrowaniu zduplikowanych wyświetleń w przypadku pojedynczego żądania, jeśli aplikacja przypadkowo wywoła metodę kilka razy w przypadku tej samej reklamy.

Zgłaszanie kliknięć

Aby poinformować pakiet SDK o kliknięciu widoku komponentu, wywołaj metodę performClickOnAssetWithKey: w odpowiednim obiekcie GADCustomNativeAd i podaj nazwę klikniętego komponentu. Jeśli na przykład masz w formacie niestandardowym komponent o nazwie „MainImage” i chcesz raportować kliknięcie widoku odpowiadającego temu komponentowi, kod będzie wyglądać tak:

myCustomNativeAd.performClickOnAsset(withKey: "MainImage")

[myCustomNativeAd performClickOnAssetWithKey:@"MainImage"];

Pamiętaj, że nie musisz wywoływać tej metody w przypadku każdego widoku komponentu powiązanego z reklamą. Jeśli masz inny komponent, np. „Podpis”, który ma być wyświetlany, ale nie ma być klikany przez użytkownika, aplikacja nie musi wywoływać metody performClickOnAssetWithKey: w przypadku tego widoku.

Odpowiadanie na niestandardowe działania związane z kliknięciem

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

typealias NativeAdCustomClickHandler = (assetID: String) -> Void

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

Jest to blok (Objective-C) lub zamknięcie (Swift), który akceptuje assetID jako parametr wejściowy identyfikujący kliknięty zasób.

Gdy użytkownik kliknie niestandardową reklamę natywną, pakiet SDK może zareagować na 3 sposoby (w podanej kolejności):

1. Wywołaj blok customClickHandler w Objective-C lub zamknięcie w Swift, jeśli został ustawiony.
2. Przejrzyj adresy URL precyzyjnych linków reklamy i otwórz pierwszy, dla którego można znaleźć pasującą aplikację.
3. Otwórz przeglądarkę i przejdź do tradycyjnego docelowego adresu URL reklamy.

Właściwość customClickHandler akceptuje blok w języku Objective-C i domknięcie w języku Swift. Jeśli ustawisz blok lub zamknięcie, pakiet SDK uruchomi go i nie podejmie żadnych dalszych działań. Jeśli jednak ustawisz wartość nil, pakiet SDK użyje precyzyjnego linku lub docelowych adresów URL zarejestrowanych w reklamie.

Niestandardowe moduły obsługi kliknięć pozwalają aplikacji samodzielnie decydować o najlepszym działaniu w odpowiedzi na kliknięcie, niezależnie od tego, czy chodzi o aktualizację interfejsu, wyświetlenie innego kontrolera widoku czy tylko zarejestrowanie kliknięcia. Oto przykład alertu:

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")

[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 wyglądają reklamy natywne sprzedawane bezpośrednio, możesz użyć tego identyfikatora jednostki reklamowej Ad Managera:

/21775744923/example/native

Jest on skonfigurowany do wyświetlania przykładowych reklam promujących instalacje aplikacji i reklam z treścią, a także niestandardowego formatu reklamy natywnej z tymi komponentami:

• Nagłówek (tekst)
• MainImage (obraz)
• Podpis (tekst)

Natywne reklamy zapasowe

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

/21775744923/example/native-backfill

Wyświetli przykładowe reklamy promujące instalacje aplikacji i reklamy z treścią, które zawierają nakładkę Informacja.

Pamiętaj, aby przed opublikowaniem zaktualizować kod, tak aby odwoływał się do rzeczywistych identyfikatorów jednostek reklamowych i formatów.