WebApp快捷打包
灰鲸广告联盟
转到模块插件

敬告:此 DEMO 演示为开放测试页面,仅用于开发者快速测试体验应用功能,请严格遵守开发者协议,了解更多

JS-SDK 引用方式:

♦ 普通网页 script 方式加载:下载最新版 jsBridge-v20241115.zip,请在页面上调用 jsBridge 接口之前引用 jsbridge-mini.js 库;

♦ js module 方式引用:npm install ym-jsbridge 具体请参考 npm package

事件监听

setListener 设置监听器

• 如需处理接口调用事件,请设置此监听器;

jsBridge.hj.setListener(function(event, data) {
    switch (event) {
        //激励视频 jsBridge.hj.reward(...)
        case "reward": {
            switch (data.action) {
                //加载成功
                case "onVideoAdLoadSuccess": {
                    break;
                }
                //播放开始
                case "onVideoAdPlayStart": {
                    break;
                }
                //播放结束
                case "onVideoAdPlayEnd": {
                    break;
                }
                //激励达成
                case "onVideoRewarded": {
                    jsBridge.toast("奖励已达成!");
                    break;
                }
                //点击
                case "onVideoAdClicked": {
                    break;
                }
                //关闭
                case "onVideoAdClosed": {
                    break;
                }
                //加载失败,data.message 为失败说明
                case "onVideoAdLoadError": {
                    break;
                }
                //播放失败,data.message 为失败说明
                case "onVideoAdPlayError": {
                    break;
                }
            }
            break;
        }
        //插屏广告 jsBridge.hj.interstitial(...)
        case "interstitial": {
            switch (data.action) {
                //加载成功
                case "onInterstitialAdLoadSuccess": {
                    break;
                }
                //播放开始
                case "onInterstitialAdPlayStart": {
                    break;
                }
                //播放结束
                case "onInterstitialAdPlayEnd": {
                    break;
                }
                //点击
                case "onInterstitialAdClicked": {
                    break;
                }
                //关闭
                case "onInterstitialAdClosed": {
                    break;
                }
                //加载失败,data.message 为失败说明
                case "onInterstitialAdLoadError": {
                    break;
                }
                //播放失败,data.message 为失败说明
                case "onInterstitialAdPlayError": {
                    break;
                }
            }
            break;
        }
        //横幅广告 jsBridge.hj.banner(...)
        case "banner": {
            switch (data.action) {
                //加载成功
                case "onAdLoadSuccess": {
                    break;
                }
                //展示
                case "onAdShown": {
                    break;
                }
                //点击
                case "onAdClicked": {
                    break;
                }
                //关闭
                case "onAdClosed": {
                    break;
                }
                //自动刷新
                case "onAdAutoRefreshed": {
                    break;
                }
                //自动刷新失败
                case "onAdAutoRefreshFail": {
                    break;
                }
                //加载失败,data.message 为失败说明
                case "onAdLoadError": {
                    break;
                }
            }
            break;
        }
    }
    //此函数仅用于显示回调参数在本 DEMO 页面上
    showResult({
        event: event,
        data : data
    });
});

//请拉到页面底部查看回调数据信息
$('html,body').animate({ scrollTop: $('#view').offset().top }, 500);

/**
回调参数说明:
event  //事件代码,字符串类型
data:  //事件数据,JSON 对象
{
  action : "onClick", //事件名称,字符串类型
  message: ""         //事件参数,字符串类型
}
**/

removeListener 移除监听器

//移除监听器,不会再收到回调通知
//在需要时可重新调用 setListener
jsBridge.hj.removeListener();

权限

requestPermissionIfNecessary 申请隐私权限

//不强制要求权限,但建议您申请,获得权限后能提升广告效果
jsBridge.hj.requestPermissionIfNecessary();

展示广告

reward 激励视频

adId:

userId:

//激励视频,setListener 的监听回调 event 为 reward
jsBridge.hj.reward({
  //必须,广告平台上申请的代码位id
  adId: "{{reward.adId}}",
  //可选,用户标识,用于服务器端通知
  userId: "{{reward.userId}}",
  //可选,广告加载扩展参数,任意键值对
  extra: {
    key1: "hello",
    key2: "world"
  },
  //可选,广告展示扩展参数,任意键值对
  showOptions: {
    key1: "123456"
  }
}, function(succ, data) {
  if (!succ) {
    alert(JSON.stringify(data));
  }
});

interstitial 插屏广告

adId:

userId:

//插屏广告,setListener 的监听回调 event 为 interstitial
jsBridge.hj.interstitial({
  //必须,广告平台上申请的代码位id
  adId: "{{interstitial.adId}}",
  //可选,用户标识
  userId: "{{interstitial.userId}}",
  //可选,广告加载扩展参数,任意键值对
  extra: {
    key1: "hello",
    key2: "world"
  },
  //可选,广告展示扩展参数,任意键值对
  showOptions: {
    key1: "123456"
  }
}, function(succ, data) {
  if (!succ) {
    alert(JSON.stringify(data));
  }
});

banner 横幅广告 - 展示广告 顶边距

adId:

top:

//横幅广告,setListener 的监听回调 event 为 banner
jsBridge.hj.banner({
  //字符串类型,广告平台上申请的代码位id
  adId: "{{banner.adId}}",
  //数字类型,到顶部的距离
  top   : {{banner.top}}
}, function(succ, data) {
  if (!succ) {
    alert(JSON.stringify(data));
  }
});

banner 横幅广告 - 展示广告 底边距

adId:

bottom:

//横幅广告,setListener 的监听回调 event 为 Banner
jsBridge.hj.banner({
  adId: "{{banner.adId}}",
  //数字类型,到底部的距离
  bottom: {{banner.bottom}}
}, function(succ, data) {
  if (!succ) {
    alert(JSON.stringify(data));
  }
});

banner 横幅广告 - 移除广告

//横幅广告
jsBridge.hj.banner({
  remove: true
}, function(succ, data) {
  if (!succ) {
    alert(JSON.stringify(data));
  }
});

最佳实践

激励视频 adId:

//引用 js 库
//import jsBridge from 'ym-jsbridge'

const showReward = function (jsBridge) {
    //设置监听器
    jsBridge.hj.setListener(function (event, data) {
        switch (event) {
            //激励视频
            case "reward": {
                switch (data.action) {
                    //加载成功
                    case "onVideoAdLoadSuccess": {
                        //关闭加载动画
                        layer.closeAll();
                        break;
                    }
                    //失败,data.message 为失败说明
                    case "onVideoAdLoadError":
                    case "onVideoAdPlayError": {
                        //关闭加载动画
                        layer.closeAll();
                        //提示失败
                        layer.msg("广告加载失败:" + data.message);
                        break;
                    }
                    //激励达成
                    case "onVideoRewarded": {
                        //奖励达成,客户端仅做简单提示;
                        //为避免刷单,强烈建议在处理服务器端通知时发放奖励;
                        jsBridge.toast("奖励已达成!");
                        break;
                    }
                }
                break;
            }
        }
    });
    //展示广告
    jsBridge.hj.reward({
        //字符串类型,广告平台上申请的代码位id
        adId: "{{practiceReward.adId}}",
        //可选,用户标识,一般为用户ID,以便在处理服务器通知时给此用户发放奖励
        userId: "user123",
    }, function (success, res) {
        if (success) {
            //执行成功,显示加载动画(拉取广告需要一点时间)
            layer.load(0, { shade: 0.2 });
        } else {
            //执行失败
            layer.alert(JSON.stringify(res));
        }
    });
};
showReward(jsBridge);

监听回调数据: