0

我将 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 侦听器的代码，但结果相同。

4

1 回答 1

0

我必须执行以下操作：

(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/

于 2018-03-15T09:48:44.633 回答