三十一-把网站流量导向小二兔

自小二兔机器人上线5天以来，接受了来自100多位客官的激情调戏，虽然答非所问驴唇不对马嘴情况经常有，但是我家小二兔的话还是滔滔不绝的，不管你问什么，它总有要说的话，那么对于shareditor这种日均数千流量的网站来说小二兔还想接受更多的调戏，怎么办，我开始导流啦

小二兔漏两招

为了先给各位客官热热身，我们找一段最近小二兔被调戏的场景给各位欣赏一下(日期 时间 ip [用户说的话] [机器人说的话])：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
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，内容如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
$(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();
            }
        }
    });
});

解释一下，上半部分是定义了id=top的div标签的内容：一个id为izl_rmenu的div，这个div的css格式定义在另一个文件lrtk.css里，如下：

1
2
3
.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之类的内容，是因为我扒的代码是用来显示一个客服按钮的，因为时间的关系没有删干净，不过不影响我们的效果，您可以继续加工整理

最后在我们所有页面的公共代码部分增加这样一句

1
<div id="top"></div>

OK，大功告成，看下效果：

我们的小二兔图标出来了，点击就会跳到我们的小二兔聊天页面http://www.shareditor.com/chatbot/

小二兔的表现还差强人意，后面我会继续优化算法，逐渐提高它的智商，敬请期待