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

摘要:

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

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

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

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

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

笔者观察了一些较友好的悬浮广告,其关闭功能原理是在广告

盒子里有一个点击按钮,点击触发js,将广告

盒子增加一个CSS样式style=”display:none;”从而广告消失,原理非常简单。

一般情况下,小联盟的悬浮广告都是通过在网站上投放一段广告js,然后执行出一个css样式为position: fixed;的

盒子,里面通过嵌套调取广告内容,此时广告

盒子内没有关闭按钮。

通过分析,我们得出来只需要新增一个关闭

,也对其设置position:fixed;样式,点击它,让他找到广告

盒子,然后给广告

盒子增加一个CSS样式style=”display:none;”,由于按钮不在广告盒子中,我们还要让它自己在点击后消失,不然广告隐藏了,关闭按钮还在悬浮着。

实际代码如下:

  1. <div class=“close-ad” style=” position: fixed; right: 0; bottom: 260px;cursor:pointer;”>
  2.  <a title=“关闭” onclick=“this.style.display=’none’;document.getElementById(‘广告盒子id’).style.display=’none'” href=“javascript:void(0)”>
  3.  <img src=“https://www.yaxi.net/images/close-ad.gif”>
  4.  a>
  5.  div>

上述代码建议直接跟悬浮广告代码放在一起,其中关闭按钮

的样式right,bottom根据实际情况进行修改,让其能够完美的和广告结合在一起;getElementById后面的id需要仔细查看你广告的盒子id;图片建议本地化,雅兮网启用了,直接调用可能无法显示。达到如下效果,大家可测试悬浮广告效果!

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

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

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

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