给难以关闭的悬浮广告位增加关闭按钮

王小优
王小优
王小优
231
文章
0
评论
2015年10月12日
评论
3,874 1500字阅读5分0秒

很多广告联盟提供的悬浮广告都很难关闭,且经常有看似关闭按钮实则为诱惑点击的情况,为了减少用户体验降低,本文教大家给悬浮广告位增加关闭按钮。

站长朋友都知道,广告和用户体验是一个难以调和的矛盾,特别是小站点在没有固定的合作伙伴支撑网站发展的情况下,挂广告联盟成了大多数站长的选择。但百度、360这些广告的收益却不敢恭维,咱们不得不选择收益较高的小联盟,然而小联盟的广告经常却远没有百度、360这些联盟的广告友好。

其中最讨人厌的就是小联盟的广告经常出现无法“一键关闭”的情况,比如右下角悬浮广告:广告边缘处出现的关闭字样实际上毫无用处,倒是误导你点了广告或者直接没有关闭按钮。虽然王小优以前也挂过这种广告,但实际上我对这种诱导点击深恶痛绝!

给难以关闭的悬浮广告位增加关闭按钮

悬浮广告看似关闭按钮实则诱导点击

所以咱今天就来给这类广告增加一个可用的关闭按钮,在不损害广告商利益的前提下保障用户体验,实际上这种无法关闭的广告有违法嫌疑。

分析

我观察了一些较友好的悬浮广告,其关闭功能原理是在广告<div>盒子里有一个点击按钮,点击触发JS,将广告<div>盒子增加一个CSS样式style="display:none;"从而广告消失,原理非常简单。

一般情况下,小联盟的悬浮广告都是通过在网站上投放一段广告JS,然后执行出一个CSS样式为position: fixed;的<div>盒子,里面通过嵌套调取广告内容,此时广告<div>盒子内没有关闭按钮。

通过分析,我们得出来只需要新增一个关闭<div>,也对其设置position:fixed;样式,点击它,让他找到广告<div>盒子,然后给广告<div>盒子增加一个CSS样式style="display:none;",由于按钮不在广告盒子中,我们还要让它自己在点击后消失,不然广告隐藏了,关闭按钮还在悬浮着。

得出代码

实际代码如下:

  1. <!-- 给悬浮广告位增加关闭按钮-->  
  2. <div class="close-ad" style=" position: fixed; right: 0; bottom: 260px;cursor:pointer;">  
  3. <a title="关闭" onclick="this.style.display='none';document.getElementById('广告盒子id').style.display='none'" href="javascript:void(0)">  
  4. <img src="https://www.wangxiaoyou.com/images/close-ad.gif">  
  5. </a>  
  6. </div>  

上述代码建议直接跟悬浮广告代码放在一起,其中关闭按钮<div>的样式right,bottom根据实际情况进行修改,让其能够完美的和广告结合在一起;getElementById后面的id需要仔细查看你广告的盒子id;图片建议本地化,如果启用了防盗链,直接调用可能无法显示。达到如下效果,大家可测试看下悬浮广告效果!

给难以关闭的悬浮广告位增加关闭按钮

为悬浮广告增加关闭按钮效果

本代码部署简单,效果显著,样式也能与绝大多数广告适配,欢迎大家使用。

最后还要说几句:大家都知道悬浮广告不如固定广告,固定广告不如不挂广告,但是网站运营维护是需要时间精力还有金钱的,特别是有一些访客的网站,不挂广告怎么坚持的下去?特别是没有固定合作伙伴或者还没有找到赢利点的站点,挂悬浮广告也是无奈之举。

所以希望大家不要动不动就说“你为什么要挂个这种广告啊?”“我就不喜欢广告,我的网站就不挂广告!!”“你网站广告太多了,看着烦”情况不一样就不要用自己的标准去要求别人,你知道别人投了多少钱么?

若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微博
  • 微博扫一扫
  • weinxin
王小优
接入百度云加速后解析企业邮箱教程 好文资讯

接入百度云加速后解析企业邮箱教程

昨天试了一下百度云加速,导致企业邮箱发送失败,原因是并没有正确解析邮箱导致的。我用的阿里企业邮箱,企业邮箱后台提示需要到DNS服务商添加邮箱解析。 这里以阿里云企业邮箱为例,进入企业邮箱管理,设置解析...
什么是OPCM、OCPC、OCPA广告? 好文资讯

什么是OPCM、OCPC、OCPA广告?

如果你作为广告主当你在做头条、百度信息流广告投放的时候,会看到出价策略有OPCM、OCPC、OCPA,这些是什么意思呢?跟CPM、CPC、CPA有什么不同? 想必大家都知道广告类型分CPC、CPM、C...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: