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

这些条件决定了何时触发基于事件的规则。

  1. 选择您要跟踪的交互类型,例如鼠标点击或表单提交。

    有关更多信息,请参阅事件类型

  2. 根据需要启用以下选项:

    元素 描述
    延迟链接激活 在事件激活链接且希望链接延迟至事件有时间触发时启用。
    将事件处理程序直接应用于元素 将事件处理程序应用于特定目标元素。此设置绑定到浏览器中的事件冒泡和分层概念。

    例如,在单击 <a href="abc.html"><img src="xyz.png"/></a> 之类的锚标记中的图像时,您可能认为此点击与该锚标记相关联,因为该标记位于事件冒泡流中。但是,在开发人员工具中检查该点击时,您会发现该点击实际上可能只影响 <img> 标记。要确保该事件得到正确处理,应将点击与 <img> 标记关联,并且不要依赖浏览器将点击向上冒泡至父元素。类似于点击之类的事件可能会向上冒泡至 <body>。请务必了解事件绑定的实际位置,并专门将其确定为目标,以确保规则正确触发。

    事件冒泡​是指事件首先由最内部的元素捕获和处理,然后被传播到外部元素。

  3. 指示您希望跟踪的标记的名称,以及您希望匹配的其他标记属性。

    请参阅使用CSS选择器 ,以了解有关查找正确元素标记的信息。

  4. 选择并设置您希望绑定到规则的任何其他标准或条件类型。

  5. 指示与事件冒泡相关的首选项。

    事件冒泡是 HTML DOM 中的一种事件传播方式。

    问题 解决方案
    希望已识别的规则选择器子元素中的相关交互触发规则。 允许子元素中的事件冒泡。
    希望在子元素已触发其自身的事件时阻止事件冒泡。 在子元素已触发事件时不允许这么做。
    不希望已识别的规则选择器事件超出事件层级中的元素本身。 不允许事件向上冒泡至父项

事件类型

内置事件类型列表及其定义方式。

类别 活动 定义
鼠标 click 在元件上按下并释放指点设备按钮。
穆塞奥弗 将指点设备移动到附加了侦听器的元素上,或移动到其子项之一上。
键盘 按键 按下一个键,该键通常会产生一个字符值(请改用输入)。
Forms 焦点 元素收到焦点(不会冒泡)。
模糊 元素失去焦点(不会冒泡)。
提交 已提交表单。
更改 元素失去焦点,其值自获得焦点后发生更改。
HTML5视频 结束 由于到达媒体的结尾,播放停止。
loadeddata 媒体的第一帧已完成加载。
play 开始播放。
暂停 播放暂停。
停滞 用户代理正在尝试获取媒体数据,但数据意外未出现。
volumechange 卷已更改。
% 完成 在给定总播放时间的指定百分比时发出事件。 例如,输入10%表示只有在播放了视频总长度的10%时,才会触发此规则。
time complete 在播放时间的指定持续时间内发出事件。 例如,输入10表示仅当播放了视频总长度的10秒时,才会触发此规则。
移动设备 orientationchange 设备的方向(纵向/横向)已发生更改。
zoomchange 当在移动设备上执行捏合或展开手势时。
浏览器 tab focus 内容获得焦点时会触发事件。
选项卡模糊 当内容失去焦点时,将触发事件。
其他 自定义 在DOM上触发了自定义事件。 从​事件类型​下拉列表中选择​自定义,然后指定自定义事件名称。有关更多信息,请参阅Mozilla开发人员网络上的CustomEvent
enters viewport 元素首次进入访客视图时。 如果元素在页面加载后立即处于视图中,则规则会立即触发。 如果元素在滚动后显示,则会触发规则。 可以在规则中指定可选延迟,以确定在触发事件之前元素必须处于查看状态的时间(默认值为1秒)。
元素存在 当指定选择器的元素存在时(因为它位于页面标记中或稍后动态插入)。 每个规则只触发一次。
pushState或hashchange URL末尾的URL路径或哈希(片段标识符)已发生更改。 pushStatehashchange事件可用于单页应用程序(SPA),在单页应用程序中,页面不会重新加载,但其内容会发生更改。 可用于创建SPA的常用开发框架包括Angular和React。 利用此事件类型,可创建基于事件的规则,而无需依赖开发人员。 当SPA中发生常见函数时,将触发这些规则,例如:根据HTML5历史记录pushState API的使用情况,URL路径发生了更改。 有关使用的更多信 pushState息,请参 阅Mozilla开发人员网 络的添加和修改历史条目。哈希因用户更改页面上的视图或位置而发生更改。 有关使用的更多信 hashchange息,请参 🔗 阅Mozilla开发人员网络上的Hashchange 。
传递时间 值(以秒为单位)。 该事件在指定的秒数后触发。
dataelementchanged 日期元素已更改。 此事件允许您选择要用作触发器的特定数据元素。 有关可能用例的更多信息,请参阅添加Adobe Experience Manager ContextHub工具

