谷歌标签管理器干扰 Rails UJS 远程：真答案

【问题标题】：Google Tag Manager interfering with Rails UJS remote:true谷歌标签管理器干扰 Rails UJS 远程：真
【发布时间】：2018-01-16 19:16:05
【问题描述】：

我将 GTM 包含在我的 <head> 中，其中包含以下内容：

<!-- Google Tag Manager -->
<script>
document.addEventListener('turbolinks:load', function(event) {
  var url = event.data.url;
  dataLayer.push({
    'event':'pageView',
    'virtualUrl': url
  });
});
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');
</script>
<!-- End Google Tag Manager -->

并在<body> 与

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

在我的页面上，我有一个 link_to 助手，它使用 rails-ujs 从数据库中删除图像。

<%= link_to "Delete", destroy_image_path(image), remote: true, method: "delete" %>

当我从页面中删除 GTM 代码时，删除链接按预期执行。

但是，使用 GTM 代码后，单击该链接会在尝试发出 GET 请求时导致路由错误。

No route matches [GET] "/..."

在我看来，GTM 正在干扰 rails-ujs，但我不确定最好的解决方法。

编辑：我已经尝试使用和不使用 turbolinks:load 侦听器的代码，但结果相同。

【问题讨论】：

标签： ruby-on-rails google-tag-manager rails-ujs

【解决方案1】：

我必须做到以下几点：

(function($) {
  var handlerElement = document.body;
  var selector = 'a[data-method=put],a[data-method=patch],a[data-method=post],a[data-method=delete]';
  var events = ['click', 'mousedown', 'mouseup'];
  var namespacedEvents = $.map(events, function(event) {
    return [event, 'disable_method_links'].join('.');
  });
  var handlers;

  $(handlerElement).on(namespacedEvents.join(' '), selector, function(e) {
    e.preventDefault();
  });
})(jQuery);

基本上，GTM 为所有目标锚标记添加处理程序，从文档节点委托，并包装现有处理程序，检查它们是否阻止默认操作/停止传播，我不确定究竟是什么原因造成的，但是我认为这是 GTM 在我的事件注册之前加载，并且没有检测到默认操作被阻止，因此从 body 标签委派并阻止默认操作可确保您的事件在任何 GTM 事件之前被命中（如前所述, 在文档节点上注册）。

我不确定 mousedown/mouseup 事件是否有必要，但我会在我离开长周末之前匆忙发布此消息，所以没有时间检查。

另外，我在 GTM 生成并注入到文档中的脚本标签中添加了一个 defer 标签，但我认为这也没有必要，同样，还没有测试过。

另见：https://www.simoahava.com/gtm-tips/fix-problems-with-gtm-listeners/

【讨论】：