四十三、网站优化必备良器：点击事件的上报与统计

最新推荐文章于 2023-01-30 10:32:14 发布

jiangjingxuan

最新推荐文章于 2023-01-30 10:32:14 发布

阅读量1k

点赞数

分类专栏：做一个全栈工程师

做一个全栈工程师专栏收录该内容

47 篇文章 4 订阅

订阅专栏

有这样一个问题：怎么样对网站页面做布局是最优的？光凭站长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：

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

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

jiangjingxuan

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
四十三、网站优化必备良器：点击事件的上报与统计

有这样一个问题：怎么样对网站页面做布局是最优的？光凭站长YY显然是不够的，用户也许对你精心设计的按钮或链接不感兴趣，甚至都没注意到那里竟然还可以点。为了探究用户的行为，有效的做法是在你想了解的地方埋下点击事件触发的上报，本节来介绍如何用简短的几行代码实现点击事件上报和统计请尊重原创，转载请注明来源网站www.shareditor.com以及原始链接地址为什么要做网站优化先来看一下我的网
复制链接

扫一扫