QuickMaster站点分析平台技术调研

简介

项目目前思路包含:

  1. 运营体检:贴合跨境电商业务的独立站点分析
  2. 速度体检:站点性能分析

Target

Shopify电商独立站点的监控服务。

行业分析

Lucky Orange Heatmaps & Replay

网站分析其实并不难。如果您想有一个和谷歌分析一样强大又简单易用的工具,Shopify Plus认证的应用程序Lucky Orange 是最佳选择。只需一键安装,您今天就可以增加在线销售额。在Shopify平台,已有超过30万个网站信任我们,以防止购物车废弃,提高客户转换率。

无论您是使用Loox、PageFly和Omnisend等顶级应用程序的经验丰富的商人,还是刚刚起步创业的新手,Lucky Orange都可以帮助您更好地了解您的访客,从而提高销售额。了解您的店铺中访客的行迹是至关重要的;这是增加销售额的最好方法之一。

会话记录和热图反映出访客在您的网站上点击、滚动和点选的位置。您可以通过会话回放深入了解一个人的行迹,也可以通过查看热图来了解客户具体来源,如Facebook、Instagram或Google PPC,以此得知哪些来源的流量最多。

即时聊天和访客的实时视图组成的强大组合可以防止购物车废弃。如果您看到有人正犹豫不决,您可以使用即时聊天(因为没有人想和聊天机器人 "交谈"),询问是否可以帮助找到访客需要的东西或回答访客的问题。公告也允许您创建一个增加销售机会的弹出式窗口,向客户提供折扣或要求产品评论。

无论您是专注于B2B还是D2C,我们都想更多地了解我们的客户。通过调查,您可以询问他们的喜好、在线体验或关于库存的一些建议。运用有时限性的触发器,在正确的时间用调查来吸引购物者。

了解店铺的可行性固然重要,但更重要的是了解店铺的不可行性。转换漏斗能让您快速看到哪些页面正在转换,哪些页面导致访客放弃您的网站。分析表单以监测关键的指标,如放弃率、字段顺序和时间,以便开始寻找区域,来降低这些表单的跳出率。

我们也知道您有一个很长的待办事项清单(如简化电子邮件营销活动和制作出色的登陆页面),因此您没有多余的时间浪费在登录多个不同的应用程序来查看您的店铺表现。我们的实时、可定制的仪表板可以快速为您呈现最有意义的分析,例如在您一天中最繁忙的时间里,可以查看推动最多流量的来源或您的转换漏斗的执行情况。再加上我们强大的细分和过滤功能,可以让您快速发现关键信息,如疯狂点击量或公告的浏览情况,从而将范围缩小到特定类型的访客,您将很快发现提升转化率的信息。

Countly

简介

Countly是一个开源的企业级分析平台,专为所有类型的设备和平台(包括Web)而构建。当您添加应用程序并选择"web"时,Countly与其他几个跨设备分析平台不同,会自动安排和重新设计其用户界面,以强调与Web分析相关的菜单和小部件。Countly Community Edition源代码可通过GitHub免费获得,Countly Enterprise Edition可通过订阅获得,可从Countly购买。

Countly网站分析在数千个网页上得到了很多成功。Countly的独特之处在于,由于它可以安装在您的场所(例如,作为自托管网络分析),您可以完全控制您的数据。特别是在银行,金融,电信和医疗保健等高度监管的领域,保护个人身份信息数据的需求比以往任何时候都更加重要。相反,凭借其开放性,保留您的隐私和安全性,同时提供最广泛的网络分析功能。

技术原理

与大多数其他网络分析平台一样,Countly有一个跟踪器(一个Javascript文件)。此跟踪器在您的网页加载时,会开始向您的Countly服务器发送用户,会话,错误等信息,并在其中进行可视化和报告。此数据使用MongoDB存储,可以随时提取以进行进一步分析和报告。

Matomo

百度统计

产品形态

技术痛点

梗概

数据收集、上报、监控分析

数据采集

网络情况

http测速

通过http访问的外部接口的成功率、耗时情况

用户行为数据

PV/UV、访问来路、路由跳转

生命周期数据

performance.timing(该特性已经从 Web 标准中删除)

为了解决当前性能测试的困难,W3C推出了一套性能API标准,各种浏览器对这套标准的支持如今也逐渐成熟起来。这套API的目的是简化开发者对网站性能进行精确分析与控制的过程,方便开发者采取手段提高web性能,目前IE9以上的浏览器都支持。

MutationObserver

MutationObserver 接口提供了监视对 DOM 树所做更改的能力。它被设计为旧的 Mutation Events 功能的替代品,该功能是 DOM3 Events 规范的一部分。

异常

window.onerror

document.addEventListener(error)

XMLHttpRequest status

埋点方式

侵入代码埋点

手动编码,适用于高度自定义、难以自动化埋点的场景。

可视化埋点

可视化圈选,较难自定义,需要处理配置层,适用UI通用数据埋点。

无痕埋点(期望)

站点嵌入SDK,难以自定义,适用于通用页面生命周期数据埋点。

期望无需站点项目中侵入代码,即可自动在平台上浏览统计信息,且针对特定业务场景分析。

前端埋点SDK

标准化埋点数据

如何制定上报数据格式

lua 复制代码
{
  id: '统计标识',
  module: '模块',
  action: '操作行为',
  time: '',
  version: '',
}

数据上报

Beacon API

后期可以考虑更优雅的上报方式,如:

  1. 定期/定量上报:设定日志阈值;在浏览器本地收集,一定条件后提交到服务器
  2. 关键生命周期上报:页面关闭时,部分上报未完成的情况
  3. 用户上报:引导用户主动上报
  4. 后台索取上报:服务端主动获取想要的信息
  5. 分版本上报:分析站点版本的转化率等

拓展

从面对个体、面对群体两唯独做更多的考量和技术探索。

相关推荐
中微子9 分钟前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上102424 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y40 分钟前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁1 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry1 小时前
Fetch 笔记
前端·javascript
拾光拾趣录1 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟1 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan1 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson1 小时前
青苔漫染待客迟
前端·设计模式·架构
写不出来就跑路1 小时前
基于 Vue 3 的智能聊天界面实现:从 UI 到流式响应全解析
前端·vue.js·ui