Click trigger 和 shadow-dom 中内置的 Google Tag Manager 的问题答案

【问题标题】：Issues with Google Tag Manager's built in Click trigger and shadow-domClick trigger 和 shadow-dom 中内置的 Google Tag Manager 的问题
【发布时间】：2018-03-14 22:57:30
【问题描述】：

Google 跟踪代码管理器 (GTM) 具有内置的点击触发器，可让您在用户点击内容时触发 GTM 代码。

我相信它是通过在文档上添加一个“点击”侦听器，然后在点击时将一个特殊的“gtm.click”事件推送到 dataLayer 中来实现的。

在推入 dataLayer GTM 的“gtm.click”对象中，包含从 event.target 属性中提取的某些数据，包括目标元素的属性，例如 id/class/href。

问题是……

如果您在 html 中使用 shadow-dom，则目标/数据将是错误的。这是因为当事件通过 shadow-dom 边界冒泡时，它们"are re-targeted to look like they've come from the component rather than the internal elements within your shadow DOM"。

如果您基于事件目标数据在 GTM 中创建标签/触发器/变量，并且您希望该目标是用户实际单击的元素（这看起来很正常），这可能会出现问题。

是否有已经存在的解决方案？

【问题讨论】：

标签： google-tag-manager shadow-dom

【解决方案1】：

理想情况下，GTM 会在内部解决此问题；在那之前，这是我想出的解决方案......

创建一个文档级点击监听器（就像 GTM 一样）并触发自定义点击事件，但数据来自原始事件目标（而不是重新定位的目标）。

因此，请侦听文档上的“点击”，然后使用 event.composedPath()[0] 或不支持composedPath 的浏览器的备用方法之一获取原始目标。我只是拼凑起来，查看不同的文档并在不同的浏览器中尝试，所以不确定它是否完美。

function getOriginalTarget(ev) {
  if ('composedPath' in ev) return ev.composedPath()[0]; // Standard
  else if ('path' in ev) return ev.path[0]; // Old Chrome
  else if ('originalTarget' in ev) return ev.originalTarget; // Firefox
  else if ('srcElement' in ev) return ev.srcElement; // Old IE & Safari
  else return ev.target; // Fallback to normal target.
};

document.addEventListener('click', function (ev) {
  var target = getOriginalTarget(ev);

  dataLayer.push({
    'event': 'MyClick', // some custom event
    'targetId: target.id || '' // some custom data (from original target)
    // etc...
  });
}, false);

我最初考虑使用'event': 'gtm.click' 模拟 GTM 内置点击事件，但后来我得出结论，这可能不是最好的主意.. hacky，会导致需要过滤的重复事件，并且会混淆一个不知道发生了什么的人。虽然我认为可以使用内置的 GTM 变量，例如 'gtm.elementClasses': target.className || ''、'gtm.elementId': target.id || ''、'gtm.elementTarget': target.target || ''、'gtm.elementUrl': target.href || target.action || '' 等。

【讨论】：