Show Menu
主题×

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

这些条件决定了何时触发基于事件的规则。
  1. 选择您要跟踪的交互类型,例如鼠标点击或表单提交。
    有关详细信息,请参阅 事件类型
  2. 根据需要启用以下选项:
    元素
    描述
    延迟链接激活
    如果事件激活了链接,并且您希望链接延迟到事件有时间触发,则启用此选项。
    将事件处理函数直接应用于元素
    将事件处理函数应用于目标特定元素。 此设置与浏览器中的冒泡和分层概念相关联。
    例如,在单击 <a href="abc.html"><img src="xyz.png"/></a> 之类的锚标记中的图像时,您可能认为此点击与该锚标记相关联,因为该标记位于事件冒泡流中。但是,在开发人员工具中检查该点击时,您会发现该点击实际上可能只影响 <img> 标记。要确保该事件得到正确处理,应将点击与 <img> 标记关联,并且不要依赖浏览器将点击向上冒泡至父元素。类似于点击之类的事件可能会向上冒泡至 <body> 。了解事件的实际绑定位置很重要,并具体目标它以确保规则正确触发。
    冒泡 :指首先由最内部元素捕获并处理事件,然后传播到外部元素。
  3. 指示您希望跟踪的标记的名称,以及您希望匹配的其他标记属性。
    有关 查找正确元素标签的信息 ,请参阅使用CSS选择器。
  4. Select and set up any additional criteria or condition types you wish to bind to the rule.
  5. 指示与事件冒泡相关的首选项。
    事件冒泡是HTML DOM中事件传播的一种方式。
    问题
    解决方案
    希望对您标识的规则选择器的子元素进行相关交互以触发规则。
    允许子元素上的事件冒泡
    当子元素已触发其自己的事件时,希望防止冒泡。
    如果子元素已触发事件,请勿允许。
    不希望您标识的规则选择器的事件超出事件层次中的元素本身。
    不要让事件向上冒泡到父母身上

Event types

内置事件类型的列表以及如何定义每个。
类别
Event
定义
鼠标
click
在元件上按下和释放指点设备按钮。
鼠标悬停
将指点设备移动到附加了监听器的元素上,或移动到其子元素之一上。
键盘
按键
按下一个键,该键通常会生成一个字符值(请改用输入)。
表单
焦点
元素获得焦点(不会冒泡)。
模糊
元素失去焦点(不会冒泡)。
提交
将提交表单。
更改
元素失去焦点,其值在获得焦点后已更改。
HTML5视频
止年度
播放因到达媒体末尾而停止。
加载数据
媒体的第一帧已完成加载。
play
播放开始。
暂停
播放暂停。
停滞
用户代理正尝试获取媒体数据,但数据意外不会出现。
容积变化
卷已更改。
% 完成
在给定总播放时间的指定百分比的情况下发出事件。 例如,输入10%表示此规则仅在播放视频总长度的10%时触发。
time complete
在指定的播放时间持续时间内发出事件。 例如,输入10表示此规则仅在播放视频总长度的10秒时才会触发。
移动设备
方向更改
设备的方向(纵向/横向)已更改。
zoomchange
当在移动设备上执行手指开合或展开手势时。
Browser
选项卡焦点
事件在内容获得焦点时触发。
选项卡模糊
事件在内容失去焦点时触发。
其他
自定义
已在DOM上触发自定义事件。 Select Custom from the Event Type drop-down list, then specify the custom event name. For more information, see CustomEvent on the Mozilla Developer Network.
进入视口
元素首次进入访客的视图时。 如果元素在页面加载后立即处于视图中,则规则将立即触发。 如果元素在滚动后进入视图,则规则随后将触发。 可以在规则中指定可选的延迟,该延迟确定在触发视图之前元素必须处于事件状态的时间(默认值为1秒)。
元素存在
当某个指定选择器的元素出现时(因为它位于页面标记中或稍后动态插入)。 每个规则只触发一次。
pushState或hashchange
URL末尾的URL路径或哈希(片段标识符)已更改。 该 pushState 或事件 hashchange 可用于页面不会重新加载但其内容会更改的单页应用程序(SPA)。 可用于创建SPA的常见开发框架包括Angular和React。 通过此事件类型,您无需依赖开发人员即可创建基于事件的规则。 当SPA中的常见功能(如:根 据HTML5历史记录API的使用更改了URL pushState 路径。 有关使用的详细信息 pushState ,请参 阅在Mozilla Developer Network上添加和修改历史记录条目 散列因用户更改页面上的视图或位置而更改。 有关使用的详细信 hashchange 息,请参 阅Mozilla Developer Network上的Hashchange
过去的时间
以秒为单位的值。 事件在指定的秒数过后触发。
dataelementchanged
日期元素已更改。 此事件允许您选择特定数据元素作为触发器。 有关可能的用例的详细信息,请参 阅添加Adobe Experience Manager ContextHub工具

使用CSS选择器

使用 CSS Selector 快速、轻松地选择CSS元素,以用作基于事件的规则的触发器,而无需离开DTM规则构建器。
DTM的最大优势之一是能够事件网站上的行为或页面交互。 但是,查找要包含在规则中的所需CSS元素有时既困难又耗时。

具有唯一元素的示例

例如,我们希望创建一个规则,当用户单击我们网站上的“登录或注册”链接时,该规则会触发,如下图所示。 此示例很简单,因为“登录或注册”链接在CSS中没有任何类似元素。
下面描述的更复杂的示例说明了在页面上存在许多类似元素时如何使用 CSS Selector ,如顶部的选项卡(“Men's”、“Women's”、“Equipment”等)。

要使用CSS选择器:

  1. 创建规 CSS Selector 则时,单击图标即可访 Target 问DTM 中的构件
    在此示例中,我们将创建一个基于事件的规则,该规则在用户单击“登录或注册”链接时使用 Click 事件类型触发该规则。
  2. 指定网站的URL,然后单击 Load
    对要事件的网页尽可能具体。 请注意,CSS样式表可能会从一个页面更改为另一个页面,具体取决于您的网站及其架构。 尝试查看样式表更改的频率很有帮助。
    现在,网站加载到iFrame中并嵌入了CSS选择器构件。 将鼠标悬停在不同的元素上,以了解该工具的工作方式。
    如果我们在创建此规则时未使用 CSS Selector该规则,我们将检查所需的页面元素以确定要使用的正确CSS。 使用 CSS Selector时,只需单击要触发规则的页面上的元素。
  3. 单击 Sign In or Register
    当您单击希望选择器匹配的页面元素时,该元素会变为绿色。 然 CSS Selector 后,该元素将生成最小的CSS选择器。
    请注意底部的面板,其中包含有关选定元素的信息以及将信息发送到DTM的按钮。
    旁边括号中的数字 Clear 表示选定项目的数量。 在此示例中,“登录或注册”链接在指定页面上没有与其类似的内容,因此显示“1”。 单击 Clear 可删除选定项目。 单 Toggle Position 击以根据需要将面板移到iFrame的顶部或底部。 Click ? 视图相关的帮助信息 CSS Selector。
  4. Send to DTM 击以将CSS复制到DTM Element Tag or Selector 中的字段。
  5. 按照创建基于事件的规则的 条件中所述,完成规则配置
    无需编写任何代码或检查元素,我们创建了基于事件的规则,当用户单击时触发该规则 Sign In or Register

具有相似元素的示例

现在,假设您要创建一个规则,当用户单击顶部或您的网站的“男士”选项卡时触发该规则。 此示例与上面讨论的简单示例的区别在于,“Men's”选项卡在页面上有许多类似元素。
  1. 创建规 CSS Selector 则时,单击图标即可访 Target 问DTM 中的构件
  2. 指定网站的URL,然后单击 Load
  3. 单击“Men's”选项卡以选择它。
    请注意,页面上的许多元素都被选中,并以黄色突出显示。 本例中,括号 Clear 中的数字为28,这表示页面上有28个使用“a”标记的元素。
    我们希望在用户单击“Men's”(男士)链接时触发规则,因此我们需要取消选择其他类似元素。
    将鼠标悬停在任何类似的高亮显示的元素(例如“Women's”)上,您会注意到元素周围显示一个红色框。
    当您单击希望选择器匹配的页面元素时,该元素会变为绿色。 然 CSS Selector 后,该元素将生成最小的CSS选择器。 此外,选择器会以黄色突出显示与该元素匹配的所有内容。 开始 CSS Selector 将范围扩大,然后允许您缩小选择范围。
    单击高亮显示的元素以拒绝它(红色),或单击未高亮显示的元素以添加它(绿色)。 通过选择和拒绝的这一过程,您可以根据自己的需求提供完美的CSS选择器。 在移动鼠标时按Shift键可选择其他选定元素内的元素。
  4. 单击带有红色框(Women's)的元素可取消选择它和所有其他类似元素。
    请注意,旁边括号中的数字 Clear 现在为1。
  5. Send to DTM 击以将CSS复制到DTM Element Tag or Selector 中的字段。
  6. 按照创建基于事件的规则的 条件中所述,完成规则配置

CSS选择器限制

该版 CSS Selector 本为测试版,由于技术限制,可能对某些站点不起作用。

动态填充变量

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

例如,假设您有一个搜索结果页面,其中包含多个指向外部网站的链接。 您希望通过在单击元素时动态填充eVar来跟踪单 id 击的链接。
示例链接: <a id='myFirstLink' href='www.exampleLink.com'>
为此,请创建一个基于事件的规则,以在单击页面上的链接时触发。 然后,在规 Analytics 则的部分中,将eVar设置为 %this.id%
对于非标准属性,您同样可以通过将JavaScript函 this.getAttribute() 数换为“%”字符来利用它,如下所示:
%this.getAttribute(attributeName)%

例如,假定您有一个类似的搜索结果页面,如上例所示。 但是,这些链接包含非标准属性, loc 您希望根据单击的链接动态设置为eVar。
示例链接: <a id='myFirstLink' loc='top' href='www.exampleLink.com'>
为此,请创建一个基于事件的规则,以在单击页面上的链接时触发。 然后,在规 Analytics 则的部分中,将eVar设置为 %this.get Attribute(loc)%
如果不确定所需的属性是标准属性还是非标准属性,请参考 w3schools.com ,进一步了解标准HTML属性。 但是,如果存疑,您可以使用非标准格 getAttribute() 式,这在任何一种情况下都适用。
此功能可在动态标签管理规则字段中使用,包括:

Analytics 变量

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

自定义脚本

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