使用 Adobe DTM 跟踪基于 CSS 的显示/隐藏事件答案

【问题标题】：Using Adobe DTM to track CSS-based show/hide events使用 Adobe DTM 跟踪基于 CSS 的显示/隐藏事件
【发布时间】：2014-05-27 10:09:14
【问题描述】：

当我在我的一个页面上显示或隐藏一段内容时，我无法确定触发 ADTM 的最佳方式。请注意，我只是切换 style.display，而不是通过 AJAX 检索和插入。

我认为这将是某种带有自定义条件的事件基本规则来测试 style.display 值，但我不确定我应该实际使用哪个事件。最接近的似乎是“元素存在”，但这似乎只是用于测试 DOM 节点的存在。

非常感谢任何帮助。

【问题讨论】：

内容如何显示/隐藏？例如什么事件使它隐藏/显示？我问是因为没有“onshow”或“onhide”类型的事件，甚至在javascript或w/jquery中也没有。最接近的方法是编写每x时间检查一次的代码，这不是很有效。因此，最好尝试将其附加到实际使其显示/隐藏的任何内容上
一组 Prev/Next 按钮具有 onclick 事件处理程序，它们运行脚本来切换 style.display。我希望 DTM 可能有一种方法来检测对象的 style.display 变化并触发规则，但是唉。然后如何使用 DTM 手动触发跟踪事件？
soo.. 为什么不给上一个/下一个按钮添加一个点击事件呢？还是我不明白这个问题？

【解决方案1】：

执行此操作的方法是使用“进入视口”选项。当项目可见性设置为显示并且用户可以看到内容时，将触发此事件。

-鲁迪

【讨论】：

这在大多数情况下都有效，但有时“进入视口”不会按照您期望的方式获取显示/隐藏事件。有时它会立即触发，因为该元素在技术上是可见的，但通过其他方式（例如透明度或移出屏幕）隐藏。在这种情况下，您需要编写自定义脚本来检查隐藏/显示它的状态。