使用CSS选择器

使用CSS Selector可快速轻松地选择要用作基于事件的规则触发器的CSS元素,而无需离开DTM规则生成器。

DTM的最大优势之一是能够在网站上的行为或页面交互事件发生。 但是,查找要包含在规则中的所需CSS元素有时既困难又费时。

唯一元素示例

例如,我们希望创建一个规则,该规则将在用户单击我们网站上的“登录或注册”链接时触发,如下图所示。 此示例非常简单,因为“登录或注册”链接在CSS中没有任何类似元素。

下面描述的更复杂的示例说明了当页面上有许多类似元素(如顶部的选项卡(“Men's”、“Women's”、“Equipment”等))时,如何使用CSS选择器。

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

  1. 创建规则的同时,通过单击Target图标,访问DTM中的CSS选择器小组件。

    在此示例中,我们将创建一个基于事件的规则,该规则使用Click事件类型,以在用户单击“Sign in or Register”(登录或注册)链接时触发该规则。

  2. 指定网站的URL,然后单击​Load

    注意

    尽可能地针对要关闭的网页进行特定设置。 请注意,CSS样式表可能会从一个页面更改为另一个页面,具体取决于您的网站及其架构。 尝试查看样式表更改的频率非常有用。

    现在,网站将加载到嵌入了CSS选择器小组件的iFrame中。 将鼠标悬停在不同的元素上,可了解工具的工作方式。

    如果我们在创建此规则时没有使用CSS选择器,则将检查所需的页面元素以确定要使用的正确CSS。 使用CSS Selector ,只需单击要触发规则的页面上的元素即可。

  3. 单击​登录或注册

    单击希望选择器匹配的页面元素时,该元素会变为绿色。 然后,CSS选择器为该元素生成一个最小的CSS选择器。

    请注意底部的面板,其中包含有关选定元素的信息以及用于将信息发送到DTM的按钮。

    Clear旁边的括号中的数字表示所选项目的数量。 在此示例中,“登录或注册”链接在指定的页面上没有任何类似的链接,因此显示“1”。 单击清除可删除选定项目。 单击切换位置以根据需要将面板移动到iFrame的顶部或底部。 Click ? 查看有关CSS选择器的帮助信息。

  4. 单击​发送到DTM​可将CSS复制到DTM中的元素标记或选择器字段。

  5. 按照为基于事件的规则创建条件中所述,完成规则的配置。

    在不编写任何代码或检查元素的情况下,我们创建了一个基于事件的规则,当用户单击​登录或注册​时,将触发该规则。

元素相似的示例

现在,假设您要创建一个规则,当用户单击顶部或您网站的“Men's”选项卡时,将触发该规则。 此示例与上面讨论的简单示例的区别在于,“Men's”选项卡在页面上具有许多类似的元素。

  1. 创建规则的同时,通过单击Target图标,访问DTM中的CSS选择器小组件。

  2. 指定网站的URL,然后单击​Load

  3. 单击“Men's”(男士)选项卡以将其选中。

    请注意,页面上的许多元素都处于选中状态,并以黄色突出显示。 在此示例中,括号中Clear旁边的数字为28,这表示页面上有28个使用“a”标记的元素。

    我们希望在用户单击“Men's”(男士)链接时触发规则,因此我们需要取消选择其他类似元素。

    将鼠标悬停在任何类似且突出显示的元素(例如“Women's”)上,您会注意到该元素周围会显示一个红色框。

    单击希望选择器匹配的页面元素时,该元素会变为绿色。 然后,CSS选择器为该元素生成一个最小的CSS选择器。 此外,选择器还会以黄色突出显示与该元素匹配的所有内容。 CSS选择器开始广泛,然后允许您缩小选择范围。

    单击高亮显示的元素以拒绝该元素(红色),或单击未高亮显示的元素以添加该元素(绿色)。 通过选择和拒绝的这一过程,您可以根据自己的需求,提供完美的CSS选择器。 在移动鼠标时按Shift键可在其他选定元素内选择元素。

  4. 单击带有红色框(Women's)的元素可取消选择该元素和所有其他类似元素。

    请注意,Clear旁边括号中的数字现在为1。

  5. 单击​发送到DTM​可将CSS复制到DTM中的元素标记或选择器字段。

  6. 按照为基于事件的规则创建条件中所述,完成规则的配置。

CSS选择器限制

CSS选择器处于测试版中,由于技术限制,可能对某些网站不太有效。

动态填充变量

您可以将元素属性动态分配给变量。

要将元素属性动态分配给变量,请使用以下语法:

%this.attributeName%

例如,假定您有一个搜索结果页面,其中包含指向外部网站的多个链接。 要通过使用所点击元素的​id​动态填充eVar来跟踪点击的链接。

示例链接:<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引用标准属性。

在此页面上