GTM Sonar

调试页面模板，查看它是否与 Google Tag Manager 的自动事件监听器兼容。 GTM Sonar 可用于调试页面模板及其与 Google Tag Manager 监听器的兼容性。 目录 1. 概述 2. 使用方法 3. 待办事项 4. 版本历史 -------------------- 1. 概述 安装扩展程序并重新加载页面后，点击扩展程序面板中的红色靶心即可打开弹出窗口。 在此窗口中，你可以选择要在页面上启用的监听器。 点击监听器：阻止文档节点上所有点击的默认操作，在点击页面时将 gtm.click 和其他数据推送到 debugDL。 链接点击监听器：阻止文档节点上所有点击的默认操作，在点击页面上的任何链接元素时将 gtm.linkClick 和其他数据推送到 debugDL。 表单提交监听器：阻止所有表单提交的默认操作，在提交表单时将 gtm.formSubmit 和其他数据推送到 debugDL。 选择监听器并点击“Switch On”即可在页面上设置监听器。打开弹出窗口并点击“Switch Off”可取消扩展程序的所有操作。 事件被推送到 debugDL 数组后，浏览器操作图标上的小徽标计数会增加，表示数组中的项目数量。要查看数组内容，请打开 Chrome 浏览器的 JavaScript 控制台并输入“debugDL”（不含引号）。 如果页面中有 jQuery，你可以点击相应按钮取消所有 jQuery 绑定，以测试 jQuery 是否干扰 GTM 监听器。 调试器针对特定标签页，因此在一个标签页中执行的操作只作用于该标签页。离开页面后，debugDL 将不再可用。 请注意，取消点击和提交的默认操作并非 100% 准确。其他脚本可能会产生干扰，使重定向或提交仍然发生。 2. 使用方法 你可以测试不同元素在这三种 GTM 监听器下的表现，而无需实际设置 GTM 监听器。这有利于调试，因为你可以在 GTM 中设置监听器标签之前自由测试标记。要调试无法访问其容器或预览版本的网站时，这也非常有用。 3. 待办事项 1）提高稳定性和可靠性 4. 版本历史 v1.4 - 2020 年 5 月 13 日 - 修复扩展程序未激活时点击监听器无法正确移除的问题。 - 改为仅使用 activeTab 权限。 v1.3 - 2015 年 6 月 5 日 - 将点击监听器改为使用捕获阶段 - 更改链接点击监听器，使其沿 DOM 树向上查找，直到找到链接 v1.2 - 2014 年 6 月 1 日 - 添加徽标图标，每次将事件推送到 debugDL 时计数都会增加 - 改进弹出窗口中的说明 - 如果扩展程序无法工作，弹出窗口将显示错误消息 - 将扩展程序更名为 GTM Sonar（感谢 Paul Gailey 提供的创意！） v1.1 - 2014 年 5 月 26 日 - 添加用于控制调试器功能的弹出窗口 - 添加取消所有 jQuery 绑定的开关 - 添加点击监听器、链接点击监听器和表单提交监听器选项 v1.0 - 2014 年 5 月 23 日 - 首个发布版本 - 点击浏览器操作图标会阻止所有点击事件并设置 debugDL 对象 - 点击页面上的任意位置会将 gtm.click 事件存储在 debugDL 中 - 再次点击浏览器操作图标会移除此扩展程序注入的所有脚本和事件处理程序