Określanie stylów natywnych

Ustawienia stylu natywnego umożliwiają usłudze Google Ad Manager renderowanie reklam natywnych na podstawie stylów natywnych określonych w danej usłudze. Najpierw określ rozmiar i kierowanie. Następnie dodaj kod HTML, CSS i JavaScript, aby zdefiniować reklamy elastyczne, które będą się wyświetlać w wysokiej jakości na wszystkich ekranach. Nie musisz niczego renderować. Ad Manager automatycznie zastosuje odpowiedni styl natywny w miejscu docelowym. Style natywne są implementowane tak samo jak banery reklamowe, za pomocą elementu GAMBannerView. Można ich używać ze stałym rozmiarem reklamy określonym z wyprzedzeniem lub z elastycznym rozmiarem reklamy określonym w czasie działania.

Wymagania wstępne

• Google Mobile Ads SDK w wersji 7.14.0 lub nowszej

W tym przewodniku przyjęto założenie, że masz podstawową wiedzę na temat Google Mobile Ads SDK. Jeśli jeszcze tego nie zrobisz, zapoznaj się z naszym przewodnikiem dla początkujących.

Stały rozmiar

Style natywne o stałym rozmiarze umożliwiają kontrolowanie szerokości i wysokości reklamy natywnej. Aby ustawić stały rozmiar:

1. Utwórz element zamówienia w interfejsie Ad Managera i wybierz jeden z predefiniowanych rozmiarów w menu pola Size.

2. W Interface Builder ustaw szerokość i wysokość elementu GAMBannerView tak, aby odpowiadały predefiniowanemu rozmiarowi wybranemu w kroku 1. Listę rozmiarów i odpowiadających im GADAdSize stałych znajdziesz w sekcji Rozmiar banera.

Implementowanie stylów natywnych o stałym rozmiarze jest tak proste jak wykonanie instrukcji z artykułu Pierwsze żądanie banera reklamy, ale zyskujesz elastyczność i kontrolę nad kodem HTML, CSS i JavaScript, dzięki czemu baner reklamowy będzie wyglądał i działał jak reklama natywna, która naturalnie pasuje do Twojej aplikacji.

Rozmiar elastyczny

W niektórych przypadkach stały rozmiar może nie być odpowiedni. Możesz na przykład chcieć, aby szerokość reklamy była dopasowana do treści aplikacji, ale jej wysokość powinna być dynamicznie dostosowywana do treści reklamy. Aby to zrobić, możesz określić Fluid jako rozmiar reklamy w interfejsie Ad Managera. Oznacza to, że rozmiar reklamy jest określany w czasie działania w aplikacji. Pakiet SDK udostępnia specjalną stałą GADAdSize – kGADAdSizeFluid – która obsługuje takie zastosowania. Wysokość reklamy o rozmiarze elastycznym jest określana dynamicznie na podstawie szerokości zdefiniowanej przez wydawcę, co pozwala dostosować wysokość elementu GAMBannerView, do wysokości kreacji.

Żądanie elastyczne

W przeciwieństwie do innych formatów reklam rozmiar reklamy kGADAdSizeFluid nie ma predefiniowanej szerokości, dlatego pamiętaj, aby wyraźnie ustawić szerokość ramki banera w kodzie lub w Interface Builder. Jeśli szerokość nie zostanie określona, pakiet SDK domyślnie ustawi wysokość banera na podstawie pełnej szerokości urządzenia.

Jeśli wyślesz żądanie z wieloma rozmiarami, które zawiera kGADAdSizeFluid, zwrócona reklama zawsze będzie umieszczana w elastycznym kontenerze i będzie się zachowywać jak reklama elastyczna. Jeśli w tym elastycznym kontenerze zostanie zwrócona kreacja nieelastyczna, pakiet SDK wyśrodkuje reklamę w kontenerze, dzięki czemu nie musisz modyfikować ograniczenia szerokości za każdym razem, gdy zostanie zwrócona nowa reklama.

