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:
Utwórz element zamówienia w interfejsie Ad Managera i wybierz jeden ze wstępnie zdefiniowanych rozmiarów w menu pola
Size
.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łychGADAdSize
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:
Swift
bannerView.validAdSizes = [NSValueFromGADAdSize(kGADAdSizeFluid),
NSValueFromGADAdSize(kGADAdSizeBanner)]
Objective-C
_bannerView.validAdSizes = @[ NSValueFromGADAdSize(kGADAdSizeFluid),
NSValueFromGADAdSize(kGADAdSizeBanner) ];
Pełna implementacja kodu wygląda tak:
Swift
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())
}
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ę 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:
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: GADBannerView, willChangeAdSizeTo adSize: GADAdSize) {
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;
}