事件追踪

除了页面浏览，Umami 还能够追踪发生在你网站上的事件。Umami 有两种方式来记录事件，可以通过 数据属性（data attributes） 或使用 JavaScript。

限制

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

使用数据属性

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

例如，你可能有一个按钮，代码如下：

<button id="signup-button">注册</button>

添加以下格式的数据属性：

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

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

<button id="signup-button" data-umami-event="Signup button">注册</button>

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

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

data-umami-event="Signup button"
data-umami-event-email="bob@aol.com"
data-umami-event-id="123"

这些额外的属性会导致记录的事件数据为 { email: 'bob@aol.com', id: '123' }，事件名称为 Signup button。

注意事项

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

使用 JavaScript

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

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

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

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

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

查看事件

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

查看事件属性

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