鼠标
上次更新日期：
2021年4月29日
本文描述了如何使用网站中的自定事件触发动态标签管理 (DTM) 规则。
浏览器事件
事件是网页上出现某些情况的信号。开发人员可以使用这些信号做出响应或采取行动。
可以将事件视为无线电波。无线电波是每个人都能听到的广播，但您必须调整到正确的频率才能听到。如果您发出的广播无人聆听，不会造成任何损害。事件同样如此：您可以触发事件，而如果无人侦听该事件，则该事件不会引发任何错误。您还可以侦听永远不会发生的事件，而不会造成任何问题或引发任何错误。
涵盖 HTML 事件的几个资源：
在 DTM 中使用基于事件的规则
创建基于事件的规则时，您可以针对特定的默认事件来设置该规则。每个浏览器都有一些通过特定操作触发的默认事件，如以下这些常见操作：
- 鼠标单击
- 鼠标移过（悬停于页面的某些内容之上）
- 表单字段聚焦（光标进入表单字段）
- 表单字段模糊（光标离开表单字段）
- 表单提交
这些事件都是有意义的；Web 上每一天都有发生。如果浏览器的默认事件不允许您跟踪想要跟踪的内容，则可以改用 JavaScript 事件。
DTM 中内建了哪些事件？
DTM 基于事件的规则中内建了以下事件：
|
|
键盘 |
论坛 |
HTML 5 视频 |
移动设备 |
其它 |
|---|---|---|---|---|---|
|
click mouseover |
keypress |
focus blur submit change |
ended loadeddata play pause stalled volumechange % complete time complete |
orientationchange zoomchange |
custom enters viewport element exists pushState or hashchange |
自定事件
为了能够侦听事件，您首先必须触发一个事件。事件由开发人员在站点的代码中进行定义。确定何时何地使用事件可能有些复杂。一条简单的经验法则：如果想要跟踪某个内容，但无法使用预定义的 DTM 事件类型进行跟踪，请使用自定事件。
触发事件
请考虑在以下示例中使用自定事件，因为自定事件允许您添加数据。假设您拥有购物车，向购物车添加物品时会使用 AJAX。该操作不会加载新的页面，而是出现弹出窗口或信息，让您知道物品已经添加到购物车。出现这种情况时，您可以创建自定事件，准确告诉您添加到购物车的物品：
var addToCart = new CustomEvent('addToCart', 'detail': {'product_id': data.product.sku, 'quantity': data.product.quantity, 'price': data.product.price.fullPrice});
document.getElementById('minicart').dispatchEvent(addToCart);
以上代码引用了名为“data”的对象中的数据。自定“detail”数据被定义为对象，随后可以在侦听事件时进行引用。构建事件后，您可以在特定元素中触发该事件，在此示例中即页面上 id 为“minicart”的元素。现在，您已经拥有自定事件，可以广播给任何想要侦听的人员。
添加自定事件侦听器
在 DTM 中，添加自定事件侦听器如同添加基于事件的规则一样简单。
以下步骤会在 DTM 中配置一个侦听规则：
-
添加新的基于事件的规则。
-
提供一个名称。
-
选择事件类型自定，然后输入事件名称，该名称在以上示例中被定义为 addToCart。
-
定义将拥有此事件的标签或元素。使用 CSS 选择器，此处为 #minicart。
-
配置触发相应信标的规则。
有疑问？
如果您对本文或任何其他 DTM 主题有疑问，请访问 DTM 社区论坛。您可以通过论坛提出问题、参与讨论或了解每个解决方案的最新信息。
感谢 Disruptive Advertising 的 Adam 允许我们在本文中使用其博客帖子中的部分内容。