GoogleTagManager (fbevent.js) 中断了 JQuery UI 对话框答案

【问题标题】：GoogleTagManager (fbevent.js) breaks JQuery UI dialogGoogleTagManager (fbevent.js) 中断了 JQuery UI 对话框
【发布时间】：2020-07-20 14:31:43
【问题描述】：

最近我们实现了 GoogleTagManager (GTM)，但某些 Jquery UI 对话框根本没有显示（其中一些始终有效，而另一些则始终无法正常工作）。很遗憾，我无法提供示例代码。

当单击调用 .dialog("open") 的 UI 按钮时，不会显示对话框，但整个页面变为灰色 (div class="ui-widget-overlay ui-front")。我在 html 中看到 div 具有“display:none”样式。如果我删除display: none，对话框最终会显示出来，但表单的 UI 是混乱的。不知何故，模式的宽度是 300 像素而不是 1000 像素等。此外，缺少保存/取消按钮的事件侦听器。如果我将 autoOpen: true 放在 jquery UI 对话框声明中，则会显示该对话框，但仍然以同样的方式搞砸了。

我注意到，当我有一个广告拦截器时，一切正常，但当我没有时，就会出现错误。我还意识到，当使用 GTM 时，浏览器中有一个“fbevents.js”文件，如果我用广告拦截器明确禁用这个文件，这个错误就会消失。

当我单击调用对话框（“打开”）的图标时，我还看到一个 facebook.com/tr/ 调用在 Chrome 的网络选项卡中永远保持“待处理”状态。

当然，如果没有 GTM，网站也可以正常运行。

您知道这个错误是什么，或者我应该如何继续调查？（不更新 jquery/jqueryUI 或不切换到引导模式）？

【问题讨论】：

不要把 Facebook 的问题归咎于 GTM。 fbevents.js 不是 GTM 文件，不是由 Google 提供的。 Facebook 标签会在您背后收集大量数据（点击和提交，这可能会触发相应的 GTM 事件），这可能会干扰您的对话（FBs 文档描述了如何禁用此行为）。

标签： javascript html jquery-ui google-tag-manager

【解决方案1】：

没有额外的细节很难猜测，是什么导致了你的问题，但有一点，我会先尝试。

检查一下，您的触发器是如何制作的。

有一些 GTM 配置会逐步进入链接点击事件处理。

所以也许，有一个事件在 A 元素上侦听，onlky 伪装成一个链接，而 GTM 正在等待响应。

如果这是真的，请尝试将事件侦听器更改为仅通用点击事件（点击 - 所有元素）。

【讨论】：

【解决方案2】：

我很幸运。我发现了另一种存在时间很短的形式，它与 facebook 相关 (GTM)。我意识到“xy.appendTo('form')” JS 代码将数据插入到错误的表单中......通过将代码更改为“xy.appendTo('#form1') ”问题就解决了。

所以一个简单的 appendTo('form') 启动了多米诺骨牌效应，导致 DOM 中的 ID 重复，并搞砸了一切......

网络选项卡中的 facebook.com/tr 调用仍处于待处理状态，但我认为这与 Jakub Kriz 的建议有关（我会尽快更新我的答案）。

更新：

即使 GTM 调试器显示未触发任何触发器，但每次单击“a/a href”或“input type="button"”时，GTM 都会向 facebook.com/tr 调用发送请求。我相信这是一个默认功能，我明白为什么。

在某些情况下，我们的网站以无效的方式使用这些 html 标记：使用“a”而不是“div”，并且“输入类型按钮”用于打开模式对话框的图标。如果我们改变这些，不必要的 facebook.com/tr 调用就会消失。

但我仍然对未决状态一无所知。我相信当我应用上面提到的更改时，问题就会消失。

【讨论】：