首页 文章

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

提问于
浏览 次
5

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

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

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

Issue is...

如果你在你的html中使用shadow-dom，目标/数据将是错误的 . 这是因为当事件通过阴影 - 边界边界向上冒泡时，它们就会出现这种情况 .

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

Is there a solution for this that already exists?

google-tag-manager shadow-dom

1 回答

  • 3

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

    Create a document level click listener (just like GTM would) and fire custom click events but with data pulled from the original event target (rather than the re-targeted one).

    因此，在文档上监听'click'，然后使用 event.composedPath()[0] 获取原始目标，或者为完美的浏览器获取其中一个回退 .

    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内置点击事件，但我知道发生了什么 . 虽然我认为可以使用内置的GTM变量，如 'gtm.elementClasses': target.className || '' ， 'gtm.elementId': target.id || '' ， 'gtm.elementTarget': target.target || '' ， 'gtm.elementUrl': target.href || target.action || '' 等 .

    回复于

相关问题