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


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 相关文章推荐
用js实现计算代码行数的简单方法附代码
Aug 13 Javascript
javascript 密码强弱度检测万能插件
Feb 25 Javascript
利用json获取字符出现次数的代码
Mar 22 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
Feb 17 Javascript
JavaScript电子时钟倒计时第二款
Jan 10 Javascript
js控住DOM实现发布微博效果
Aug 30 Javascript
React学习之事件绑定的几种方法对比
Sep 24 Javascript
bootstrap datetimepicker控件位置异常的解决方法
Nov 23 Javascript
JavaScript实现省市联动过程中bug的解决方法
Dec 04 Javascript
vue.js 实现输入框动态添加功能
Jun 25 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
May 05 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
Sep 29 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
PHP下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
PHP简单字符串过滤方法示例
2016/09/04 PHP
php中引用&amp;的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
Prototype使用指南之string.js
2007/01/10 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
用js来获取上传的文件名纯粹是为了美化而用
2013/10/23 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
js与jQuery 获取父窗、子窗的iframe
2013/12/20 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
WEB前端实现裁剪上传图片功能
2016/10/17 Javascript
简单几步实现返回顶部效果
2016/12/05 Javascript
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
Vue学习之路之登录注册实例代码
2017/07/06 Javascript
Bootstrap实现的表格合并单元格示例
2018/02/06 Javascript
利用npm 安装删除模块的方法
2018/05/15 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
2018/07/09 Javascript
JavaScript数组及常见操作方法小结
2019/11/13 Javascript
python将人民币转换大写的脚本代码
2013/02/10 Python
python根据时间生成mongodb的ObjectId的方法
2015/03/13 Python
讲解Python中的标识运算符
2015/05/14 Python
Python2中的raw_input() 与 input()
2015/06/12 Python
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
Python实现DDos攻击实例详解
2019/02/02 Python
python中的Elasticsearch操作汇总
2019/10/30 Python
python plotly画柱状图代码实例
2019/12/13 Python
解决json中ensure_ascii=False的问题
2020/04/03 Python
python利用 keyboard 库记录键盘事件
2020/10/16 Python
python程序实现BTC(比特币)挖矿的完整代码
2021/01/20 Python
接口的多继承会带来哪些问题
2015/08/17 面试题
实习生自我鉴定范文
2013/12/05 职场文书
化学教师自荐信范文
2013/12/28 职场文书
停车场管理协议书范本
2014/10/08 职场文书
2019年汽车租赁合同范本!
2019/08/12 职场文书
Java中的随机数Random
2022/03/17 Java/Android