跟踪事件让您可以测量访问者在您网站上执行的特定操作，例如点击按钮、提交表单或您关心的任何其他交互。

自动跟踪的内容

Ahrefs Web Analytics 自动跟踪以下事件：

出站链接点击 – 当用户点击包含有效 href 且指向项目范围外的链接时触发，除非调用了 event.preventDefault()。
表单提交 – 当包含有效 action 的表单被提交时触发，除非调用了 event.preventDefault()。

这些事件不需要任何设置，默认会出现在您的报告中。您还可以添加自己的跟踪事件来测量对您网站重要的其他特定操作。

跟踪事件的类型

您可以跟踪两种类型的事件：

页面浏览事件 – 当有人访问特定页面时触发，例如感谢页面或结账页面。
自定义事件 – 当有人与您网站上的元素互动时触发，例如点击按钮、提交表单或打开模态框。

页面浏览事件

页面浏览事件非常适合用于追踪关键页面的访问，例如确认页或成功页。如果你的网站为已完成的操作设置了专用 URL，例如 /thank-you 或 /checkout/success，你可以将这些 URL 设置为要追踪的事件。

要设置页面浏览事件：

打开您项目的 Web Analytics 报告。
滚动到跟踪事件部分并点击新建事件。
选择页面浏览作为类型，并输入您要跟踪的确切页面路径。
为事件命名以便于识别，然后点击创建。

自定义事件

自定义事件适合用于追踪按钮点击、表单提交等不会加载新页面的互动行为。你可以通过在 HTML 中添加特殊类名来配置它们。

最简单的设置方式是在 HTML 中添加一个格式为 AhrefsAnalytics-event-EventName 的类名。

例子:

<a class="AhrefsAnalytics-event-signup" href="#">Sign up</a>

这会在链接被点击时追踪一个名为 signup 的事件。

表单也同样适用：

<form class="AhrefsAnalytics-event-signup" action="/submit">
  ...
</form>

提交表单时，会触发一个名为 signup 的自定义事件。

若要在报告中查看该自定义事件，你还需要先将其添加到报告中：

打开您项目的 Web Analytics 报告。
滚动到跟踪事件部分并点击新建事件。
选择自定义事件作为类型，并输入您在 HTML 中使用的确切事件名称。
为事件命名以便于识别，然后点击创建。

通过 JavaScript 触发自定义事件

若要进行更精准的追踪，你可以使用 JavaScript 发送自定义事件。这样你就可以更灵活地控制事件的触发时机

以下代码片段演示了如何实现：

if (window.AhrefsAnalytics != null) {
  window.AhrefsAnalytics.sendEvent('signup');
}

事件属性（可选）

事件属性可为所追踪的事件附加额外详细信息。
当你希望按不同变体、套餐或其他维度来拆分同一个事件时，它们会很有用。

例子:

一个带有属性（如 plan = standard、duration = monthly）的 signup 事件
一个带有属性（如 button = header、variant = B）的 cta_click 事件
一个带有属性（如 category = shoes、size = 42）的 purchase 事件

稍后你将在“事件属性”报告中看到这些属性。

注意：属性名称和值会被当作字符串处理。使用下文所示的 HTML 属性或 class 名称时，属性名称不能包含短横线（-），因为短横线会用作分隔符。

如何附加事件属性

有三种方式可以为事件附加属性：

通过追踪脚本为每个事件添加属性。
通过 CSS 类为单个自定义事件添加属性。
通过 JavaScript（JS API）添加属性。

1. 为每个事件附加属性（追踪脚本）

你可以通过在追踪用的 <script> 标签上添加 data-prop-NAME="VALUE" 属性，将属性附加到所有事件：

<script
  src="https://analytics.ahrefs.com/analytics.js"
  data-key="YOUR_DATA_KEY"
  data-prop-plan="standard"
  data-prop-duration="monthly">
</script>

这会将 plan = "standard" 和 duration = "monthly" 添加到从此页面发送的每个事件中。

注意：NAME 不能包含短横线（-）。

2. 为单个自定义事件附加属性（CSS 类）

你可以在触发该事件的元素上使用特殊的 CSS 类名，为特定的自定义事件附加属性。

示例：一个按钮会触发带有 plan 属性的 signup 事件：

<div
  class="
    AhrefsAnalytics-event-signup
    AhrefsAnalytics-prop-plan-standard
  ">
  Sign up for Standard
</div>

其中：

AhrefsAnalytics-event-signup 会告诉 Ahrefs Web Analytics 脚本在该元素被点击时发送一个 signup 事件。
AhrefsAnalytics-prop-plan-standard 仅为此事件添加属性 plan = "standard"。

注意：AhrefsAnalytics-prop-… 中的属性名称同样不能包含短横线（-）。

3. 通过 JavaScript 附加属性（JS API）

如果你是通过 JavaScript 触发事件的，可以通过将一个对象作为第二个参数传给 sendEvent 来附加属性：

if (window.AhrefsAnalytics != null) {
  window.AhrefsAnalytics.sendEvent(
    'signup',
    {
      props: {
        plan: 'standard',
        duration: 'monthly'
      }
    }
  );
}

如果你需要根据应用的状态（如登录用户、A/B 测试变体等）来设置属性，这是最灵活的选项。

在报告中使用事件属性

事件属性不会自动显示。当你开始发送事件属性后，需要将它们添加到报告中。

事件属性报告

当你需要按属性值进行细分时，请使用此选项。

打开该项目的 Web Analytics 报告。
前往事件属性报告。
点击 新建属性。
选择事件属性，为其命名，然后点击创建。

这样，你就可以按各个属性值查看细分后的访客和事件，例如按套餐、按钮变体或国家/地区细分的注册量。

按事件属性筛选

你还可以使用事件属性对其他报告进行细分。

点击 添加筛选条件，然后选择 事件属性。
选择要筛选的属性和值（可多选）。

这样，你就可以将任意报告筛选到特定范围，例如 plan is standard 或 variant is B。你可以添加多个属性筛选条件，进一步细化细分结果。

Ahrefs Web Analytics 中的跟踪事件