Show Menu
主题×

为基于事件的规则创建条件

这些条件决定了何时触发基于事件的规则。
  1. 选择您要跟踪的交互类型,例如鼠标点击或表单提交。
    For more information, see Event Types .
  2. 根据需要启用以下选项:
    元素
    描述
    延迟链接激活
    在事件激活链接且希望链接延迟至事件有时间触发时启用。
    将事件处理程序直接应用于元素
    将事件处理程序应用于特定目标元素。此设置绑定到浏览器中的事件冒泡和分层概念。
    For example, when you click an image inside an anchor tag like <a href="abc.html"><img src="xyz.png"/></a> , you might expect the click to be associated with the anchor tag, because the tag is in the bubble stream. However, when you inspect the click in the developer tools, the click may actually affect only the <img> tag. To ensure that the event is handled correctly, associate the click with the <img> tag and do not depend on the browser to bubble up the click to a parent element. An event like a click can potentially bubble up to <body> . 请务必了解事件绑定的实际位置,并专门将其确定为目标,以确保规则正确触发。
    事件冒泡 ​是指事件首先由最内部的元素捕获和处理,然后被传播到外部元素。
  3. 指示您希望跟踪的标记的名称,以及您希望匹配的其他标记属性。
    See Using the CSS Selector for information about finding the correct element tag.
  4. 选择并设置您希望绑定到规则的任何其他标准或条件类型。
  5. 指示与事件冒泡相关的首选项。
    事件冒泡是 HTML DOM 中的一种事件传播方式。
    故障
    解决方案
    希望已识别的规则选择器子元素中的相关交互触发规则。
    允许子元素中的事件冒泡。
    希望在子元素已触发其自身的事件时阻止事件冒泡。
    在子元素已触发事件时不允许这么做。
    不希望已识别的规则选择器事件超出事件层级中的元素本身。
    不允许事件向上冒泡至父元素。

Event types

内建事件类型列表及每个类型的定义。
类别
事件
定义
鼠标
click
在元素上按下并释放指针设备按钮。
mouseover
将指针设备移动到附加有侦听程序的元素或其子元素上。
键盘
keypress
按下某个键,该键通常会产生一个字符值(使用输入)。
表单
focus
元素获得焦点(不会产生气泡)。
blur
元素失去焦点(不会产生气泡)。
submit
提交表单。
change
元素失去焦点,并且其值自获得焦点后发生了更改。
HMTL5 视频
ended
播放已停止,因为已达到媒体的结束位置。
loadeddata
媒体的第一帧已完成加载。
play
开始播放。
pause
暂停播放。
stalled
用户代理尝试获取媒体数据,但数据意外没有出现。
volumechange
音量发生变化。
% 完成
达到总播放时间的指定百分比时引发事件。例如,输入 10% 表示仅在播放到视频总时长的 10% 时触发此规则。
time complete
达到播放时间的指定时间段时引发事件。例如,输入 10 表示播放到视频总时长的 10 秒时触发此规则。
移动设备
orientationchange
设备的方向(纵向/横向)发生更改。
zoomchange
在移动设备上执行捏合或伸展手势时引发。
浏览器
tab focus
内容获得焦点时触发事件。
tab blur
内容失去焦点时触发事件。
其他
自定义
在 DOM 上已触发自定义事件。Select Custom from the Event Type drop-down list, then specify the custom event name. 有关更多信息,请参阅 Mozilla 开发者网络上的 CustomEvent
enters viewport
在元素首次进入访客的视野时触发。如果元素在页面加载后立即进入视野,则此规则会立即触发。如果元素在滚动后才进入视野,则此规则会在滚动后触发。可以在规则中指定一个可选延迟,来确定触发事件前,元素必须在多长时间后进入视野(默认值为 1 秒)。
element exists
当指定选择器的元素存在时,因为它位于页面标记中或稍后动态注入。每个规则仅触发一次。
pushState 或 hashchange
URL 末尾的 URL 路径或哈希(片段标识符)发生更改。“ pushState hashchange ”事件可用于页面不会重新加载,但内容会发生变化的单页面应用程序 (SPA)。可用于创建 SPA 的常用开发框架包括 Angular 和 React。该事件类型允许您创建基于事件的规则,而无需依赖于开发人员。这些规则在 SPA 中发生以下常用功能时触发: URL 路径根据是否使用 HTML5 历史 pushState API 而进行调整。 ​有关使用 pushState 的更多信息,请参阅 Mozilla 开发者网络上的 添加和修改历史记录条目 由于用户更改页面上的视图或位置,哈希发生了变化。 ​有关使用 hashchange 的更多信息,请参阅 Mozilla 开发者网络上的 Hashchange
time passed
以秒为单位的值。经过指定的秒数后触发事件。
dataelementchanged
日期元素发生更改。此事件允许您选择特定的数据元素来用作触发器。For more information on a possible use case, see Add Adobe Experience Manager ContextHub Tool .

Using the CSS selector

Use the CSS Selector to quickly and easily select CSS elements to use as triggers for event-based rules without leaving the DTM rule builder.
DTM 的最大优势之一是能够在您的网站上关闭行为或页面交互事件。然而,找到要包含在规则中的所需 CSS 元素有时非常困难且费时。

Example with unique element

作为示例,我们希望创建一个规则,当用户单击我们网站上的“Sign In or Register”(登录或注册)链接时,该规则将触发,如下图所示。此示例非常简单,因为“Sign In or Register”(登录或注册)链接在 CSS 中没有任何类似元素。
The more complex example described below illustrates how to use the CSS Selector when there are many similar elements on the page, such as the tabs along the top ("Men's," "Women's," "Equipment," and so forth).

