Smartlook是一款在网站和移动应用程序中记录用户行为的工具。类似Google Analytics或国内的友盟和百度统计，但它更侧重于以直观的录像视频方式，可以让你在很短的时间内快速发现有用的信息，以帮助你改善产品用户体验和提高用户转化。

这一系列内容翻译自他们的官方教程Smartlook School：https://www.smartlook.com/blog/category/smartlook-school/

更多产品相关信息请参见官方网站：https://www.smartlook.com/

---

现在你可以使用Smartlook跟踪用户事件，因此很容易收集有关用户如何与产品或网站交互的数据。但是有多少访问者正在使用你的特定功能呢？在本课程中，你将学习如何使用网站上元素的CSS选择器（CSS selector）来有选择地设置事件。

如何通过CSS选择器设置事件？

你可以有两种方法来通过CSS选择器设置事件：

• 使用我们的事件选择器（Event Picker）
• 手动粘贴元素的CSS选择器

首先，什么是CSS选择器？

你的网站是使用HTML构建的，HTML生成了各种功能区块（HTML元素，例如图像、文本块、标题文字、导航栏、按钮等）。它也是用CSS构建的，CSS定义页面布局（样式）的视觉外观。

在CSS中，选择器用于定位我们要设置样式的页面上的HTML元素。为了应用样式，将CSS选择器设置为相应HTML元素的属性。以下是CSS选择器的外观：

#sign-up-panel > div > div.button-with-note > a

为什么要用CSS选择器设置事件？

你可以轻松地设置一个点击事件来跟踪带有特定文本的超链接或按钮的点击。但是，如果你有一个多语言网站，其中一个按钮由于翻译问题而有不同的文本，或者你希望检查无文本元素的事件，例如只有一个图标的按钮，那么你就需要使用CSS选择器来选择页面上要跟踪的任何元素。

使用事件选择器设置事件

使用我们的事件选择器来检测您要在其上跟踪点击活动的元素的CSS选择器。

在事件管理器上点击“Pick event On Page”按钮。

插入要从中选择事件的页面的URL。

在页面上，你将看到一个弹出窗口，你可以单击该窗口以启用选择器。

随时随地选择你要跟踪的元素并设置事件。

你可以调整选择器的精度。通过这种方式，你可以捕获对具有公共CSS属性的元素的点击。

手动粘贴元素的CSS选择器

如何获取元素的CSS选择器

如果你使用Google Chrome浏览器，则只需右键单击按钮或元素（图注1），然后选择Inspect（图注2）。

这将打开浏览器的开发者工具，并突出显示特定的元素。右键单击该元素（图注1）并选择“Copy”（图注2），然后选择“Copy selector”（图注3）。

按钮的CSS选择器现在被复制到剪贴板。现在，你可以将其粘贴到事件设置窗口（图注1），命名该事件（图注2），还可以对其进行分类（图注3）。最后通过保存事件（4）完成整个过程，你就可以开始了！

更好的是，你将立即看到数据！

无法使用CSS选择器跟踪事件？

有时，你要跟踪的按钮具有重复的选择器，或者您需要跟踪一个模态弹出窗口。 在这种情况下，请使用我们的API设置你自己的自定义事件。

---

在本课程中，你学习了如何：

• 使用CSS选择器有选择地跟踪点击的事件
• 使用事件选择器设置事件
• 获取页面上元素的CSS选择器
• 通过CSS选择器定义Smartlook中的事件来设置

现在轮到你了，使用CSS选择器使事件跟踪更具体。 你通过其CSS选择器跟踪哪种事件？ 请在评论中告诉我们。

想要继续学习？请浏览第7课：定性分析的漏斗