微信小程序添加插屏广告并设置显示频率(一天一次)


Posted in Javascript onDecember 06, 2019

插屏广告

用户触发小程序中的特定场景时,插屏广告将自动向用户展现,用户可以随时关闭插屏广告。广告触发场景由流量主自定义,广告按曝光计费(CPM)。

微信小程序今年新上线了插屏广告,设置和在代码库中接入都非常方便。详细可见微信小程序官方文档。

大体的流程就是在小程序后台新建广告位,获取到广告位的adUnitId并嵌入到源代码,因为插屏广告的单页面性,在页面的onload处添加即可。

let interstitialAd = null;
if (wx.createInterstitialAd) {
 interstitialAd = wx.createInterstitialAd({
  adUnitId: 'adunit-ID'
 })
}
if(interstitialAd) {
 interstitialAd.show().catch((err) => {
  console.error(err);
 })
}

嵌入广告非常简单,毕竟微信已经将所有的接口写好了,开发者仅需调用即可。

主要的功能点是设置一个插屏广告一天只显示一次,而微信并没有提供这方面的api,秉持前端能完成的就不要麻烦后端,便想到直接使用缓存存储当期日期,用户打开页面的时候获取上次缓存的日期查看是否相同即可。

//这里使用的是mpVue框架,写在mounted里。
let nowday = new Date().getFullYear().toString() + (new Date().getMonth() + 1).toString() + new Date().getDate().toString() ;

//获取上次打开页面时间
try {
 let lastDay = wx.getStorageSync('day');
 if(lastDay) {
  console.log('lastday', lastDay);
  console.log('nowday', nowday)
  if(lastDay == nowday) {
   this.flag = false;
  } else {
   this.flag = true;
  } 
 }
} catch (e) {
 //用户首次打开
 this.flag = true;
 console.error(e);
 console.log('true no storage', this.flag)
}

if(interstitialAd && this.flag) {
 interstitialAd.show().catch((err) => {
  console.error(err);
 })
}
interstitialAd.onLoad(() => {
 try {
  wx.setStorageSync('day', nowday);
  console.log('存储时间', nowday);
  } catch (e) { 
  console.log('err', err)
 }
})

PS:下面看下一天只显示一次的弹出广告

仿京东官网顶部的广告关闭,效果为第一次进入官网会出现广告,然后点击关闭,刷新网页不会再显示广告,但是当清除localStorage存入的数据,刷新网页会再显示广告。

html代码

<div class="header">
 <div class="header-a">
  <a href=""></a>
  <i class="close">x</i>
 </div>
</div>

css代码

.header{
 width:100%;
 height:80px;
 background:#000;
}
.header-a{
 width:1190px;
 margin:0 auto;
 position:relative;
 background:url("images/1.jpg") no-repeat;
}
.header-a a{
 width:100%;
 height:80px;
 display:block;
}
.close{
 cursor:pointer;
 color:#fff;
 position:absolute;
 top:5px;
 right:5px;
 background:rgb(129, 117, 117);
 width: 20px;
 text-align: center;
 line-height: 20px;
}

js代码

//localStorage方法
<script src="../js/jquery.min.js"></script>
function popAd(){
  //判断localStorage里有没有isClose
  if(localStorage.getItem("isClose")){    
   $(".header").hide();
  }else{
   $(".header").show();
  }
  //点击关闭隐藏图片存取数据
  $(".close").click(function(){
   $(".header").fadeOut(1000);

   localStorage.setItem("isClose", "1"); 
  })
 }
 popAd();

chrome console清本地缓存localStorage.clear()

批量清:

localStorage.clear()

单独清除某个记录的缓存,如:

localStorage.clear("popup_info") 或 localStorage.removeItem("popup_info");

总结

以上所述是小编给大家介绍的微信小程序添加插屏广告并设置显示频率(一天一次),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery获取input的value问题说明
Aug 19 Javascript
利用json获取字符出现次数的代码
Mar 22 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 Javascript
jQuery使用$.ajax进行即时验证实例详解
Dec 11 Javascript
Node.js创建Web、TCP服务器
Dec 05 Javascript
实例解析ES6 Proxy使用场景介绍
Jan 08 Javascript
Vue.js 表单控件操作小结
Mar 29 Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 Javascript
JS实现的对象去重功能示例
Jun 04 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
Mar 03 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
Sep 28 Javascript
微信小程序激励式视频广告组件使用详解
Dec 06 #Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
Dec 06 #Javascript
vue中监听路由参数的变化及方法
Dec 06 #Javascript
详解ECMAScript2019/ES10新属性
Dec 06 #Javascript
ES6的异步操作之promise用法和async函数的具体使用
Dec 06 #Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 #Javascript
微信小程序 自定义弹窗实现过程(附代码)
Dec 05 #Javascript
You might like
百事可乐也出咖啡了 双倍咖啡因双倍快乐
2021/03/03 咖啡文化
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
PHP5中使用DOM控制XML实现代码
2010/05/07 PHP
php实现对象克隆的方法
2015/06/20 PHP
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
js 遍历对象的属性的代码
2011/12/29 Javascript
JavaScript之编码规范 推荐
2012/05/23 Javascript
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
JS判断页面是否出现滚动条的方法
2015/07/17 Javascript
jquery实现表单验证简单实例演示
2015/11/23 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
前端页面文件拖拽上传模块js代码示例
2017/05/19 Javascript
Angular浏览器插件Batarang介绍及使用
2018/02/07 Javascript
node实现的爬虫功能示例
2018/05/04 Javascript
小程序实现留言板
2018/11/02 Javascript
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
JS判断浏览器类型与操作系统的方法分析
2020/04/30 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python计算最大优先级队列实例
2013/12/18 Python
教你用Python写安卓游戏外挂
2018/01/11 Python
python自动截取需要区域,进行图像识别的方法
2018/05/17 Python
一文带你了解Python 四种常见基础爬虫方法介绍
2020/12/04 Python
Janie and Jack美国官网:GAP旗下的高档童装品牌
2019/09/09 全球购物
ABOUT YOU罗马尼亚:超过600个时尚品牌
2019/09/19 全球购物
C语言编程练习
2012/04/02 面试题
优秀护士获奖感言
2014/02/20 职场文书
技校毕业生自荐信范文
2014/03/07 职场文书
预备党员考察意见范文
2015/06/01 职场文书