更新时间：2026年8月19号
GTM的元素可见性触发器（Element Visibility Trigger），可以在指定网页元素进入浏览器可视区域时触发标签。
它常用于跟踪：
- Banner、广告位或推荐模块曝光；
- 用户是否看到页面中的重要内容；
- CTA按钮是否进入可视区域；
- 弹窗或提示信息是否显示；
- AJAX表单提交后的成功提示。
本文介绍元素可见性触发器的设置方法，并以“表单提交成功提示”为例，将可见事件发送到GA4。
什么是元素可见性触发器？
当符合条件的网页元素进入浏览器可视区域时，GTM会产生一个元素可见性事件，并触发关联的标签。
简化流程如下：
指定元素进入可视区域——>GTM产生元素可见性事件——>元素可见性触发器成立——>发送GA4事件
元素可见性触发器的设置项
在GTM中点击「触发器」—「新建」—「选择一个触发器类型以开始设置」——「元素可见性」,元素可见性的设置页面如下：
选择方法
GTM提供两种元素定位方式。
| 选择方法 | 说明 | 示例 |
|---|---|---|
| ID | 根据元素的id属性选择一个元素 |
success-message |
| CSS选择器 | 使用CSS选择器匹配一个或多个元素 | .success-message |
如果页面元素拥有唯一且稳定的ID，优先使用ID。
如果需要根据Class、属性或页面结构匹配元素，则使用CSS选择器，例如：.bannerCSS选择器不应匹配大量无关元素，否则可能增加页面监测负担。
触发频率
元素可见性触发器提供三种触发频率。
| 选项 | 触发逻辑 | 适用场景 |
| 每个页面触发一次 | 当前页面中任意匹配元素首次达到可见条件时触发一次 | 页面核心内容曝光 |
| 每个元素触发一次 | 每个匹配元素首次达到可见条件时分别触发一次 | 多个Banner或内容模块曝光 |
| 每次元素显示时触发 | 元素每次重新进入可视区域都会触发 | 需要记录重复曝光的场景 |
例如，一个页面有三个使用相同Class的推荐模块：
<div class="recommendation"></div>
<div class="recommendation"></div>
<div class="recommendation"></div>- 选择“每个页面触发一次”时，最先进入屏幕的模块只会触发一次。
- 选择“每个元素触发一次”时，三个模块可以分别触发一次。
- 选择“每次元素显示时触发”时，用户滚动离开后再次滚回，同一个模块可能再次触发。
页面中不应该存在多个相同ID。如果使用ID选择方式，GTM通常只处理第一个匹配元素。
公开范围最低百分比
最低可见百分比用于规定元素至少有多少比例进入可视区域后才触发。
GTM默认值为50%。
例如，一张图片的最低可见百分比设为50%，只有当至少一半图片进入浏览器可视区域时，触发器才会成立。
设置在屏显示时长下限
启用“设置最低在屏显示时长”后，元素必须达到最低可见比例并持续指定时间，触发器才会成立。
时间单位是毫秒。
观察 DOM 更改
启用“观察DOM更改”后，GTM会继续监测页面DOM，识别随后新增或变成匹配状态的元素。
元素可见性内置变量
GTM提供两个与元素可见性相关的内置变量：
- Percent Visible：可见百分比
- On-Screen Duration：可见时长
这两个变量可以放在事件中的行为和标签，这个触发器还在数据层传递有其他信息，有需要可以用数据层去接受配置，更多信息去看官方文档吧。
设置示例：跟踪表单提交成功提示
假设网站使用Contact Form 7。表单成功提交后，页面会显示一段成功提示
可以通过元素可见性去跟踪表单提交。
Step 1 ：检查成功提示元素
在浏览器中成功提交一次表单，然后右键点击成功提示，选择「检查」，查看对应的HTML结构
可以看到有class wpcf7-response-output，这个将用于触发器的设置。
Step 2 ：创建元素可见性触发器
在GTM中点击「触发器」—「新建」—「选择一个触发器类型以开始设置」——「元素可见性」，命名为“表单提交——元素可见性”，做如下设置：
- 选择方法 ：CSS选择器
- 元素选择器：从Step 1，我们已经知道了class wpcf7-response-output，且是在div里，所以设定为div.wpcf7-response-output，
- 可是触发此触发器：每次元素显示触发一次，因为一个页面会包含多个文章，所以每次元素显示都触发一次
- 此触发器的触发条件：所有可见性事件，不做限制
Step 3 ：设置GA4事件标签
在GTM中点击「代码」—「新建」—「选择一个代码类型以开始设置」——「Google Analytics（分析）：GA4 事件」，命名为“GA4-Event-Submit Form(元素可见性)”，做如下设置：
注意：如需要区分，请自行设置事件参数。
Step 4 ：预览调试
最后就是测试，页面打开看到文章，然后返回到Tag Assistant，可以看到准确触发：
总结
GTM元素可见性触发器适合记录Banner、内容模块、CTA和提示信息是否进入用户的可视区域。
配置时需要重点确认：
- ID或CSS选择器能否准确匹配目标元素；
- 应该每页触发一次、每个元素一次还是重复触发；
- 最低可见比例和显示时长是否合理；
- 动态元素是否需要启用“观察DOM更改”；
- 目标元素的显示是否真正代表业务成功。
对于普通内容曝光，元素可见性触发器通常已经足够；对于表单、注册、订单等重要转化，优先使用网站成功回调或dataLayer.push()记录结果，元素可见性可以作为无法修改网站代码时的替代方案。