要使用 CSS 选择器,请执行以下操作:

  1. Access the CSS Selector widget within DTM by clicking the Target icon while creating a rule .
    In this example, we are creating an event-based rule that uses the Click event type to trigger the rule when users click the "Sign in or Register" link.
  2. Specify the website's URL, then click Load .
    尽可能特定于您希望活动结束的网页。请注意,CSS 样式表可能会从一个页面更改为另一个页面,具体取决于您的网站及其架构。通过实验查看样式表的更改频率是一种很有帮助的做法。
    网站现已加载到嵌入了 CSS 选择器窗口小部件的 iFrame 中。请将鼠标放在不同的元素上,以了解相应工具的工作原理。
    If we were creating this rule without using the CSS Selector, we would inspect the desired page element to determine the proper CSS to use. Using the CSS Selector, simply click the element on the page that we want to trigger the rule.
  3. 单击 Sign In or Register .
    单击想要选择器匹配的页面元素时,该元素将变为绿色。The CSS Selector then generates a minimal CSS selector for that element.
    请注意底部的面板,其中包含关于所选元素的信息以及向 DTM 发送信息的按钮。
    The number in parenthesis next to Clear indicates the number of items selected. 在本示例中,“Sign In or Register”(登录或注册)链接在指定页面上没有任何与之类似的元素,所以显示的数字为“1”。Click Clear to remove selected items. Click Toggle Position to move the panel to the top or bottom of the iFrame as desired. 单击 ? to view help information about the CSS Selector.
  4. Click Send to DTM to copy the CSS into the Element Tag or Selector field within DTM.
  5. Finish configuring the rule as described in Create conditions for event-based rules .
    Without writing any code or inspecting elements, we have created an event-based rule that triggers when users click Sign In or Register .

Example with similar elements

现在假设您想要创建一个规则,当用户单击顶部或您的网站上的“Men's”选项卡时会触发该规则。本示例和以上探讨的简单示例之间的区别在于,“Men's”(男士)标签在页面上拥有很多类似元素。
  1. Access the CSS Selector widget within DTM by clicking the Target icon while creating a rule .
  2. Specify the website's URL, then click Load .
  3. 单击“Men's”(男士)标签以将其选中。
    您可以注意到,页面上的很多元素都将被选中,并以黄色突出显示。The number next to Clear in parenthesis is 28 in this example, which means there are 28 elements on the page that use the "a" tag.
    我们希望在用户单击“Men's”(男士)链接时触发规则,所以需要取消选择其他类似元素。
    将鼠标移动到任何类似的突出显示的元素上(例如“Women's”(女士))时,您将注意到该元素周围将显示红色方框。
    单击想要选择器匹配的页面元素时,该元素将变为绿色。The CSS Selector then generates a minimal CSS selector for that element. 此外,选择器会将与黄色元素匹配的所有内容突出显示。The CSS Selector starts out broad and then lets you narrow your selection.
    单击突出显示的元素以拒绝该元素(红色),或者单击没有突出显示的元素以添加该元素(绿色)。通过此选择和拒绝流程,您可以根据需要形成完美的 CSS 选择器。在移动鼠标时按住 Shift 键可以选择其他选中元素内的元素。
  4. 单击带有红色方框的元素(“Women's”(女士))可取消选择该元素和所有其他类似元素。
    Notice that the number in parenthesis next to Clear is now 1.
  5. Click Send to DTM to copy the CSS into the Element Tag or Selector field within DTM.
  6. Finish configuring the rule as described in Create conditions for event-based rules .

CSS Selector limitations

The CSS Selector is in Beta and might not work well for some sites due to technical limitations.

Dynamically populate variables

您可以将元素属性动态分配给变量。
要将元素属性动态分配给变量,请使用以下语法:
%this.attributeName%

例如,假定您有一个搜索结果页面,其中包含多个可转到外部网站的链接。您希望通过使用所点击元素的 id 填充 eVar,来跟踪点击的链接。
Example Link: <a id='myFirstLink' href='www.exampleLink.com'>
要实现这一点,请创建一个基于事件的规则,以便在点击页面上的链接时触发。Then, within the Analytics section of the rule, set the eVar to %this.id% .
For non-standard attributes, you can similarly leverage the JavaScript function this.getAttribute() by wrapping it in '%' characters, as follows:
%this.getAttribute(attributeName)%

例如,假定您有一个与前面的示例类似的搜索结果页面。但是,这些链接包含非标准属性 loc ,您希望根据单击的链接将其动态设置为 eVar。
Example link: <a id='myFirstLink' loc='top' href='www.exampleLink.com'>
要实现这一点,请创建一个基于事件的规则,以便在点击页面上的链接时触发。Then, within the Analytics section of the rule, set the eVar to %this.get Attribute(loc)% .
如果不确定所需属性是标准属性还是非标准属性,请参阅 w3schools.com 以了解有关标准 HTML 属性的更多信息。但是,如果存在疑问,可以使用非标准 getAttribute() 格式,这种格式同时适用于这两种情况。
此功能可在动态标签管理规则字段中使用,包括:

Analytics variables

  • Adobe Analytics:
    • 链接跟踪、页面数据、层次结构
    • 全局变量和事件
  • Google Analytics
    • 页面查看、事件、自定义变量

Custom script

在自定义代码中还可以使用常规 JavaScript 引用标准属性。