我如何触发标签时，任何DOM元素匹配CSS选择器被单击?

一个常见的用例是，当单击页面的一个元素时，我们希望触发一个特定的操作。通常这些元素可能没有特定的ID或CSS类，匹配这些元素的唯一方法是使用它们的CSS选择器。

在这个常见问题中，我们将向您展示如何使用Matomo标签管理器来触发一个标签时，一个元素匹配的CSS选择器被单击。当页面的特定元素被单击时，我们将在Matomo中跟踪自定义事件的用例中使用这种技术，在我们的示例中跟踪第一级标题(h1)的单击。

创建触发器

首先，我们创建一个触发器来监听点击并指定CSS选择器:

• 在Matomo标签管理器中点击左侧菜单中的“触发器”。
• 点击“创建一个新触发器”。
• 选择“所有元素单击(当任何元素被单击时触发)”。
• 在本例中，我们将在单击all时触发H1标题元素，因此我们命名触发器点击H1．
• 下“只在何时触发”选择“点击元素匹配CSS选择器”。
• 在文本字段中，输入与元素匹配的CSS选择器。在我们的例子中，我们只需输入h1所以任何点击H1元素都会触发。

注意:还有一个选项“不匹配CSS选择器”。

如何为页面的给定元素找到CSS选择器?

您可以使用web浏览器轻松找到页面中任何元素的CSS选择器。例如，在Firefox中，你可以右键单击元素并选择“Inspect element”。然后在显示DOM树的“Inspector”面板中，右键单击元素并单击“Copy > CSS selector”。然后你可以在Matomo标签管理器的“点击元素匹配CSS选择器”字段中粘贴该值。

创建标签

一旦您创建了触发器，下一步是创建一个标签。

• 在Matomo标签管理器中点击左侧菜单中的“标签”。
• 点击“创建一个新标签”。
• 选择您想要创建的标签，例如“Custom HTML”，“Matomo Analytics”或任何其他标签。亚博ap下载在我们的例子中，我们将使用“Matomo Analy亚博ap下载tics”，因为我们想要在Matomo Analytics中跟踪事件H1标题元素被单击。
• 给标签一个清晰的名称。在我们的例子中，我们给它命名单击H1标题时跟踪事件．
• 在我们的例子中，我们想跟踪自定义事件．在“跟踪类型”下选择事件．
• 接下来我们在Matomo中配置要跟踪的事件:我们将“事件类别”设置为标题“事件动作”为点击．
• 还可以获得所单击元素的值(例如文本值)。在我们的例子中，我们希望跟踪被点击的H1标题的实际文本“Event Name”，因此我们将“Event Name”设置为{{ClickText}}．
• 点击“创建新标签”。

发布标签

• 一旦创建了标记，下一步就是发布更改。点击左边菜单中的“发布”。
• 命名版本并点击“创建新版本并发布版本”。

现在，无论何时访问者点击页面中的任何H1标题，都将在Matomo中跟踪事件。这只是一个示例，您可以通过更改点击触发器将被激活的CSS选择器来适应您自己的用例。亚博技术支持 专业的彩票系统平台

例子中“创建一个新标签”页面的截图: