插全屏广告

插全屏广告

此章节将演示如何请求在React Native环境下请求与展示插全屏广告

插屏广告是移动广告的一种常见形式,在应用开流程中弹出,当应用展示插页式广告时,用户可以选择点按广告,访问其目标网址,也可以将其关闭,返回应用。

提示

插屏半屏和插屏全屏通过广告位来区分样式

插全屏广告请求

调用ZJAndroid.loadInterstitialAd(posId: string, callback: AdCallback, isPreload: boolean = false, isVolumeOn: boolean = false)方法请求插全屏广告。

请求参数说明

param类型说明
posIdstring广告位ID
callbackAdCallback广告回调
isPreloadboolean是否为预加载,默认false
预加载时需要主动展示,非预加载时会自动展示
isVolumeOnboolean是否开启声音,默认true

AdCallback 事件说明

Event参数说明
ZJEvent.LOAD_ERRORerrCode:number, errMsg:string广告加载失败
errCode:错误码,非错误事件为0
errMsg:错误信息,非错误事件为空字符串
ZJEvent.SHOW_ERRORerrCode: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);
    })
}

插全屏广告预加载

插全屏广告支持预加载,开发者可以先请求广告,再在合适的时机调用展示方法,请求时需要配置isPreloadtrue,并在准备展示前调用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('预加载的插全屏广告已失效,需要重新请求');
    }
}