插全屏广告
插全屏广告
此章节将演示如何请求在React Native
环境下请求与展示插全屏广告
插屏广告是移动广告的一种常见形式,在应用开流程中弹出,当应用展示插页式广告时,用户可以选择点按广告,访问其目标网址,也可以将其关闭,返回应用。
提示
插屏半屏和插屏全屏通过广告位来区分样式
插全屏广告请求
调用ZJAndroid.loadInterstitialAd(posId: string, callback: AdCallback, isPreload: boolean = false, isVolumeOn: boolean = false)
方法请求插全屏广告。
请求参数说明
param | 类型 | 说明 |
---|---|---|
posId | string | 广告位ID |
callback | AdCallback | 广告回调 |
isPreload | boolean | 是否为预加载,默认false 预加载时需要主动展示,非预加载时会自动展示 |
isVolumeOn | boolean | 是否开启声音,默认true |
AdCallback 事件说明
Event | 参数 | 说明 |
---|---|---|
ZJEvent.LOAD_ERROR | errCode:number, errMsg:string | 广告加载失败 errCode:错误码,非错误事件为0 errMsg:错误信息,非错误事件为空字符串 |
ZJEvent.SHOW_ERROR | errCode:number, errMsg:string | 广告展示失败 errCode:错误码,非错误事件为0 errMsg:错误信息,非错误事件为空字符串 |
ZJEvent.SHOW | / | 广告展示成功 |
ZJEvent.CLICK | / | 广告点击 |
ZJEvent.CLOSE | / | 广告关闭 |
插全屏广告展示示例
提示
插全屏广告为耗时操作,建议在增加时增加一个加载提示对话框
MyApp/pages/Interstitial.tsx
/**
* 加载并展示插全屏广告
*/
function loadInterstitialAd() {
setIsLoading(true);
// 加载并展示时,不会回调加载成功
ZJAndroid.loadInterstitialAd(getPosId(), (event, errCode, errMsg) => {
let log = '';
switch (event) {
case ZJEvent.LOAD_ERROR:
setIsLoading(false);
log = `插全屏广告加载失败 [${errCode}|${errMsg}]`;
break;
case ZJEvent.SHOW_ERROR:
log = `插全屏广告展示失败 [${errCode}|${errMsg}]`;
break;
case ZJEvent.SHOW:
setIsLoading(false);
log = '插全屏广告展示成功';
break;
case ZJEvent.CLICK:
log = '插全屏广告点击';
break;
case ZJEvent.CLOSE:
log = '插全屏广告关闭';
break;
default:
log = `未知事件:${event}`;
break;
}
console.log(log);
ToastAndroid.show(log, ToastAndroid.SHORT);
})
}
插全屏广告预加载
插全屏广告支持预加载,开发者可以先请求广告,再在合适的时机调用展示方法,请求时需要配置isPreload
为true
,并在准备展示前调用ZJAndroid.isInterstitialAdValid()
方法判断广告是否有效。 若缓存的广告已失效,需要重新请求广告。
激励广告预加载示例
MyApp/pages/Interstitial.tsx
/**
* 预加载插全屏广告
*/
function preloadInterstitialAd() {
ZJAndroid.loadInterstitialAd(getPosId(), (event, errCode, errMsg) => {
let log = '';
switch (event) {
case ZJEvent.LOAD_ERROR:
log = `插全屏广告加载失败 [${errCode}|${errMsg}]`;
isInterstitialAdValid(false);
break;
case ZJEvent.LOAD:
log = `插全屏广告加载成功`;
// 加载成功后,可以在合适的时机主动展示
isInterstitialAdValid(true);
break;
}
console.log(log);
ToastAndroid.show(log, ToastAndroid.SHORT);
}, true)
}
/**
* 展示预加载的插全屏广告
*/
function showInterstitialAd() {
if (ZJAndroid.isInterstitialAdValid()) {
let log = '';
ZJAndroid.showInterstitialAd((event, errCode, errMsg) => {
switch (event) {
case ZJEvent.SHOW_ERROR:
log = `插全屏广告展示失败 [${errCode}|${errMsg}]`;
break;
case ZJEvent.SHOW:
log = '插全屏广告展示成功';
break;
case ZJEvent.CLICK:
log = '插全屏广告点击';
break;
case ZJEvent.CLOSE:
log = '插全屏广告关闭';
isInterstitialAdValid(false);
break;
default:
log = `未知事件:${event}`;
break;
}
console.log(log);
ToastAndroid.show(log, ToastAndroid.SHORT);
});
} else {
console.log('预加载的插全屏广告已失效,需要重新请求');
}
}