开发教程与代码示例

入门

小程序框架

小程序运行时

自定义组件

基础教程

能力教程

流量入口

通用能力

推广变现

接入线索组件

接入广告能力

经营能力

行业能力

AI/AR 能力

性能优化

安全

接入广告能力

我的收藏

准备工作

如果你的小程序所在类目属于“非交易类”（小程序类目介绍），并且已经有了一定的流量。你就可以考虑接入平台提供的广告能力，将自己的流量进行变现，获取固定收入了。

名词解释

名称	描述
广告主	想为自己的品牌或产品投放广告的商家，他们提供了广告的展示内容。
流量主	接收广告主物料，并为之投放广告，获得广告收益的一方。
eCPM	eCPM（Effective Cost Per Mille，千次展示收益）。每一千次展示可以获得的广告收入，展示的单位可以是网页，广告单元，甚至是单个广告。

开通流量主

在正式接入广告能力之前，你需要开通流量主功能。

登录抖音开放平台控制台，点击进入要开通流量主的小程序。

在左侧导航栏中选择「设置」>「商业化变现」。

在「商业化变现」页面，确认是否符合「开通条件」。如果符合，点击「申请开通」。

阅读并勾选同意《字节跳动小程序广告组件系统服务协议》，再次点击「申请开通」。

设置获取收益的结算账号、结算税率，点击「确认」。注意：结算账户需为小程序所属主体的结算账户。

设计广告

目前抖音开放平台支持 6 种广告形态，分别是：banner、信息流、插屏广告、激励视频、贴片视频。贴片视频分为前贴片视频和后贴片视频。

不同的广告类型适配不同的 App 宿主。请在创建广告的过程中，务必注意创建的广告类型。

	抖音	抖音极速版	今日头条	今日头条极速版	西瓜视频
banner	✖️	✖️	✔️	✖️	✖️
信息流	✖️	✖️	✔️	✔️	✔️
插屏广告	✔️	✖️	✖️	✖️	✖️
激励视频	✔️	✔️	✖️	✖️	✖️
前贴片视频	✖️	✖️	✔️	✖️	✖️
后贴片视频	✖️	✖️	✔️	✖️	✖️

除此之外，你还需要在产品中，为广告预留恰当出现时机，争取让广告的内容被用户完整观看并且消化。更高的广告效果转化率将会给你带来更高的 eCPM。

例如：

接入广告

接下来，只需要“新建广告位”，获取到“广告位 ID”即可进入后续开发流程。

插屏广告

注意
•插屏广告组件是一个原生组件，由客户端渲染，前端无感知，层级比普通组件高。
•插屏广告组件每次创建都会返回一个全新的实例，默认是隐藏的，需要调用 InterstitialAd.show 将其显示。
•对于插屏广告的展示，有一定的频率控制，具体如下： 小程序启动后的前 30s（秒），不能展示插屏广告。 已经展示一次插屏广告后，第二次展示需要距离上一次展示 60s。 展示过一次激励视频广告后，后续需要展示插屏广告的情况下，需要与激励视频广告的展示间隔 60s。

时序图

代码示例

// 小程序启动后30秒内才能展示插屏广告
const AFTER_LAUNCH_TIME = 31000;
// 距离上次展示广告60秒后，才能展示插屏广告
const NEXT_SHOW_TIME = 61000;
// 是否可以展示广告
let canShow = false;
let timer = null;
// 是否为第一次展示广告
let isFirstShow = true;
// 休眠函数
function sleep(ms) {
  if (timer) {
    clearTimeout(timer);
  }
  return new Promise((resolve) => {
    timer = setTimeout(() => {
      resolve({});
    }, ms);
  });
}

class AdController {
  /**
   * @description: 控制广告是否展示
   * @return {boolean}
   */
  get canShow() {
    return canShow;
  }

  /**
   * @description: 判断广告是否第一次展示
   * @return {boolean}
   */
  get isFirstShow() {
    return isFirstShow;
  }
}

const controller = new AdController();

class InterstitialAdController {
  constructor(adid) {
    // 初始化 & 加载插屏广告
    this.adid = adid;
    this.ad = tt.createInterstitialAd({
      adUnitId: this.adid,
    });
    this.ad.load();
  }

  /**
   * @description: 在app的onLaunch方法中调用
   * @return {Promise<void>}
   */
  async onAppLaunch() {
    // 小程序启动30秒后将canShow置为true，表示可以播放插屏广告
    await sleep(AFTER_LAUNCH_TIME);
    canShow = true;
  }

  /**
   * @description: 展示插屏广告
   * @return {Promise<void>}
   */
  show() {
    // 如果canShow=false，则不能播放视频
    if (!controller.canShow) return;

    // 展示插屏广告
    this.ad.show();
    // 设置广告关闭的回调函数
    this.ad.onClose(() => {
      console.log("close");
      // 休眠60s后把canShow置为true
      this.afterNext();
      tt.redirectTo({
        url: "/pages/index/index",
      });
    });
    canShow = false;
    isFirstShow = false;
  }

  async afterNext() {
    // 休眠60s后把canShow置为true
    await sleep(NEXT_SHOW_TIME);
    canShow = true;
  }

  /**
   * @description: 返回canShow的值
   * @return {boolean}
   */
  getCanShow() {
    return controller.canShow;
  }
  /**
   * @description: 返回isFirstShow的值
   * @return {boolean}
   */
  getIsFirstShow() {
    return controller.isFirstShow;
  }
}

/**
 * @description: 初始化一个插屏广告，开发者需要将参数置换为自己小程序的广告id
 */
export const interstitialAdController = new InterstitialAdController("xxxxx");

代码示例链接

效果

激励视频广告

注意

•

激励视频广告是由客户端原生渲染，覆盖在整个小程序页面区域之上，目前支持竖屏展示。

•

全局只有一个 RewardedVideoAd 实例，重复创建不会覆盖。

•

激励视频广告展示的时候用户不能操作小程序。

•

开发者工具上暂不支持调试该 API，请在真机上进行调试。

•

广告不是每一次都会出现，广告是否会成功调起与用户匹配度、填充率等多种因素有关，没有出现可能是由于该用户不适合浏览广告，可通过 onError 进行监听。具体错误码可参考错误码说明。

•

激励视频广告的播放没有时间间隔限制。

代码示例

class RewardedVideoAdController {
  constructor(adid) {
    this.ad = tt.createRewardedVideoAd({
      adUnitId: adid,
    });

    // 监听错误
    this.ad.onError((err) => {
      tt.hideLoading();
      switch (err.errCode) {
        case 1004:
          // 无合适的广告
          break;
        default:
        // 更多请参考错误码文档
      }
    });

    // 监听视频播放完成
    this.ad.onClose((data) => {
      tt.hideLoading();
      if (data.isEnded) {
        console.log("观看了", data.count, "个视频");
      } else {
        console.log("未观看完视频");
      }
      tt.redirectTo({
        url: "/pages/index/index",
      });
      // 设置计时器，激励视屏广告展示60s内不能展示插屏广告
      sleep(NEXT_SHOW_TIME).then(() => {
        canShow = true;
      });
    });

    // 预加载资源
    this.ad.load();
  }

  show() {
    tt.showLoading({
      title: "正在加载广告",
    });
    // 当激励视频显示时，插屏视频不能展示。
    canShow = false;
    isFirstShow = false;
    this.ad.show();
  }

  getCanShow() {
    return controller.canShow;
  }
}
/**
 * @description: 初始化一个激励广告，开发者需要将参数置换为自己小程序的广告id
 */
export const rewardedVideoAdController = new RewardedVideoAdController("xxxxx");