Question

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

<!-- 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的情况下尝试了这个代码：加载监听器的结果都是相同的。

Answer 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为所有目标锚标签添加处理程序，从文档节点委派，并包装现有处理程序，检查它们是否阻止默认操作/停止传播，我不确定是什么＆＃39 ; s导致它，但我认为GTM在我的事件被注册之前加载，并且没有检测到默认操作被阻止，因此从body标签委托并阻止默认操作确保您的事件是在任何GTM事件之前命中（如上所述，在文档节点上注册）。

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

另外，我在GTM生成并注入文档的脚本标记中添加了一个延迟标记，但我认为这也不是必要的，还没有经过测试。

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

谷歌标签管理器干扰Rails UJS遥控器：是的

1 个答案: