Style natywne

Wybierz platformę: Android iOS Flutter

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

  • Wtyczka Flutter do reklam mobilnych Google w wersji 0.13.6 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. Wczytaj AdManagerBannerAd o rozmiarze ustawionym w kroku 1. Informacje o tym, jak utworzyć instancję reklamy i ją wczytać, znajdziesz w dokumentacji banera reklamowego. Listę rozmiarów i odpowiadających im stałych AdSize znajdziesz w sekcji Rozmiar banera.

Oto przykład, który pokazuje, jak określić stały rozmiar, np. rozmiar reklamyMEDIUM_RECTANGLE (300 x 250):

AdManagerBannerAd ad = AdManagerBannerAd(
  adUnitId: '<your-ad-unit>',
  sizes: <AdSize>[AdSize.mediumRectangle],
  request: AdManagerAdRequest(),
);

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łą AdSize, FLUID, która umożliwia obsługę tego przypadku. Wysokość elastycznego rozmiaru reklamy jest określana dynamicznie na podstawie szerokości zdefiniowanej przez wydawcę, co pozwala widokowi reklamy na platformie dostosować wysokość do wysokości kreacji.

Żądanie elastyczne

Użyj FluidAdManagerBannerAd, aby wysłać żądanie reklamy elastycznej:

final fluidAd = FluidAdManagerBannerAd(
  adUnitId: '<your-ad-unit>',
  request: AdManagerAdRequest(),
  listener: AdManagerBannerAdListener(
    onAdLoaded: (Ad ad) {
      print('$_fluidAd loaded.');
    },
    onAdFailedToLoad: (Ad ad, LoadAdError error) {
      print('$_fluidAd failedToLoad: $error');
      ad.dispose();
    },
  ),

Wyświetlanie reklamy elastycznej

Po wczytaniu reklamy użyj funkcji FluidAdWidget, aby wyświetlić reklamy elastyczne. Dostosuje ona swoją wysokość do widoku reklamy na platformie bazowej:

FluidAdWidget(
  width: <your-width>,
  ad: fluidAd,
);

Przykład implementacji elastycznego rozmiaru reklamy w usłudze Ad Manager znajdziesz w aplikacji przykładowej w GitHubie.