开发者自渲染

自渲染广告接入方式参考下方内容。

自渲染简介

开发者可以使用自渲染为应用打造自定义的广告布局样式。

权限等级：开放

适用场景：您可自行定义广告布局样式。

接入步骤

整体接入步骤如下：

1. 安装 SDK 并初始化;
2. 请求自渲染广告，拿到自渲染广告实例;
3. 引入 ylh-ad 组件，并为组件添加 ad-id 等属性和方法;
4. 按需引入 ylh-ad-clickable，ylh-ad-video 等组件，并为组件添加 ad-id 等属性和方法;

1. 安装 SDK 并初始化

按照快应用 SDK 接入文档操作，完成 SDK 接入和初始化。

2. 请求自渲染广告，拿到自渲染广告实例

请求自渲染广告，主要涉及2个方法：

• onYlhReady
• loadFeedAd

建议在 onInit 周期中执行 onYlhReady ，并在 onYlhReady 内调用 loadFeedAd :

export default {
  onInit() {
    // 调用 onYlhReady，等待 SDK ready
    this.$app.$def.ylh_sdk.onYlhReady(() => {
      const params = {
        count: 1,
        appId: '1200540367',
        placementId: '4035655463419657',
        recommendation: 0,
      }
      // 调用 loadFeedAd 加载广告数据
      this.$app.$def.ylh_sdk.loadFeedAd(params).then(res => {
        this.feedAd = res[0]
        this.adId = feedAd.id
        console.log('FeedAd广告接口请求成功', this.feedAd, this.feedAd.getECPM())
      }).catch(err => {
        console.log('err', { err })
      })
    })
  },
}

loadFeedAd(params) 参数说明:

注意:

• onYlhReady 接收函数作为参数，为避免 this 指向错误，该回调函数应为箭头函数
• loadFeedAd 需要在 onYlhReady 回调函数内执行，否者可能找不到 loadFeedAd 方法
• loadFeedAd 请求的返回结果，为自渲染广告实例(或包含多个实例的数组)，其属性和方法参考下文

广告实例属性

广告实例方法

3. 引入 ylh-ad 组件，并为组件添加 ad-id 等属性和方法

loadFeedAd 方法获取的广告实例 id 值，需要作为属性(ad-id)传递会给 ylh-ad 等组件。
ylh-ad 为自定义组件，其内部封装了广告曝光处理、点击处理、反作弊等功能。为避免消耗异常，请务必按照文档接入。接入方式如下：

<import name='ylh-ad' src='ylh-quick-app-ad-sdk/ads/YlhAd'></import>

<template>
  <div class='wrapper'>
    <ylh-ad
      class='ad-wrapper'
      ad-id='{{ adId }}'
      if='{{ adId }}'
      on-ad-click='onAdClick'
      on-ad-expose='onAdExpose'
      on-app-status-change='onAppStatusChange'
    >
      <div>...</div>
    </ylh-ad>
  </div>
</template>

ylh-ad 组件属性

ylh-ad 组件方法

注意：

• ad-id 必传，且不支持动态修改
• 同一个 ad-id 仅能传递给一个 ylh-ad 组件
• 必须在拿到 ad-id 后，再渲染 ylh-ad 组件

4. 按需引入 ylh-ad-clickable，ylh-ad-video等组件

ylh-ad-clickable，ylh-ad-video 等自定义组件，为 ylh-ad 提供了额外功能，可按需引入。

<import name='ylh-ad-clickable-area' src='ylh-quick-app-ad-sdk/ads/YlhAdClickableArea'></import>
<import name='ylh-ad-video' src='ylh-quick-app-ad-sdk/ads/YlhAdVideo'></import>

<template>
  <div class='wrapper'>
    <ylh-ad
      class='ad-wrapper'
      ad-id='{{ adId }}'
      if='{{ adId }}'
      on-ad-click='onAdClick'
      on-ad-expose='onAdExpose'
      on-app-status-change='onAppStatusChange'
    >
      <ylh-ad-clickable-area ad-id='{{ adId }}'>
        <div class='ad-bottom'>
          <image src='{{adInfo.adLogo}}' class='ams-logo'></image>
        </div>
      </ylh-ad-clickable-area>

      <ylh-ad-video
        class='ylh-ad-video-container'
        ad-id='{{ adId }}'
        on-prepared='onVideoCallback('onPrepared')'
        on-start='onVideoCallback('onStart')'
        on-pause='onVideoCallback('onPause')'
        on-finish='onVideoCallback('onFinish')'
        on-error='onVideoCallback('onError')'
        on-videoready='onVideoCallback('videoready')'
      >
      </ylh-ad-video>

    </ylh-ad>
  </div>
</template>

ylh-ad-clickable-area 组件

被 ylh-ad-clickable-area 包裹的元素，在该元素被点击后，SDK内部会触发广告点击事件，同时会执行 ylh-ad 组件里开发者传递的 ad-click 回调方法。

ylh-ad-clickable-area 组件属性

注意：

• ad-id 必传，且不支持动态修改
• ad-id 的值，必须跟上层 ylh-ad 组件的 ad-id 保持一致

ylh-ad-video 组件

ylh-ad-video 为视频组件。视频预览海报 poster 和视频 src ，在 ylh-ad-video 内部会进行自动赋值。

ylh-ad-video 组件属性

ylh-ad-video 组件方法

在 videoready 回调中拿到video实例后，可按需执行video实例的方法。
实例方法：

export default {
  onVideoCallback(type, evt) {
    console.log('callback: onVideoCallback', type, evt.detail);
    if (type === 'videoready') {
      this.$video = evt.detail.video;
    }
    setTimeout(()=> {
      this.$video && this.$video.start();
    });
  },
}

注意：

• ad-id 必传，且不支持动态修改
• ad-id 的值，必须跟上层 ylh-ad 组件的 ad-id 保持一致