展现数据流动的利器——桑基图,现在FrontJS中也能看到

数据的流入和流出渠道一直是网站所有者以及运营人员十分关注的指标。你的用户“从哪来”,又从你的页面流向了哪里,对于这种流动的数据,桑基图就能帮你捋清它们的来龙去脉!

  • 什么是桑基图:一目了然展示数据流动

桑基图(Sankey Diagram)主要由边、流量和节点组成,其中边代表了流动的数据,数值代表了流动数据的具体数值,节点代表了不同分类。边的宽度与流量成比例地显示,边越宽,数值越大。

桑基图有一个很大的特点,即能量守恒。也就是说,桑基图在描述一组数据到另一组数据的流向的同时,还能展示到底「流」了多少。数据从开始到结束,总量都能保持不变。

在近几次的更新中,FrontJS 技术团队一直着眼于数据的可视化表达,旨在提升网页开发者的工作效率,同时提供数据支撑。桑基图通常用于可视化能源或成本转移,也帮助我们确定各部分流量在总体中的大概占比情况。

值得一提的是,除了Web端以外,FrontJS的桑基图功能同样支持微信小程序!作为小程序开发者的你一定不要错过这个黑科技,在小程序用户越来越多的今天,是时候通过关注页面流向好好地把小程序运营起来了!

小程序开发者可以通过FrontJS中「性能与访问」栏里的「页面访问」中找到某一页面的流量来源与流向。页面中的桑基图会以选定的页面为中心节点,展示出向上向下两级页面的流向构成

从上图可以看出,即使流动的数据很多,但是桑基图能利用不同颜色很好地把不同的分类数据区分开来。不同的支点就像发带一样,把多如发丝的边按照流向 “束”起来。大量数据经过不同的支点再分类后重新出发,流向下一个分类。一张图即可表达所有信息,易读性强。

想不想体验一下桑基图的魅力呢?点击这里查看Demo吧!如果你想要看看自己的小程序和网站的桑基图,那就快来FrontJS注册吧,注册即享受10天专业版的免费使用。

 

功能更新 | 地域分布图表功能上线!

这次的新功能可以说是真“新鲜出炉”了!首页的「概览」中新增了「独立访客」与「国家和地区」两个板块。

独立访客数量(UV)是网站流量分析中十分重要的指标,不仅对运营人员来说是每天都要关注的数据,对网站开发者或是PM而言同样重要。我们在听取了用户建议后,决定将「独立访客」数据单独展示在“概览”中,当日的访客数量一目了然。

同时,想关注当日或历史日活数据,只需在日报中点击对应日期查看即可。👇

另外,在「趋势」栏中,可以看到近两周的页面访问与日活的趋势,是不是很贴心?

接下来聊聊“版图”这件事儿。

FrontJS新增了超酷的地域分布图表功能,在「概览」「性能」以及「日报」中可以找到。增添了这个功能之后,一切都变得简单直观了起来。

值得一提的是,除了当日的独立访问量,同样可以看到当日访客的分布地图,颜色越深代表当日访客量越多。

对于网站开发者来说,看着自己的产品“版图”日益扩张,在这个世界的每个角落留下痕迹,内心想必是澎湃且激动的吧!

在性能栏的「网络请求」页中,可以观测到下载时长的地区分布图,通过颜色的深浅表示网络请求的时长,颜色越深,请求时间越长。

「资源加载」页新增资源加载时长地区分布图,同样的,颜色越深的地区表示资源加载用时越长。

「页面加载」页新增页面加载时长地区分布图,颜色越深的地区表示页面加载用时越长。

地域分布图标功能上线了之后,数据监控变得更加简明清晰,大大节省了用户小伙伴获得数据的时间。「为用户设计」一直是我们设计产品时追求的核心目标,提升产品的可用性也是我们一直在做的事。快来试试新功能吧 👉 https://www.frontjs.com/

轻松玩转数据,看 FrontJS 可视化工具带来的新惊喜

FrontJS 正式上线已经有一些时间了,这个伴随着 Tracup 成长起来的产品虽然年轻,功能却很全面。希望FrontJS 能成为大家维护网站,优化产品的一大利器。今天就来说说FrontJS里的可视化工具。

这个工具可以用来做什么呢?

它主要是对 frontJS 通过网站监控收集来的整体数据通过筛选和过滤后细分展示,让大家可以从庞杂的数据中,根据自己的业务逻辑所需对数据进行重新组合,来满足自己更精细化的工作需求

如何「玩转」可视化工具?

进入 FrontJS 后,在任意一个项目内,点击倒数第二个图标,即可进入可视化工具页面。

可视化工具详情

在左边,我们提供了 5 个展示分类,分别为「访客屏幕精细度分布」、「浏览器类型与页面完全加载时间」、「Windows 操作系统分布」、「最受欢迎页面」以及「页面访问量」。

以「访客屏幕精细度分布」为例,由右方的图表显示我们可以清晰看出,网站访问用户使用的设备屏幕分辨率的具体数据分布,由此可作为前端或设计在贴图、维护考虑分辨率等的参考。

其他 4 个展示分类依次类同。

自己如何定制数据报表?

前面说了,可视化工具,主要是在庞大的数据体系中挖掘并过滤、筛选出有用的数据,以图表形式来清晰展示,以便工作所需。

除过以上 5 类,用户也可自己添加想要的「可视化模板」,点击上部可视化模板右方「添加」,通过对过滤器、指标数据、水平数据等的设置,来对数据进行重新筛选、排列,定制化想要的数据报表。

可视化模板详情

如果你也想通过 FrontJS 更好维护网站?也想通过可视化工具定制数据报表便于工作?这就来 FrontJS 体验一把吧。

FrontJS上线Source Map功能,帮你更有针对性的解决问题

即日起,FrontJS 支持 Source Map 功能。

Source Map 即源码映射,如文件包含源码, 则FrontJS 会主动显示源码,可在项目设置中进行管理。

如何生成 Source Map?

  • 对于不同的前端打包工具, 打开 Source Map 支持的方式是不一样的。

如果在创建项目时使用前端脚手架工具, 那么生成 Source Map 是默认打开的, 生成的 Source Map 默认会与打包好的 JS 脚本文件存放在同一个目录下。
如果在项目在创建时没有使用脚手架工具, 那么则需要手动打开生成 Source Map 的选项, 具体操作需要参照构建工具的文档。

以下是一些常见的构建工具打开生成 Source Map 选项的配置方法:

如何生成包含完整信息的Source Map?

如果 FrontJS 堆栈信息中出现 您的 Source Map 文件不完整 的提示, 说明您上传的 Source Map 文件中没有嵌入源码, 您可以忽略这条提示, 直接按照 Source Map 解析结果去定位您的错误即可, 如果您确实需要堆栈信息中显示源文件而不是混缩的文件, 您需要在 Source Map 生成的过程中嵌入源代码, 则需要打开源码嵌入。
对于不同的前端打包工具, 嵌入源码的设置也不一样, 具体需要参照构建工具的文档。

以下是一些常见的构建工具打开生成 Source Map 选项的配置方法: