更新时间：2024年12月3号
认识元素可见性
Google Tag Manager里有一个叫做元素可见性的触发器，当页面展示特定的内容或信息，就会触发。
元素可见性的界面
元素可见性的设置页面如下：
- 选择方法：通过什么方式定位跟踪的位置，有两种方式：
- ID：根据元素的 ID 属性值选择单个元素。
- CSS选择器：根据指定的 CSS 选择器模式选择一个或多个元素。
- 何时出发次触发器：控制触发频率
- 每次网页加载是触发一次：每个pv只触发一次。
- 每次元素显示出发一次：每首次匹配上就触发一次，同一个页面多个地方公用id的时候，只有第一个id触发。
- 每次元素在屏幕上显示时：每次匹配都触发一次。
- 公开范围最低百分比：指定在触发器触发之前有多少百分比的所选元素必须在屏幕上可见。也就是显出多大比例就可以触发。如是图片的时候，设置为50%，那么图片显示出50%的时候，触发器就触发。
- 设置在屏显示时长下限：指定在触发器触发之前所选元素必须在屏幕上显示多长时间。该时间将在特定页面基础上累积。换句话说，如果某个元素先显示 5000 毫秒，然后消失，接着再次返回显示 5000 毫秒，则其总在屏显示时长将计为 10000 毫秒。也就是这个元素的至少被展示多长时间才会被触发。
- 观察 DOM 更改：跟踪显示为 DOM 更改的匹配元素。也即是Dom元素改变而导致的匹配触发，这种条件比较极端。
元素可见性内置变量
- Percent Visible：可见百分比
- On-Screen Duration：可见时长
这两个变量可以放在事件中的行为和标签，这个触发器还在数据层传递有其他信息，有需要可以用数据层去接受配置，更多信息去看官方文档吧。
演示案例：用元素可见性跟踪表单提交
表单提交成功后，页面会显示这段话：
可以通过元素可见性去跟踪表单提交。
Step 1 ：查看页面源码
将鼠标移动需要跟踪位置，点击鼠标右键中的“检测”，然后查看页面元素：
可以看到有class wpcf7-response-output，这个将用于触发器的设置。
Step 2 ：设置元素可见性触发器
在GTM中点击「触发器」—「新建」—「选择一个触发器类型以开始设置」——「元素可见性」，命名为“表单提交——元素可见性”，做如下设置：
- 选择方法 ：CSS选择器
- 元素选择器：从Step 1，我们已经知道了class wpcf7-response-output，且是在div里，所以设定为div.wpcf7-response-output，
- 可是触发此触发器：每次元素显示触发一次，因为一个页面会包含多个文章，所以每次元素显示都触发一次
- 此触发器的触发条件：所有可见性事件，不做限制
Step 3 ：设置代码
在GTM中点击「代码」—「新建」—「选择一个代码类型以开始设置」——「Google Analytics（分析）：GA4 事件」，命名为“GA4-Event-Submit Form(元素可见性)”，做如下设置：
注意：如需要区分，请自行设置事件参数。
Step 4 ：预览调试
最后就是测试，页面打开看到文章，然后返回到Tag Assistant，可以看到准确触发：
如果你不会调试，请看：Google Tag Manager中新的调试方式：Tag Assistant
如有疑问，可以在文章底部留言或邮件(haran.huang@ichdata.com) 我~
