Style natywne

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 stosuje odpowiedni styl natywny w miejscu docelowym. Style natywne są implementowane tak samo jak banery reklamowe, za pomocą tagu 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 programu.

Wymagania wstępne

• SDK do reklam mobilnych Google w wersji 7.14.0 lub nowszej

W tym przewodniku zakładamy, że masz praktyczną znajomość pakietu SDK do reklam mobilnych Google. Jeśli jeszcze tego nie zrobiono, zapoznaj się z naszym przewodnikiem Wprowadzenie.

Stały rozmiar

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

1. Utwórz element zamówienia w interfejsie Ad Managera i wybierz jeden ze wstępnie zdefiniowanych rozmiarów z menu w polu Size.

2. W Interface Builder ustaw szerokość i wysokość elementu GAMBannerView, aby pasowały do wstępnie zdefiniowanego rozmiaru wybranego w kroku 1. Listę rozmiarów i odpowiadających im stałych GADAdSize znajdziesz w sekcji Rozmiar banera.

Wdrażanie stylów natywnych o stałym rozmiarze jest tak proste, jak postępowanie zgodnie z instrukcjami w artykule Pierwsze żądanie banera. Zyskujesz jednak elastyczność i kontrolę nad kodem HTML, CSS i JavaScript, dzięki czemu możesz nadać reklamie banerowej natywny wygląd i sposób działania, które będą naturalne w Twojej aplikacji.

Rozmiar elastyczny

W niektórych przypadkach stały rozmiar może nie mieć sensu. Możesz na przykład chcieć, aby szerokość reklamy była dopasowana do treści aplikacji, ale jej wysokość musi być dynamicznie dostosowywana do treści reklamy. Aby sobie z tym poradzić, w interfejsie Ad Managera możesz określić rozmiar reklamy jako Fluid. Oznacza to, że rozmiar reklamy jest określany w czasie działania aplikacji. Pakiet SDK udostępnia specjalną stałą GADAdSize, kGADAdSizeFluid, która umożliwia obsługę tego przypadku. Wysokość reklamy elastycznej jest określana dynamicznie na podstawie szerokości zdefiniowanej przez wydawcę, co pozwala GAMBannerView dostosować wysokość do wysokości kreacji.

Żądanie elastyczne

W odróżnieniu od innych formatów reklam rozmiar reklamy kGADAdSizeFluid nie ma zdefiniowanej szerokości, więc pamiętaj, aby w kodzie lub w programie Interface Builder wyraźnie ustawić szerokość ramki banera. Jeśli szerokość nie jest określona, pakiet SDK domyślnie ustawia wysokość banera na podstawie pełnej szerokości urządzenia.

Jeśli wyślesz żądanie wielu rozmiarów, które zawiera kGADAdSizeFluid, zwrócona reklama będzie zawsze umieszczana w kontenerze elastycznym 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 zwracana jest nowa reklama.

Implementacja żądania elastycznego o jednym rozmiarze i o wielu rozmiarach jest bardzo podobna. Jedyna różnica polega na tym, że w przypadku żądania o wielu rozmiarach 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 jak wygląda 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 usłudze Ad Manager, pobierz aplikację demonstracyjną interfejsu API iOS w języku Swift lub Objective-C.

Pobierz wersję demonstracyjną interfejsu API

Protokół GADAdSizeDelegate

Przed zmianą rozmiaru reklamy możesz chcieć poznać wysokość banera. Wywołanie zwrotne adView:willChangeAdSizeTo: powiadamia delegata przed zmianą widoku banera na nowy GADAdSize. Aby otrzymywać powiadomienia przed zmianą widoku 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;
}