![](http://www.shareditor.com/uploads/media/default/0001/01/thumb_423_default_big.jpeg)
自小二兔机器人上线5天以来,接受了来自100多位客官的激情调戏,虽然答非所问驴唇不对马嘴情况经常有,但是我家小二兔的话还是滔滔不绝的,不管你问什么,它总有要说的话,那么对于shareditor这种日均数千流量的网站来说小二兔还想接受更多的调戏,怎么办,我开始导流啦
请尊重原创,转载请注明来源网站www.shareditor.com以及原始链接地址
小二兔漏两招
为了先给各位客官热热身,我们找一段最近小二兔被调戏的场景给各位欣赏一下(日期 时间 ip [用户说的话] [机器人说的话]):
2016-09-29 17:49:28 60.191.99.129 [你看过加勒比海盗吗] [我不是啊]
2016-09-29 17:49:38 60.191.99.129 [那你是谁] [你想让我告诉你接下来会发生的事吗?]
2016-09-29 17:49:52 60.191.99.129 [神探狄仁杰] [昨晚那集看了吗?我快被吓死了]
2016-09-29 17:50:11 60.191.99.129 [没有,你怎么吓死了] [这家伙疯了 他是谁?]
2016-09-29 17:50:21 60.191.99.129 [路唇不对马嘴] [真的?]
2016-09-29 17:50:27 60.191.99.129 [假的] [说我们在交往什么的都是假的]
2016-09-29 17:50:36 60.191.99.129 [真的] [虽然我没有确认过]
2016-09-29 17:50:49 60.191.99.129 [动手!] [放心,你会得救的]
2016-09-29 17:51:00 60.191.99.129 [打他] [打!]
2016-09-29 17:51:14 60.191.99.129 [说你呢] [老爷子 您又上街泡妞去]
2016-09-29 17:51:24 60.191.99.129 [上海滩] [它只是让我思考]
好了,看看得了,下面介绍一下我是怎么给小二兔机器人导流的,给您压压惊
统计网站流量情况
通过cnzz统计看了一下最近半个月的受访页面流量情况如下:
从统计数据看出,用户的主要访问还是集中在首页以及各个博客页面,因此要想导流,还是从这些页面下手
增加懒人图库动态按钮
为了吸引用户点击,我打算在每个页面的右下角放置一个动态出现的小图标,页面滚动时它不动,这样用户点了直接跳到想要引流的小二兔页面。于是我上网扒代码,搜了一下客服漂浮代码,发现了懒人图库lrtk的代码,于是做了一些修改,达成了我的目的,我是怎么做的呢?
创建一个js文件,比如叫做lrtk.js,内容如下:
$(function()
{
var tophtml="<a href=\"http://www.shareditor.com/chatbot/\" target=\"_blank\"><div id=\"izl_rmenu\" class=\"izl-rmenu\"><div class=\"btn btn-phone\"></div><div class=\"btn btn-top\"></div></div></a>";
$("#top").html(tophtml);
$("#izl_rmenu").each(function()
{
$(this).find(".btn-phone").mouseenter(function()
{
$(this).find(".phone").fadeIn("fast");
});
$(this).find(".btn-phone").mouseleave(function()
{
$(this).find(".phone").fadeOut("fast");
});
$(this).find(".btn-top").click(function()
{
$("html, body").animate({
"scroll-top":0
},"fast");
});
});
var lastRmenuStatus=false;
$(window).scroll(function()
{
var _top=$(window).scrollTop();
if(_top>=0)
{
$("#izl_rmenu").data("expanded",true);
}
else
{
$("#izl_rmenu").data("expanded",false);
}
if($("#izl_rmenu").data("expanded")!=lastRmenuStatus)
{
lastRmenuStatus=$("#izl_rmenu").data("expanded");
if(lastRmenuStatus)
{
$("#izl_rmenu .btn-top").slideDown();
}
else
{
$("#izl_rmenu .btn-top").slideUp();
}
}
});
});
请尊重原创,转载请注明来源网站www.shareditor.com以及原始链接地址
解释一下,上半部分是定义了id=top的div标签的内容:一个id为izl_rmenu的div,这个div的css格式定义在另一个文件lrtk.css里,如下:
.izl-rmenu{position:fixed;left:85%;bottom:10px;padding-bottom:73px;z-index:999;}
.izl-rmenu .btn{width:72px;height:73px;margin-bottom:1px;cursor:pointer;position:relative;}
.izl-rmenu .btn-top{background:url(http://www.shareditor.com/uploads/media/default/0001/01/thumb_416_default_big.png) 0px 0px no-repeat;background-size: 70px 70px;display:none;}
另外js文件的下半部分是说当页面滚动时这个div才展开
以上代码里有一些***phone之类的内容,是因为我扒的代码是用来显示一个客服按钮的,因为时间的关系没有删干净,不过不影响我们的效果,您可以继续加工整理
最后在我们所有页面的公共代码部分增加这样一句
<div id="top"></div>
OK,大功告成,看下效果:
我们的小二兔图标出来了,点击就会跳到我们的小二兔聊天页面http://www.shareditor.com/chatbot/
小二兔的表现还差强人意,后面我会继续优化算法,逐渐提高它的智商,敬请期待