小程序广告

首先到小程序官网open in new window后台申请插件，珊瑚运营平台插件，原生小程序申请神蓍，UNI小程序申请uniAD

左侧侧边栏最下面设置=>第三方设置=>插件管理=>添加插件

其中珊瑚运营平台插件需要审核3-5天，请耐心等待，审核通过会发带有广告ID的邮件到邮箱中

DANGER

如果遇到广告在微信开发者工具中不显示的问题，请使用真机预览

代码部署

原生微信小程序(微信开发者工具开发，taro，mpvue等框架开发)

添加配置

在app.json中添加以下代码

// app.json
{
  "plugins": {
    "adset": {
      "version": "1.0.1",
      "provider": "wx69ef9acec87b14ac"
    },
    "coral-adv": {
      "version": "1.0.23",
      "provider": "wx0e203209e27b1e66"
    }
  },
  "usingComponents": {
    "adset": "plugin://adset/adv"
  }
}

TIP

adid为后台广告位ID

appkey为后台我的媒体里面的apkey

<adset adid="1764FB2FCF3A4908BDB26D55B9FC6E89" appkey="46AA8BB7593F71A8" />

banner测试广告ID：1764FB2FCF3A4908BDB26D55B9FC6E89

格子广告测试广告ID：FB5113B0C6E0067B4731DB1EBACDCBDC

视频广告测试广告ID：A0A4D69361F5E170F8D32184185D92B8

激励视频/插屏

<button bindtap="showAdv">show</button>
<adset adid="122CC333FF8941F1FE2B469D5DFAD15F" class="ad" show="{{show}}" appkey="46AA8BB7593F71A8" bind:finishedCb="finishedCb" bind:quitCb="quitCb" bind:errorCb="errorCb" bind:loadCb="loadCb"/>

激励视频测试广告ID：122CC333FF8941F1FE2B469D5DFAD15F

插屏视频测试广告ID：E718F15EC8A8CB5229DFA636A8F730FB

// js
Page({
  data: {
    show: false,
  },
  onLoad() {
  },
  onReady(){
  },
  show(){
    console.log('点击展示');
   this.setData({show:!this.data.show})
  },
  finishedCb: function (e) {
    console.log('播放完毕事件',e.detail);
    if(e.detail.isEnd) {
      wx.showToast({
        title: '广告播放完毕，可以发放奖励',
      })
      this.setData({show:false})
    }
  },
  quitCb: function (e) {
    console.log('中途退出事件',e.detail);
    wx.showToast({
      title: '中途退出，没有奖励',
    })
    this.setData({show:false})
  },
  errorCb(e) {
    console.log('错误事件',e.detail);
    wx.showToast({
      title: '广告发生错误',
    })
  },
  loadCb(e) {
    console.log('加载事件',e.detail);
    wx.showToast({
      title: '广告加载成功',
    })
},
})

UniApp小程序

IP白名单配置

阿里云

如果小程序后台没有配置IP白名单则不需要配置

47.92.132.2
47.92.152.34
47.92.87.58
47.92.207.183
8.142.185.204

腾讯云

在UniCloud web控制台open in new window，创建付费的腾讯云服务空间，选择一个云函数，在云函数的详情界面可以开启固定出口ip。开启后界面上会显示可用的固定ip。拿着这个ip去需要固定ip的界面（如微信公众号管理界面）配置即可。

<ad adpid="1111111111"></ad>

小程序格子广告

<ad adpid="xxxx" @load="adLoad" @error="adError"></ad>

视频广告在创建后会自动拉取广告。开发者可以通过 ad 组件的 load 和 error 事件监听广告拉取成功或失败。

<script>
  export default {
    data() {
      return {
      }
    },
    methods: {
      adLoad() {
        console.log("adLoad");
      },
      adError(e) {
        console.log("adError", e);
      }
    }
  }
</script>

小程序视频广告

<ad adpid="xxxx" @load="adLoad" @error="adError"></ad>

