Style natywne

Ustawienia stylu natywnego by umożliwić Google Ad Manager obsługę renderowania reklam natywnych na podstawie określonych w produkcie. Najpierw określ rozmiar i kierowanie. Następnie dodaj kod HTML, CSS i JavaScript, aby zdefiniować elastyczne reklamy i zapewniają wysoką jakość wyglądu na każdym ekranie. Nie musisz tego robić dowolnego renderowania, Ad Manager automatycznie stosuje odpowiedni styl natywny . Style natywne są implementowane tak samo jak banery reklamowe, za pomocą funkcji GAMBannerView. Można ich używać ze stałą reklamą ustalany z wyprzedzeniem albo elastyczny rozmiar reklamy określany w czasie działania.

Wymagania wstępne

• Pakiet SDK do reklam mobilnych Google w wersji 7.14.0 lub nowszej

W tym przewodniku zakładamy, że masz jakąś praktyczną wiedzę o pakiecie SDK do reklam mobilnych Google. Jeśli jeszcze nie masz tego za sobą, zapoznaj się z Przewodnik dla początkujących.

Stały rozmiar

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

1. W interfejsie Ad Managera utwórz element zamówienia i wybierz jedną z tych wstępnie zdefiniowane rozmiary z menu w polu Size.

2. W Kreatorze interfejsu ustaw szerokość i wysokość elementu GAMBannerView aby dopasować się do wstępnie zdefiniowanego rozmiaru wybranego w kroku 1. Możesz zobaczyć na przykład rozmiary i odpowiadające im stałe GADAdSize w banerze rozmiar .

Implementacja stylów natywnych o stałym rozmiarze przebiega w następujący sposób: instrukcje podane w sekcji Pierwszy baner , ale zyskuje się też elastyczność i kontrolę nad kodami HTML, CSS i JavaScript. aby nadać banerowi reklamowemu natywny wygląd, który pasuje do Twojej aplikacji.

Rozmiar elastyczny

W niektórych przypadkach stały rozmiar może nie mieć sensu. Możesz na przykład chcesz, by szerokość reklamy pasowała do treści aplikacji, ale jej wysokość dopasowują się dynamicznie do treści reklamy. Aby rozwiązać ten problem, Możesz określić Fluid jako rozmiar reklamy w interfejsie Ad Managera, oznacza, że rozmiar reklamy jest określany w czasie działania aplikacji. Pakiet SDK udostępnia specjalną stałą GADAdSize, kGADAdSizeFluid, zająć się tą sprawą. Wysokość rozmiaru reklamy elastycznej jest określana dynamicznie na podstawie szerokości zdefiniowanej przez wydawcę, GAMBannerView by dostosować jej wysokość do wysokości kreacji.

Żądanie płynu

W przeciwieństwie do innych formatów reklam rozmiar kGADAdSizeFluid nie zawiera ma wstępnie określoną szerokość, dlatego pamiętaj, by wyraźnie określić ramkę banera. w kodzie lub w Kreatorze interfejsu. Jeśli szerokość nie została określona, SDK domyślnie ustawia wysokość banera na podstawie na szerokość ekranu urządzenia.

Jeśli wyślesz żądanie z wieloma rozmiarami obejmujące kGADAdSizeFluid, zwracana reklama jest zawsze umieszczona w pojemniku na płyn, i zachowują się jak reklamy elastyczne. W przypadku, gdy kreacja nieelastyczna w tym kontenerze płynnym, pakiet SDK wyświetla reklamę na środku pola kontenera, dzięki czemu nie trzeba modyfikować ograniczenia szerokości po każdym zwróceniu nowej reklamy.

Implementacja tworzenia pojedynczego rozmiaru i płynu o wielu rozmiarach jest bardzo podobny; jedyną różnicą jest zastosowanie wielu rozmiarów, ustawiasz właściwość validAdSizes, by określić reklamę rozmiary, które są prawidłowe dla żądania reklamy:

bannerView.validAdSizes = [NSValueFromGADAdSize(kGADAdSizeFluid),
                           NSValueFromGADAdSize(kGADAdSizeBanner)]

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

Tak wygląda pełna implementacja w kodzie:

var bannerView: GAMBannerView!

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 = GAMBannerView(adSize: kGADAdSizeFluid)
  var frameRect = bannerView.frame
  frameRect.size.width = view.bounds.width
  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.load(GAMRequest())
}

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ład implementacji rozmiaru elastycznego Ad Managera: pobierz wersję demonstracyjną interfejsu API na iOS w języku Swift lub Objective-C.

Pobierz wersję demonstracyjną interfejsu API

Protokół GADAdSizeDelegate

Warto znać wysokość banera, zanim zmieni się rozmiar jego reklamy. Wywołanie zwrotne adView:willChangeAdSizeTo: powiadamia przedstawiciela przed widok banera zmieni się na nowy: GADAdSize. Do powiadomienia przed widok banera zmieni się na nowy rozmiar reklamy, klasa musi spełniać protokół GADAdSizeDelegate.

Oto przykładowa implementacja interfejsu adView:willChangeAdSizeTo: wywołanie zwrotne pokazujące, 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: GADBannerView, willChangeAdSizeTo adSize: GADAdSize) {
  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;
}