• 页面点击分析工具设计与实现

  • 发表时间:2018-07-12 17:08 | 秀站网 | 点击数:
  • 熟悉Google analytics的朋友都知道里面集成了一个:网页内分析(In-Page Analytics) 工具,用于可视化的查看指定页面的链接点击分布,当以可视化方式查看时,可以通过点击页面链接,依次查看各个页面的点击分布。

    详细的介绍和使用可以看这几篇文章:

    Google Analytics热力图—网页详情分析

    网站首页点击分布分析

    了解网站页面的点击情况

    Google analytics的可视化分析,其实是根据页面点击的引用页(Referer)来统计的,即当前页,点击的目标页面都要正确的部署ga的脚本,这也可以解释为什么Google analytics的分析:

    1、无法区分跳转到外站的链接点击

    2、无法区分指向同一页面地址的不同位置的链接的点击数(如同一篇文章有标题链接,和图片链接,这时Google analytics是无法区分用户到底是点标题还是点图片链接的)

    另外Google analytics虽然支持细分,筛选,和按日期范围查看,但对于普通用户来讲有些复杂,不一定知道如何操作。

    因此自己设计和实现页面点击分析工具除了要解决这儿的2个问题外,还希望在可用性上有所提高,让产品,设计,测试人员也可以方便的查看各个页面的点击情况。

    自己设计和实现页面点击分析工具需要按:

    1、用户来源(站点推荐,搜索引擎)

    2、新老访客

    来区分点击。

    如果是站点推荐,可以查看具体的推荐页面地址,如果是搜索引擎,可以看具体的关键字。

    新老访客,则按页面地址而不是全站来区分,可以区分用户第一次看到指定页面,和第二天访问该页面的点击情况,这样的好处是可以分析用户第一次看的你的:广告,专题页时,最本能的点击情况。

    介绍一下基本的点击统计:

    1、在我们的设计里,为每个链接绑定js点击事件,每次点击时,提交一条数据到服务器,这样就可以区分跳到外站的链接了。

    2、在我们的设计里,每个链接的点击,除了记录链接地址外,还会记录链接的所在div容器信息。

    假设有以下的页面结构:

    <div>

    <a href="/tool-for-web-analytics/page-click-analysis/">了解网站页面的点击情况</a>

    </div>

    <div>

    <a href="/tool-for-web-analytics/page-click-analysis/">

    <image src=http://www.fy1826.com/uploads/allimg/180712/1FTcB4_1.png />

    </a>

    有时候我们需要了解网站页面中各链接的点击情况,尤其是网站的首页和一些中间页,这对网站的内容编排、用户体验优化都能起到很好的指导作用。

    </div>

    点标题链接时,记录:

    /tool-for-web-analytics/page-click-analysis/ | a_div.title

    点图片链接时,记录:

    /tool-for-web-analytics/page-click-analysis/ | a_div.detail

    这样就可以区分指向同一地址,但位置不同的链接了,具体的实现比这儿介绍的要复杂些,但基本的思路是这样的。

    介绍一下如何区分用户来源:

    常见的用户来源有:直接流量,站点推荐,搜索引擎。

    而每次访问时,可以用js读到访问页的Referer,即引用页地址。

    如果引用页为空,或为本站点的上一个页面地址,即为:直接流量。

    如果引用页为其他站点(朋友的站点推荐,别人的文章引用),即为站点推荐。

    如果引用页为:,,这时即为:搜索引擎,同时通过分析这儿的页面地址:

    ?wd=joegh网站分析 还可以获取用户的查询关键字,看到用户查询了哪些关键字来到了你的站点。

    介绍一下如何区分新老访客:

    因为要区分用户是否为第一次查看指定页面,这时要在服务器端记录用户的点击明细,如果:

    1、之前没有在指定页面发生过点击

    2 、或距离上次在指定页面的点击时间少于1天

    则认为是新访客点击,否则作为老访客。

    好了,基本的设计和思路就是这样,至于如何做的像Google analytics的可视化那样漂亮,其实并不是太难(提示一下:每个黄色的小链接其实是个浮动的div),也不是我们这篇文章的重点,或许可以在下一篇文章里介绍:

    总结:

    1、通过改变数据记录的方式,来记录外站链接点击。

    2、通过链接的相关信息,来区分链接点击。

    3、页面点击分析工具不一定要大而全,方便实用就好。

    通过自己开发的:页面点击分析工具,已经在我们的日常工作中发挥作用了,设计师,产品经理会先看看页面点击,再决定设计时,如何更好的布局,导航,而不是过去的凭感觉 :)

    用朋友的站点页面做测试,下午的点击数据 :)

    文章来源:同一屋檐下

分享到:
  • 上一篇:了解网站页面的点击情况(续) 下一篇:网站更换服务器需注意的五步骤
  • 相关 明星娱乐 资讯
    精彩图库
    • 爱美
    • 健康
    • 情感
    • 美体