Określanie stylów natywnych

Wybierz platformę: Android iOS Flutter Android (starsza wersja)

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, przy użyciu GAMBannerView. Można ich używać ze stałym rozmiarem reklamy określonym z wyprzedzeniem lub z elastycznym rozmiarem reklamy określanym w czasie działania.

Wymagania wstępne

  • Google Mobile Ads SDK w wersji 7.14.0 lub nowszej,

W tym przewodniku zakładamy, że masz już pewną wiedzę na temat Google Mobile Ads SDK. Jeśli jeszcze nie masz za sobą tego kroku, zapoznaj się z przewodnikiem Pierwsze kroki.

Stały rozmiar

Style natywne o stałym rozmiarze umożliwiają kontrolowanie szerokości i wysokości reklamy natywnej.

Aby ustawić stały rozmiar:

Ustaw rozmiar reklamy mniejszy niż rozmiar ekranu urządzenia lub mu równy. Aby określić maksymalny rozmiar ekranu w systemie iOS 26 lub nowszym, użyj właściwości UIWindowScene.effectiveGeometry.coordinateSpace. W systemie iOS 18 i starszych użyj właściwości UIWindowScene.coordinateSpace. Szczegółowe informacje o ograniczeniach rozmiaru znajdziesz w artykule Rozwiązywanie problemów z niewypełnionymi wyświetleniami w usłudze Ad Manager.

  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 narzędziu Interface Builder ustaw szerokość i wysokość elementu GAMBannerView, aby odpowiadały wstępnie zdefiniowanemu rozmiarowi wybranemu w kroku 1. Listę rozmiarów i odpowiadających im stałych GADAdSize znajdziesz w sekcji Rozmiar banera.

Implementacja stylów natywnych o stałym rozmiarze jest tak prosta jak wykonanie instrukcji podanych w artykule Pierwsze żądanie banera, ale zyskujesz elastyczność i kontrolę nad kodem HTML, CSS i JavaScript, dzięki czemu możesz nadać banerowi reklamowemu natywny wygląd i charakter, który będzie naturalny 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 zawartości aplikacji, ale jej wysokość była dynamicznie dostosowywana do zawartości reklamy. Aby obsłużyć takie zastosowania, w interfejsie Ad Managera możesz określić rozmiar reklamy jako Fluid, co oznacza, że rozmiar reklamy jest określany w czasie działania 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ść GAMBannerView do wysokości kreacji.

Prośba o płynny

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

Jeśli wyślesz żądanie dotyczące wielu rozmiarów, które zawiera kGADAdSizeFluid, zwrócona reklama zawsze będzie umieszczana w kontenerze elastycznym i będzie się zachowywać jak reklama elastyczna. Jeśli w tym elastycznym kontenerze zostanie zwrócona kreacja o stałym rozmiarze, pakiet SDK wyśrodkuje reklamę w kontenerze, dzięki czemu nie trzeba będzie zmieniać ograniczenia szerokości za każdym razem, gdy zostanie zwrócona nowa reklama.

Implementacja żądania elastycznego o jednym rozmiarze i żądania elastycznego 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 dla żądania reklamy:

Swift

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

Objective-C

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

Oto jak wygląda pełna implementacja w kodzie:

Swift

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())
}

Objective-C

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 na iOS w języku Swift lub Objective-C.

Pobierz wersję demonstracyjną interfejsu API

Protokół GADAdSizeDelegate

Możesz chcieć poznać wysokość banera, zanim zmieni się jego rozmiar. Wywołanie zwrotne adView:willChangeAdSizeTo: powiadamia swojego przedstawiciela, zanim widok banera zmieni się na nowy GADAdSize. Aby otrzymywać powiadomienia, zanim widok banera zmieni się 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:

Swift

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

Objective-C

// 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;
}