事件追踪

自 v2.0.0 版本可用

除了页面浏览量，Umami 还能够追踪发生在您网站上的事件。在 Umami 中记录事件有两种方式，使用 data attributes 属性或使用 JavaScript。

限制

• 事件名称限制为 50 个字符。
• 事件数据不能在没有事件名称的情况下发送。

使用数据属性

要启用事件，只需向要追踪的元素添加一个特殊的数据属性。

例如，你可能有一个这样的按钮：

<button id="signup-button">Sign up</button>

按照以下格式添加数据属性：

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

现在，你的按钮元素应该是：

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

当用户点击此按钮时，Umami 会记录一个名为 Signup button 的事件。

你还可以通过 data-umami-event-* 注解传递 事件数据（event_data）。

data-umami-event="Signup button"
data-umami-event-email="[email protected]"
data-umami-event-id="123"

这些附加属性会使记录的事件数据变为 { email: '[email protected]', id: '123' }，事件名称为 Signup button。

注意事项

• 使用此方法时，所有事件数据都会保存为字符串。如果你希望保存数字、日期或布尔值等类型的事件数据，请使用下面的 JavaScript 方法
• 元素内部的其他事件监听器不会被触发

使用 JavaScript

你也可以使用 window.umami 对象手动记录事件。实现与上述数据属性方法相同的效果，可以这样写：

const button = document.getElementById('signup-button');

button.onclick = () => umami.track('Signup 按钮');

在这种情况下，Umami 会记录一个名为 Signup 按钮 的事件。

如果你想记录动态数据，请参阅 追踪器函数。

查看事件

事件记录后，可以在你网站的 事件（Events） 页面查看。

查看事件属性

你保存的自定义数据可以在 事件 页的 属性（Properties） 选项卡中访问。 该部分将展示你保存的所有自定义数据属性以及各个值的分类情况。

筛选

使用筛选面板可按特定属性名称和值缩小事件属性的范围。这样你就可以将分析重点放在特定的一组事件上。

在查看事件页面时，主 筛选面板 中也会显示 事件属性 选项卡。