开屏广告

开屏广告接入方式参考下方内容。

开屏广告

开屏广告简介

开屏广告以快应用启动作为曝光时机，提供5s的可感知广告展示。用户可以点击广告跳转到目标页面；或者点击右上角的“跳过”按钮，跳转到指定页面。

权限等级：开放

适用场景：开屏广告会在您的应用开启时加载，拥有固定展示时间（一般为5秒），展示完毕后自动关闭并进入您的指定的页面。

分类：开屏只有全屏样式，为你带来更加沉浸的广告播放体验和更佳的变现效果。

全屏

主要API

广告构造方法

createSplashAd params参数如下表所示：

广告实例方法

广告回调方法

注意事项

• 开屏广告位单例，无法创建多个广告实例；
• 在广告数据加载成功后，如果没有立即调用show方法，则请在调用show方法之前先调用isValid方法判断广告是否过期；

接入代码示例

1.拷贝SDKDemo中的开屏广告页面至项目中

打开 SDKDemo，将 src/YlhAds/SplashAd 文件夹拷贝至你的快应用项目中 src/YlhAds/SplashAd 位置；

2.配置 manifest.json 中页面的 router 和 display 信息

"router": {
    "pages": {
      "YlhAds/SplashAd": { // 开屏广告路由
        "component": "index"
      }
    }
  },
  "display": {
    "pages": {
      "YlhAds/SplashAd": {// 开屏广告页面配置
        "fullScreen": true,
        "titleBar": false,
        "statusBarImmersive": true,
        "menu": false,
        "menuBarData": {
          "menuBar": false
        }
      }
    }
  }

3.实例化广告

export default {
  onLoadSplashAd() {
    this.$app.$def.ylh_sdk.onYlhReady(() => {
      try {
        // 第一步：创建开屏广告实例
        this.splashAd = this.$app.$def.ylh_sdk.createSplashAd({
          placementId: this.placementId, // 广告位ID
          // 1、若设置了该参数，则在开屏广告结束后跳转则跳转至该地址页面；
          // 2、如果未设置该参数，则开屏广告结束后，从广告播放页返回到当前页；开发者可在onClose中自行处理跳转逻辑
          entry: '/pages/Home'
        });
        // 第二步：设置广告实例相应的回调
        this.splashAd.onLoad(() => {
           // 广告数据加载成功回调
           // 第四步：自动展示广告
           // 注意：如果加载广告成功后，没有立即展示广告，请在调用 show 之前方法先调用 isValid 方法判断广告是否过期
           this.splashAd.show()
        });
        this.splashAd.onError((err = {}) => {
          // 广告异常回调
        });
        this.splashAd.onExpose((id) => {
          // 广告曝光回调
        });
        this.splashAd.onClick(() => {
          // 广告点击回调
        });
        this.splashAd.onClose(() => {
          // 广告关闭回调
        });
        // 第三步：load 广告数据
        this.splashAd.load();
      } catch (error) {
        console.warn('创建开屏异常:', error);
      }
    })
  },
  onShowSplashAd() {
    if(this.splashAd) {
      this.splashAd.show();
    }
  },
  onDestroySplashAd() {
    if(this.splashAd) {
      this.splashAd.destroy();
      this.splashAd = null;
    }
  }
}