Grid 广告在创建后会自动拉取广告。开发者可以通过 ad 组件的 load 和 error 事件监听广告拉取成功或失败，可以通过 close 事件监听广告被关闭。

<script>
  export default {
    data() {
      return {
      }
    },
    methods: {
      adLoad() {
        console.log("adLoad");
      },
      adError(e) {
        console.log("adError",e);
      }
    }
  }
</script>

插屏广告

组件语法

<template>
  <view class="content">
    <ad-interstitial adpid="1111111113" :loadnext="true" v-slot:default="{loading, error}" @load="onadload" @close="onadclose" @error="onaderror">
      <button :disabled="loading" :loading="loading">显示广告</button>
      <view v-if="error">{{error}}</view>
    </ad-interstitial>
  </view>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    onadload(e) {
      console.log('广告数据加载成功');
    },
    onadclose(e) {
		 console.log("onadclose",e);
    },
    onaderror(e) {
      // 广告加载失败
      console.log("onaderror: ", e.detail);
    }
  }
}
</script>

组件+API语法(推荐)

<template>
  <view>
    <ad-interstitial ref="adInterstitial" adpid="1111111113" :loadnext="false" v-slot:default="{loading, error}" @load="onadload" @close="onadclose" @error="onaderror">
      <view v-if="error">{{error}}</view>
    </ad-interstitial>
    <button type="primary" :disabled="isLoading" :loading="isLoading" @click="showAd">显示广告</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false
    }
  },
  methods: {
    showAd() {
      this.isLoading = true;
      this.$refs.adInterstitial.show();
    },
    onadload(e) {
      this.isLoading = false;
      console.log('广告数据加载成功');
    },
    onadclose(e) {
      // 用户点击了关闭广告
      console.log("onadclose",e);
    },
    onaderror(e) {
      // 广告加载失败
      console.log("onaderror: ", e.detail);
    }
  }
}
</script>

API语法 小程序在options里面比需填入adUnitId

<template>
  <view>
    <view>
      <button :loading="loading" :disabled="loading" type="primary" @click="showInterstitialAd">显示广告</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        title: '插屏广告',
        loading: false
      }
    },
    onReady() {
      this.adOption = {
        adpid: '1111111113' ,// HBuilder基座的测试广告位
        adUnitId:'xxxxx' // 小程序必填
      };

      // 创建广告实例
      this.createInterstitialAd();
    },
    methods: {
      createInterstitialAd() {
        var interstitialAd = this.interstitialAd = uni.createInterstitialAd(this.adOption);
        interstitialAd.onLoad(() => {
          this.loading = false;
          console.log("插屏 广告加载成功");
        });
        interstitialAd.onClose(() => {
          // 用户点击了关闭或返回键(仅Android有返回键)
          console.log("插屏 广告关闭");
        });
        interstitialAd.onError((err) => {
          this.loading = false;
          console.log("插屏 广告加载失败");
        });

        // 广告实例创建成功后默认会执行一次 load，加载广告数据
        // 如果界面有 "显示广告" 按钮，需要先禁用掉，防止用户点击，等待广告数据加载成功后在放开
        this.loading = true;
      },
      showInterstitialAd() {
        // 调用 interstitialAd.show()，如果数据正在加载中不会显示广告，加载成功后才显示
        // 在数据没有加载成功时，需要防止用户频繁点击显示广告
        if (this.loading == true) {
          return
        }
        this.loading = true;
        this.interstitialAd.show().then(() => {
          this.loading = false;
        });
      }
    },
    onUnload() {
      // 页面关闭后销毁实例
      this.interstitialAd.destroy()
    }
  }
</script>

激励视频

组件语法

