微信小程序——添加广告

川长思鸟来 2023-02-10 05:04 417阅读 0赞

## 微信小程序——添加广告 ##

要想在微信小程序中加入广告，首先要在微信小程序后台开通流量主  
流量主需要满足：1、累计独立访问（uv)不低于1000；2、有严重违规的小程序不与开通。

广告主要有：banner广告、激励视频广告、卡片广告、插屏广告、盒子广告、feeds广告、积木广告。

### 一、banner 广告 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6el8xMjM0_size_16_color_FFFFFF_t_70_pic_center]  
banner广告比较简单，直接在html页面中适当的位置加入:

### 二、卡片广告 ###

![在这里插入图片描述][20200528154742235.png_pic_center]  
卡片广告跟banner广告差不多，直接在适当的位置加入

### 三、盒子广告 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6el8xMjM0_size_16_color_FFFFFF_t_70_pic_center 1]  
盒子广告需要在js文件中加入

let appbox = qq.createAppBox({ 
      adUnitId: '你的盒子广告id'
    })
    appbox.load().then(()=>{ 
      appbox.show()
    })

这里需要注意的是，从微信小程序后台复制的代码，广告id应该是字符串，要加上引号。

### 四、激励视频广告 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6el8xMjM0_size_16_color_FFFFFF_t_70_pic_center 2]  
激励视频是需要写在js文件中

var videoAd = null;
    page({ 
    	onLoad:function(){ 
    		if (wx.createRewardedVideoAd) { 
    			 // 加载激励视频广告
    			 videoAd = wx.createRewardedVideoAd({ 
    			 	adUnitId: '你的 adUnitId'
    			 })
    			 //捕捉错误
    			 videoAd.onError(err => { 
    			 // 进行适当的提示
    			 console.log('videoAd onError', res)
    			 })
    			 // 监听关闭
    			 videoAd.onClose((status) => { 
    			  if (status && status.isEnded || status === undefined) { 
    			  // 正常播放结束，下发奖励
    			  // continue you code
    			  } else { 
    			  // 播放中途退出，进行提示
    			  }
    			 })
    		}
    	}
    })

然后在合适的位置展示视频广告

if (videoAd) { 
     videoAd.show().catch(err => { 
      // 失败重试
      videoAd.load()
      .then(() => videoAd.show())
     })
     }

如果要在按钮上加入视频广告，需要注意视频广告的回调。onClose回调函数会记录点击了几次视频广告。

### 五、插屏广告 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6el8xMjM0_size_16_color_FFFFFF_t_70_pic_center 3]  
插屏广告要写在js文件中

let interstitialAd = null
    Page({ 
      onLoad() { 
        if(wx.createInterstitialAd){ 
    　　　//1.创建广告实例
          interstitialAd = wx.createInterstitialAd({  adUnitId: 'xxxx' })
    　　　//3.监听广告，广告显示出来以后你要做的操作
          interstitialAd.onLoad(() => { 
            console.log('onLoad event emit')
          })
    　　　//其实可以不用管这个onError，它的作用是如果广告拉取失败，就提示你
          interstitialAd.onError((err) => { 
            console.log('onError event emit', err)
          })
    　　　//广告关闭时，触发。
          interstitialAd.onClose((res) => { 
            console.log('onClose event emit', res)
          })
        }
      },
      onshow:function(){ 
      	//2.让广告显示出来
    	interstitialAd.show().catch((err) => { 
    	  console.error(err)
    	})
      }

插屏广告需要注意的是：  
1、不能在小程序一进来的时候就加入插屏广告。  
2、插屏广告可能在电脑微信开发工具里显示不出来，要用真机调试才能看到

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6el8xMjM0_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200528154143320.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6el8xMjM0,size_16,color_FFFFFF,t_70#pic_center
[20200528154742235.png_pic_center]: https://img-blog.csdnimg.cn/20200528154742235.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6el8xMjM0_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20200528155053383.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6el8xMjM0,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6el8xMjM0_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20200528155650642.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6el8xMjM0,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6el8xMjM0_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20200528162246914.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6el8xMjM0,size_16,color_FFFFFF,t_70#pic_center