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

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

  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%时,才会触发此规则。
时间完成 在指定的播放时间持续时间内发出事件。 例如,输入10表示仅当播放视频总长度的10秒时,才会触发此规则。
移动设备 方向更改 设备的方向(纵向/横向)已更改。
zoomchange 当在移动设备上执行手指开合或展开手势时。
浏览器 选项卡焦点 事件在内容获得焦点时触发。
选项卡模糊 事件在内容失去焦点时触发。
其他 自定义 在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中发生常见函数时,这些规则将触发,例如: URL路径根据HTML5历史记录API的使用而 pushState 更改。 有关使用的详细信 pushState息,请 参阅在Mozilla Developer Network上添加和修 改历史记录条目。 哈希因用户更改页面上的视图或位置而发生更改。 有关使用的详细信 hashchange息,请参 阅Mozilla Developer Network上的Hashchange。
已过时间 以秒为单位的值。 事件在指定的秒数过后触发。
dataelementchanged 日期元素已更改。 此事件允许您选择特定数据元素作为触发器。 有关可能的用例的详细信息,请参 阅添加Adobe Experience ManagerContextHub工具

使用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样式表可能会从一个页面更改到另一个页面,具体取决于您的网站及其架构。 尝试查看样式表更改的频率会很有帮助。

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

    如果我们在创建此规则时未使 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进行引用。

在此页面上

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now