一个用户行为记录工具:UXLens
本文最后更新于 177 天前,其中的信息可能已经有所发展或是发生改变。

简介

博客其实一直是有 Session Recording 功能,也就是可以记录用户的行为,以此来分析页面哪里做的好不好、什么样的内容用户更喜欢。

最开始其实一直用的是 Mouseflow 的服务,但是由于他们的服务器处于国外,资源文件和请求一直是非常慢的,甚至有时候会直接超时失败,直接阻塞了页面的一些加载事件。因此找了许多可以 Session Recording 的可自己部署的应用后,选择了 UXLens(其他应用要不是要求全新服务器或部署复杂,要不是自部署还要收费等)。

效果演示

总体来看,UXLens 的界面还是非常简洁的,功能也不算多。

UXLens 后台
网站统计数据
网站录制列表
用户统计分类
录制播放详情

具体的效果可以到 UXLens 官网体验即时回放功能。

安装使用

前置需求

首先你的服务器需要安装 Docker,并且最好使用域名访问而不是 IP(没测试过 IP 直接访问)。而且也建议使用 HTTPS 访问保证安全(即有对应的 SSL 证书)。

经过我自己的使用体验,这个 Docker 容器内存日常占用在 2000MB 左右,建议低于 2GB 的机器谨慎安装。

创建配置文件

Docker 实例是根据配置文件来完成最初配置的,UXLens 也提供了配置文件模板,一般情况下只需要将文件存储在~/.sessionrecord/config文件。

注:~代表用户文件夹,例如 root 用户通常是 /root,其他用户(如 ubuntu)通常在 /home(如 /home/ubuntu),命令行下直接使用 ~ 就可以代替上述路径。

mkdir ~/.sessionrecord && cd ~/.sessionrecord
curl -o config https://uxlens.com/self-host/config-template
chmod +x config

配置简述

### 以井号开头的行为注释

# 录制数据存储位置的绝对路径(必填,不填或注释掉使用默认值)
# 默认为 <home>/.sessionrecord/data
export RECORDER_DATA='/data/uxlens'

# 使用谷歌认证方式登录,通常情况下不需要配置(非必须)
# 通过这个方式登录的用户邮箱是登录时选择的邮箱
# export GOOGLE_CLIENT_ID='xxxxxx-xxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com'
# export GOOGLE_CLIENT_SECRET='xxxxxxxxxxxxxxxxx'

# 配置为你要使用的站点 URL 链接(非必须)
export SITE_URL='https://recorder.mydomain.com'

# 用于哈希计算,应设置成随机字符串
# 如果你使用命令下载的模板配置文件,这里会是已经设置好了的
export APP_SECRET='9075e6360a01bee319f70b024db26a94ece39cc4205e7694892264818da9ca82'

# 默认生成的,可以不动
export RECORDER_CSD_MAX_HEAP_SIZE='700m'
export RECORDER_ES_MAX_HEAP_SIZE='200m'

# 邮箱配置
# SMTP 服务器配置,格式:'smtps://username:password@smtp.yourmail.com'
# 如读取失败,可以将用户名的 @ 替换为 %40
export SMTP_URL='smtps://admin@some.site:password@smtp.some.site'
# 邮件发送者邮箱
export FROM_EMAIL='admin@some.site'

更完整的配置在 https://uxlens.com/docs/v1/self-hosting/configuration.html

启动/重启实例

如果你是全新 VPS 并且不在乎 UXLens 占用你的 80 和 443 端口,你可以使用官方给出的一键安装方式:

curl https://uxlens.com/self-host/launcher.sh | bash -

安装后根据 https://uxlens.com/docs/v1/self-hosting/https.html 的教程部署 HTTPS。


但是假如你还需要建立其他网站,或者使用 Nginx 等,你可以稍微修改配置文件来达到不占用 80 和 443 端口。

  1. 首先将启动文件保存:
curl -o launcher.sh https://uxlens.com/self-host/launcher.sh
chmod +x launcher.sh
  1. 修改 launcher.sh 文件关于端口的映射:

删除第 45-46 行 80 和 443 端口的映射,改为 -p 127.0.0.1:<本机端口号>:8080 \

  1. 运行 bash launcher.sh 启动 Docker 实例;
  2. 使用 Nginx 完成反向代理:

首先完成网站的基本配置,如监听端口、SSL 配置等(server {…} 那些),然后添加以下转发配置:

location / {
  proxy_pass http://localhost:<刚刚填的端口号>;
  proxy_http_version 1.1;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $remote_addr;
  proxy_set_header X-Forwarded-Proto 'https';
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";
}

如果你是使用宝塔面板,首先正常创建一个网站,然后部署 HTTPS,再在网站的“伪静态”配置中添加这一段配置就 OK。

至此,我们就可以通过 https 来访问我们刚刚建立的程序了。

自己访问页面,并且使用自己的邮箱注册登录激活账户后,你就是站点的管理员了。(如果收不到邮件,说明你的配置文件中关于邮件部分写的有问题,可以把 @ 替换成 %40 试一下)

使用

只需要添加自己的网站进去,并且将 UXLens 生成的追踪代码粘贴到自己网站里就可以等待数据产生了。记得要添加到网站的每一个页面里,才可以对所有页面跟踪。至于配置什么的我就不多介绍了,相信大家都可以摸索明白。

另外需要注意的是,UXLens 其实是需要许可证的,但是对于个人或者开发者这样的非盈利用户可以发邮件联系官方(邮箱:hello@uxlens.com)免费获取许可证,再填入即可使用完整功能。

参考

文章首发于https://blog.orangii.cn/2022/selfhosting-uxlens/,转载请注明出处。博客所有文章遵循CC BY-NC 4.0协议

评论

  1. Windows Edge
    1 年前
    2022-11-20 8:57:28

    你也用上蓝易云了···感觉用它的人好多···

    • 博主
      林林
      Windows Chrome
      1 年前
      2022-11-20 9:03:26

      这次是蓝易云来找到我赞助了SCDN,现在也用了有几天了感觉效果还不错,就一直用着了,毕竟收了赞助嘛帮他们多宣传宣传

      • 橙梓
        Windows Edge
        1 年前
        2022-11-20 9:05:34

        又拍云的免费cdn也有waf防护,插件再装上一个Wordfense基本够安全。

        • 博主
          林林
          Windows Chrome
          1 年前
          2022-11-20 9:08:38

          等下次有机会了试一试,安全的话我自己做的也不少了

  2. Windows Edge
    1 年前
    2022-11-14 19:04:32

    我就说我感觉每次访问你博客你都知道呢

    • 博主
      胖虎同学
      Windows Chrome
      1 年前
      2022-11-14 19:06:47

      嗐我也不会每个都去看的(部署完很少就去动了,还是看分析);大概是邮件看的勤,每次留言回复的快可能感觉就是这样吧

发送评论 编辑评论

|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
橙橙梓
甘城猫猫
颜文字
Emoji
小恐龙
花!
上一篇
下一篇