Implementacja żądania elastycznego z jednym rozmiarem i z wieloma rozmiarami jest bardzo podobna. Jedyna różnica polega na tym, że w przypadku żądania z wieloma rozmiarami ustawiasz właściwość validAdSizes, aby określić rozmiary reklam, które są prawidłowe w przypadku żądania reklamy:

bannerView.validAdSizes = [nsValue(for: AdSizeFluid), nsValue(for: AdSizeBanner)]

_bannerView.validAdSizes = @[ NSValueFromGADAdSize(kGADAdSizeFluid),
                              NSValueFromGADAdSize(kGADAdSizeBanner) ];

Oto pełna implementacja w kodzie:

var bannerView: AdManagerBannerView!

override func viewDidLoad() {
super.viewDidLoad()
  // Create the GAMBannerView and set its width to a width that makes sense for your
  // app. In this example, the width is set to the width of the UIViewController's
  // root view.
  bannerView = AdManagerBannerView(adSize: AdSizeFluid)
  var frameRect = bannerView.frame
  frameRect.size.width = view.bounds.width
  bannerView.frame = frameRect

  // Uncomment this code for a multisize fluid request.
  // bannerView.validAdSizes = [nsValue(for: AdSizeFluid), nsValue(for: AdSizeBanner)]

  bannerView.adUnitID = "YOUR_AD_UNIT_ID"
  bannerView.rootViewController = self

  // Make the ad request.
  bannerView.load(AdManagerRequest())
}

GAMBannerView *_bannerView;

- (void)viewDidLoad {
  [super viewDidLoad];
  // Create the GAMBannerView and set its width to a width that makes sense for your
  // app. In this example, the width is set to the width of the UIViewController's
  // root view.
  _bannerView = [[GAMBannerView alloc] initWithAdSize:kGADAdSizeFluid];
  CGRect frameRect = _bannerView.frame;
  frameRect.size.width = CGRectGetWidth(self.view.bounds);
  _bannerView.frame = frameRect;

  // Uncomment this code for a multisize fluid request.
  // _bannerView.validAdSizes = @[ NSValueFromGADAdSize(kGADAdSizeFluid),
  //                               NSValueFromGADAdSize(kGADAdSizeBanner) ];

  _bannerView.adUnitID = @"YOUR_AD_UNIT_ID";
  _bannerView.rootViewController = self;

  // Make the ad request.
  [_bannerView loadRequest:[GAMRequest request]];
}

Aby zobaczyć przykładową implementację elastycznego rozmiaru reklamy w Ad Managerze, pobierz aplikację demonstracyjną iOS API w języku Swift lub Objective-C.

Pobierz aplikację demonstracyjną API

Protokół GADAdSizeDelegate

Możesz chcieć poznać wysokość banera przed zmianą jego rozmiaru. Wywołanie zwrotne adView:willChangeAdSizeTo: powiadamia delegata przed zmianą widoku banera na nowy GADAdSize. Aby otrzymywać powiadomienia przed zmianą rozmiaru banera na nowy rozmiar reklamy, Twoja klasa musi być zgodna z protokołem GADAdSizeDelegate.

Oto przykładowa implementacja wywołania zwrotnego adView:willChangeAdSizeTo:, która pokazuje, jak uzyskać nową szerokość i wysokość banera:

// To be notified before the banner's ad size changes, your view controller class must
// conform to the GADAdSizeDelegate protocol.
bannerView.adSizeDelegate = self

// MARK: - GADAdSizeDelegate

func adView(_ bannerView: BannerView, willChangeAdSizeTo adSize: AdSize) {
  let height = adSize.size.height
  let width = adSize.size.width
}

// To be notified before the banner's ad size changes, your view controller class must
// conform to the GADAdSizeDelegate protocol.
_bannerView.adSizeDelegate = self;

#pragma mark - GADAdSizeDelegate

- (void)adView:(GADBannerView *)bannerView willChangeAdSizeTo:(GADAdSize)adSize {
  CGFloat height = adSize.size.height;
  CGFloat width = adSize.size.width;
}