<template>
  <view class="content">
    <ad-rewarded-video adpid="1507000689" :loadnext="true" v-slot:default="{loading, error}" @load="onadload" @close="onadclose" @error="onaderror">
      <button :disabled="loading" :loading="loading">显示广告</button>
      <view v-if="error">{{error}}</view>
    </ad-rewarded-video>
  </view>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    onadload(e) {
      console.log('广告数据加载成功');
    },
    onadclose(e) {
      const detail = e.detail
      // 用户点击了【关闭广告】按钮
      if (detail && detail.isEnded) {
        // 正常播放结束
        console.log("onadclose " + detail.isEnded);
      } else {
        // 播放中途退出
        console.log("onadclose " + detail.isEnded);
      }
    },
    onaderror(e) {
      // 广告加载失败
      console.log("onaderror: ", e.detail);
    }
  }
}
</script>

组件+API(推荐)

<template>
  <view>
    <ad-rewarded-video ref="adRewardedVideo" adpid="1507000689" :preload="false" :loadnext="false" :disabled="true"
      v-slot:default="{loading, error}" @load="onadload" @close="onadclose" @error="onaderror">
      <view class="ad-error" v-if="error">{{error}}</view>
    </ad-rewarded-video>
    <button type="primary" :disabled="isLoading" :loading="isLoading" @click="showAd">显示广告</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isLoading: false
      }
    },
    onReady() {
      this.isLoading = true;
      this.$refs.adRewardedVideo.load();
    },
    methods: {
      showAd() {
        if (this.isLoading) {
          return
        }
        this.$refs.adRewardedVideo.show();
      },
      onadload(e) {
        this.isLoading = false;
        console.log('广告数据加载成功');
      },
      onadclose(e) {
        const detail = e.detail
        // 用户点击了【关闭广告】按钮
        if (detail && detail.isEnded) {
          // 正常播放结束
          console.log("onClose " + detail.isEnded);
        } else {
          // 播放中途退出
          console.log("onClose " + detail.isEnded);
        }
        //this.isLoading = true;
        //this.$refs.adRewardedVideo.load();
      },
      onaderror(e) {
        // 广告加载失败
        console.log(e.detail);
        this.isLoading = false;
      }
    }
  }
</script>

<style>
  .ad-error {
    color: orangered;
    margin-top: 5px;
  }
</style>

API语法

激励视频广告组件默认是隐藏的，因此可以提前创建，以提前初始化组件。开发者可以在页面的 onReady 事件回调中创建广告实例，并在该页面的生命周期内重复调用该广告实例。

<script>
    export default {
        data() {
            return {
                title: 'createRewardedVideoAd'
            }
        },
        onReady() {
          this._isLoaded = false
          rewardedVideoAd = this._rewardedVideoAd = uni.createRewardedVideoAd({
            adpid: '1507000689',
            urlCallback: { // 服务器回调透传参数
              userId: 'testuser',
              extra: 'testdata'
            }
          }) // 仅用于HBuilder基座调试 adpid: '1507000689'
          rewardedVideoAd.onLoad(() => {
            this._isLoaded = true
            console.log('onLoad event')
            // 当激励视频被关闭时，默认预载下一条数据，加载完成时仍然触发 `onLoad` 事件
          })
          rewardedVideoAd.onError((err) => {
            console.log('onError event', err)
          })
          rewardedVideoAd.onClose((res) => {
             if (res && res.isEnded) {
                // 正常播放结束
                // 这里应该联网给予用户激励。且这段代码应该做安全保护，详见下文中的“安全注意”
              } else {
                // 播放中途退出
              }
            console.log('onClose event', res)
          })
        },
        methods: {
          show() {
            if (this._isLoaded) {
              this._rewardedVideoAd.show()
            }
          }
        }
    }
</script>

激励视频服务器回调

项目使用了uni-id-coopen in new window
使用uni-open-bridgeopen in new window托管三方开放平台数据
配置安全网络open in new window

以上三个开通完成后，请看下面文档

详细配置请看文档open in new window

# 小程序广告

# 代码部署

# 原生微信小程序(微信开发者工具开发，taro，mpvue等框架开发)

# 添加配置

# banner/格子广告/视频广告

# 激励视频/插屏

# UniApp小程序

# IP白名单配置

# 阿里云

# 腾讯云

# banner

# 小程序格子广告

# 小程序视频广告

# 插屏广告

# 激励视频

# 激励视频服务器回调