本文最后更新于:2024年1月14日 晚上

Umami 升级1.39 版本以后支持站点事件统计数据的展示,本文记录 1.40 版本该功能的使用方法。

简介

1.40 使用方法

升级版本

  • 首先需要升级到 1.39 以后的 Umami 版本
  • docker 的升级方法我 记录了下来

添加类标记

  • 使用简单的 css 标记即可完成 Umami 的事件统计,要启用事件,只需向要跟踪的元素添加一个特殊的 CSS 类。
  • 添加格式如下的类:
1
umami--<event>--<event-name>
  • 例如一个按钮元素,我们想要统计点击事件的话:
1
<button id="signup-button" class="button umami--click--signup-button">Sign up</button>

API 调试

  • 如果想单独调试 Umami 的 Event Tracker 功能,可以单独向 Umami 的地址:端口 发送专门追踪事件的 API 请求
  • 相关文档:https://umami.is/docs/api
  • 核心 API 为 /api/collect,请求类型需要是 POST 请求
  • 如果你的版本是 1.37 以上的 Umami 核心内容名字叫做 event_name
  • 发送报文格式为:
1
2
3
4
5
6
7
8
9
10
11
{
payload: {
website: "your-website-id",
url: "/",
event_name: "click-signup-button",
hostname: "your-hostname",
language: "en-US",
screen: "1920x1080"
},
type: "event"
}
  • 如果是早期版本,格式为:
1
2
3
4
5
6
7
8
9
10
11
12
{
payload: {
website: "your-website-id",
url: "/",
event_type: "click",
event_value: "signup-button",
hostname: "your-hostname",
language: "en-US",
screen: "1920x1080"
},
type: "event"
}
  • 还需要加入带有 User-Agent 的 HTTP Header 才可以
  • 示例代码(In Python):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import requests
import json

root_url = "<your umami IP:port>/api/collect"
header={
"Accept": "*/*",
"Accept-Encoding": "gzip, deflate, br",
"Accept-Language": "zh,en-US;q=0.9,en;q=0.8,zh-TW;q=0.7,zh-CN;q=0.6",
"Connection": "keep-alive",
"Content-Length": "201",
"Content-Type": "application/json",
"Host": "uipv4.zywvvd.com:33030:3000",
"Origin": "https://www.zywvvd.com",
"Referer": "https://www.zywvvd.com/",
"sec-ch-ua": '"Not_A Brand";v="99", "Google Chrome";v="109", "Chromium";v="109"',
"sec-ch-ua-mobile": "?0",
"sec-ch-ua-platform": "Windows",
"Sec-Fetch-Dest": "empty",
"Sec-Fetch-Mode": "cors",
"Sec-Fetch-Site": "cross-site",
"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.0.0 Safari/537.36",
"x-umami-cache": <your token>
}
data = {
'payload': {
"website": <website-uuid>,
"hostname": <your-host-name>,
"screen": "1920x1080",
"language": "zh",
"url": "/",
"event_type": "click-type",
"event_name": "click",
"event_value": "click-Umami"
},
'type': 'event'
}

url = root_url
res = requests.post(url=url, data=json.dumps(data), headers=header)
print(res)
print(json.loads(res.text))

  • 返回代码 200 表示请求成功。

2.+ 版本

新版 umami 将事件追踪的使用方式进行了调整

官方文档:https://umami.is/docs/track-events

需要在点击的元素上加入属性:

1
data-umami-event="{event-name}"

例如按钮:

1
<button id="signup-button" data-umami-event="Signup button">Sign up</button>

参考资料



文章链接:
https://www.zywvvd.com/notes/tools/umami/umami-event-track/umami-event-track/


“觉得不错的话,给点打赏吧 ୧(๑•̀⌄•́๑)૭”

微信二维码

微信支付

支付宝二维码

支付宝支付

Umami Track Event
https://www.zywvvd.com/notes/tools/umami/umami-event-track/umami-event-track/
作者
Yiwei Zhang
发布于
2023年1月31日
许可协议