本文描述了如何使用网站中的自定事件触发动态标签管理 (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 中配置一个侦听规则:

  1. 添加新的基于事件的规则。

  2. 提供一个名称。

  3. 选择事件类型自定,然后输入事件名称,该名称在以上示例中被定义为 addToCart

    Screen-Shot-2015-07-10-at-12.55.24-PM
  4. 定义将拥有此事件的标签或元素。使用 CSS 选择器,此处为 #minicart

    Screen-Shot-2015-07-10-at-12.56.44-PM
  5. 配置触发相应信标的规则。

有疑问?

如果您对本文或任何其他 DTM 主题有疑问,请访问 DTM 社区论坛。您可以通过论坛提出问题、参与讨论或了解每个解决方案的最新信息。

感谢 Disruptive Advertising 的 Adam 允许我们在本文中使用其博客帖子中的部分内容。

本产品经 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 许可  Twitter™ 与 Facebook 中的内容不在 Creative Commons 的条款约束之下。

法律声明   |   在线隐私策略