Style natywne

Ustawienia stylu natywnego pozwalają Google Ad Managerowi renderować reklamy natywne na podstawie stylów określonych w danej usłudze. Najpierw określ rozmiar i kierowanie. Następnie dodaj kod HTML, CSS i JavaScript, aby zdefiniować reklamy, które są elastyczne i zapewniają wysoką jakość wyświetlania na wszystkich urządzeniach. Nie musisz nic robić – Ad Manager automatycznie stosuje styl natywny odpowiedni dla miejsca docelowego. Style natywne są implementowane tak samo jak banery reklamowe za pomocą elementu AdManagerAdView. Można ich używać ze stałym rozmiarem reklamy określonym z wyprzedzeniem lub elastycznym rozmiarem reklamy określanym w czasie działania.

Wymagania wstępne

• Wtyczka Flutter do reklam mobilnych Google w wersji 0.13.6 lub nowszej

W tym przewodniku zakładamy, że masz praktyczną wiedzę na temat pakietu SDK do reklam mobilnych Google. Zapoznaj się z przewodnikiem dla początkujących,

Stały rozmiar

Style natywne o stałym rozmiarze pozwalają kontrolować szerokość i wysokość 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 w menu pola Size.

2. Wczytaj plik AdManagerBannerAd o rozmiarze skonfigurowanym w kroku 1. Informacje o tworzeniu instancji i wczytywaniu reklamy znajdziesz w dokumentacji banerów reklamowych. Listę rozmiarów i odpowiadających im stałych AdSize znajdziesz w sekcji Rozmiar banera.

Ten przykład pokazuje, jak określić stały rozmiar, np. rozmiar reklamy MEDIUM_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. Na przykład szerokość reklamy może być dopasowana do treści aplikacji, ale jej wysokość będzie dynamicznie dopasowywana do treści reklamy. W takim przypadku możesz w interfejsie Ad Managera podać Fluid jako rozmiar reklamy. Oznacza to, że rozmiar reklamy jest określany w czasie działania aplikacji. Pakiet SDK udostępnia specjalną stałą AdSize o nazwie FLUID. Wysokość reklamy elastycznej jest określana dynamicznie na podstawie szerokości zdefiniowanej przez wydawcę. Dzięki temu widok reklamy na platformie może dostosowywać wysokość, aby pasowała do kreacji.

Żądanie elastyczne

Aby wysłać żądanie reklamy elastycznej, użyj polecenia FluidAdManagerBannerAd:

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 komponentu FluidAdWidget, by wyświetlać reklamy elastyczne. Jej wysokość dostosuje się do bazowego widoku reklamy na platformie:

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

Przykład implementacji rozmiaru reklamy Ad Managera Fluid znajdziesz w przykładowej aplikacji na GitHubie.