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

• Pakiet SDK do reklam mobilnych Google w wersji 7.14.0 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. W kreatorze interfejsów ustaw szerokość i wysokość elementu GAMBannerView zgodnie ze wstępnie zdefiniowanym rozmiarem wybranym w kroku 1. Listę rozmiarów i odpowiadających im stałych GADAdSize znajdziesz w sekcji Rozmiar banera.

Aby wdrożyć style natywne o stałym rozmiarze, wystarczy wykonać instrukcje podane w pierwszym żądaniu banera. Zyskujesz jednak elastyczność i kontrolę nad kodem HTML, CSS i JavaScript, dzięki czemu baner reklamowy może mieć naturalny wygląd i styl w Twojej aplikacji.

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. Będzie to wskazywać, że rozmiar reklamy jest określany w czasie działania aplikacji w aplikacji. Na potrzeby obsługi tego przypadku pakiet SDK udostępnia specjalną stałą GADAdSize o nazwie kGADAdSizeFluid. Wysokość rozmiaru reklamy elastycznej jest określana dynamicznie na podstawie szerokości zdefiniowanej przez wydawcę. Dzięki temu GAMBannerView może dostosowywać wysokość, tak aby pasowała do kreacji.

Żądanie elastyczne

W przeciwieństwie do innych formatów reklam rozmiar reklamy kGADAdSizeFluid nie ma wstępnie zdefiniowanej szerokości. Pamiętaj więc, by ustawić ją w kodzie lub w Narzędziu do tworzenia interfejsów wyraźnie. Jeśli szerokość nie zostanie określona, SDK domyślnie ustawi wysokość banera na podstawie pełnej szerokości urządzenia.

Jeśli wyślesz żądanie z wieloma rozmiarami, które zawiera element kGADAdSizeFluid, zwrócona reklama zostanie zawsze umieszczona w kontenerze z płynnością i będzie wyglądać jak reklama płynna. Jeśli w tym kontenerze pojawi się kreacja nieelastyczna, pakiet SDK wyśrodkuje reklamę w kontenerze, dzięki czemu nie trzeba będzie zmieniać ograniczenia szerokości przy każdym zwróceniu nowej reklamy.

Implementacja tworzenia jednego rozmiaru i żądania elastycznego o wielu rozmiarach jest bardzo podobna. Jedyną różnicą jest to, że w przypadku żądania wielu rozmiarów ustawia się właściwość validAdSizes, by określić rozmiary reklam odpowiednie dla tego żądania:

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

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

Pełna implementacja kodu wygląda tak:

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ładową implementację rozmiaru reklamy w usłudze Ad Manager o elastycznym rozmiarze, pobierz aplikację demonstracyjną interfejsu API na iOS w języku Swift lub Objective-C.

Pobierz wersję demonstracyjną interfejsu API

Protokół GADAdSizeDemand

Warto poznać wysokość banera, zanim zmieni się jego rozmiar. Wywołanie zwrotne adView:willChangeAdSizeTo: powiadamia przedstawiciela, zanim widok banera zmieni się na nowy GADAdSize. Aby otrzymać powiadomienie, zanim widok banera zmieni się na nowy rozmiar reklamy, 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: 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;
}