Question

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

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

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

问题是......

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

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

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

Answer 1

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

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

所以，请注意点击＆＃39;在文档上，然后使用event.composedPath()[0]获取原始目标，或者为不支持composPath的浏览器提供其中一个回退。我只是拼凑了这些，一起查看不同的文档并在不同的浏览器中尝试，所以不确定它是否完美。

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 || ''等。

Google跟踪代码管理器内置的Click触发器和shadow-dom的问题

1 个答案: