SharEDITor

教你成为全栈工程师(Full Stack Developer) 四十三-网站优化必备良器:点击事件的上报与统计

全栈技术 教你成为全栈工程师(Full Stack Developer) 发表于 2016-07-11 16:41:03 阅读1360次


有这样一个问题:怎么样对网站页面做布局是最优的?光凭站长YY显然是不够的,用户也许对你精心设计的按钮或链接不感兴趣,甚至都没注意到那里竟然还可以点。为了探究用户的行为,有效的做法是在你想了解的地方埋下点击事件触发的上报,本节来介绍如何用简短的几行代码实现点击事件上报和统计

请尊重原创,转载请注明来源网站www.shareditor.com以及原始链接地址

为什么要做网站优化

先来看一下我的网站当前的页面:

 

在这个页面中除了正文部分,还有一些链接是希望能够带来用户点击的,比如顶部的github和weibo链接,还有底部的最新文章和最热文章,但是我设计在顶部和底部,而不是设计在正文左侧和右侧,完全是因为我觉得这样好看,然而用户会不会点击我并不清楚,所以我需要埋下点击事件来监控用户的行为,来判断我这样的设计是不是最优的

 

为什么要通过事件上报而不是访问日志

访问日志我们是不清楚用户是点击哪里的链接,即使有referrer字段也无法判断细节,因此我们通过js的点击事件来上报。这样做还有一个好处,就是可以排除掉爬虫的足迹,因为爬虫为了降低成本,一般不会渲染js,也就不会触发点击上报事件。

 

利用cnzz做事件上报和统计

自己实现上报事件需要做的事情包括:定接口、埋js、配置http服务、开发自动统计和可视化等。这一系列工作cnzz已经帮我们实现了大部分了,智者当借力而行,推荐直接用cnzz,当然也有很多其他类似的工具可以选择

cnzz的事件上报文档见http://open.cnzz.com/a/new/trackevent/

首先注册账号添加站点,然后在你要添加事件上报的页面中(可以统一放到模板中)的<head>标签里的地方添加如下代码(这里和官方文档的描述有些不同,因为按照官方文档的方法你页面上总会出现一个跳到cnzz的一个链接):

<script type="text/javascript">
    var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
    var _czc = _czc || [];
    _czc.push(["_setAccount", "*******"]);
</script>

这里的******替换成你在siteid(可以在你的页面统计代码里找到)

然后在你想上报点击事件的标签里添加如下属性:

onclick="_czc.push(['_trackEvent', category,action,label,value,nodeid);"

比如我埋在github和微博点击事件的代码如下:

<div class="fa fa-github" style="margin-top: 40px; margin-left: 20px;">
    <a href="https://github.com/warmheartli" style="color: white;"
       onclick="_czc.push(['_trackEvent', 'github链接', '点击']);"
    >
        github
    </a>
</div>

<div class="fa fa-weibo" style="margin-top: 40px; margin-left: 20px;">
    <a href="http://weibo.com/chuangwanglaile" style="color: white;"
       onclick="_czc.push(['_trackEvent', 'weibo链接', '点击']);"
    >
        weibo
    </a>
</div>

请尊重原创,转载请注明来源网站www.shareditor.com以及原始链接地址

我在底部“最新文章”和“最热文章”中也埋下了:

<div class="row" style="margin: 10px;margin-left: 0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
    <span style="color: #959595;">({{ article.createDate }})</span>
    <a title="{{ article.title }}" style="color: #959595;"
       href="{{ path('blog_show', {'blogId':article.id}) }}"
       onclick="_czc.push(['_trackEvent', '最新文章', '点击', '{{ article.title }}']);"
    >{{ article.title }}</a>
</div>



<div class="row" style="margin: 10px;margin-left: 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
    <span style="color: #FFFFFF; background-color: #AAAAAA; border-radius: 12px;padding-left: 5px;padding-right: 5px;">{{ article.pv }}</span>
    <a title="{{ article.title }}" style="color: #959595;"
       href="{{ path('blog_show', {'blogId':article.id}) }}"
       onclick="_czc.push(['_trackEvent', '最热文章', '点击', '{{ article.title }}']);"
    >{{ article.title }}</a>
</div>

 

以上完成后可以在cnzz后台看到页面上的点击事件统计效果:

我们还可以看点击事件发生的url:

 

还可以看每次点击发生在什么操作系统下:

 

总之,无论是什么点击上报的第三方服务,基本都能覆盖我们想做的各种基础性统计,当然如果想要做更深层次的分析,还需要你自己按照自己的业务逻辑来做进一步挖掘分析