Google 跟踪代码管理器：返回被跟踪链接/元素在 DOM 中的位置，{{Click Element}} 变量答案

【问题标题】：Google Tag Manager: return position in the DOM of the tracked link/element, {{Click Element}} variableGoogle 跟踪代码管理器：返回被跟踪链接/元素在 DOM 中的位置，{{Click Element}} 变量
【发布时间】：2021-03-16 14:17:48
【问题描述】：

背景说明：

我正在使用 Google 跟踪代码管理器 (GTM) 跟踪网页上链接的点击次数，并已成功设置，并使用 python 代码从 API 中提取数据。但是，GTM 目前不会返回点击链接页面上位置的任何指示。我想将被点击元素在 DOM 中的位置放入事件标签中。

这样做的目的是双重的：首先，我可以区分相同的链接（即具有相同链接文本且指向相同目的地的链接）。其次，这样我就可以识别链接在页面的多个部分中的哪个部分：它在侧边栏、顶部栏、主要内容中等等。

问题

我尝试过使用 {{Click Element}} 变量，但这只会返回链接的 href，而不是 DOM 上的位置。
这很令人费解，因为当我在 GTM 中进入预览模式并查看数据层时，我非常清楚地看到有一个推送 API 调用来发送 DOM 位置：

dataLayer.push({  
  event: 'gtm.click',  
  gtm.element: 'https://  [rest of URL]   : html.js.yes-js.js_active >   
               [lots more DOM elements separated with >s of which I am only including a few]    
               > div#page-container > div#et-main-area > div#main-content > h3.rpwe-title > a',  
  gtm.elementClasses: '',  
  gtm.elementId: '',  
  gtm.elementTarget: '',  
  gtm.elementUrl: __*~~URL~~*__,  
  gtm.uniqueEventId: 425  
})

在 GTM 预览页面的“变量”选项卡中，Click Element 显示如上：它是一个Data Layer Variable，它是一个字符串，它的值首先是 URL，然后是冒号，然后是对链接在 DOM 上的位置的详细描述，所有父级都从文档的根开始，一直到单击的链接。

那么，为什么当我将 {{Click Element}} 变量添加到 GTM 事件标签时，它只返回链接的 href，而不是 DOM 上的位置？我提交更改并在 GTM 中发布新版本，然后转到 Google Analytics，那里只显示链接 href。

我尝试过的

进入 chrome 中的 DevTools（右键单击，检查）并进入控制台并输入 dataLayer 显示一些事件，例如gtm.elementVisibility，确实有一个看起来相当庞大的 gtm.element 对象。在这个gtm.element 对象中，您可以单击parentElement，然后它有自己的parentElement，依此类推，直到DOM 的顶层。所以这些数据显然都在那里。
为了访问它，我在 GTM 中尝试了一个自定义 JS 变量，它使用 JSON.stringify 将 Click Element 转换为字符串。这不起作用，我怀疑是因为 gtm.element 对象太复杂了，其中包含嵌套对象和对对象内许多位置的循环引用。
我不知道 Javascript，我在黑暗中摸索，我只是想通过 Google Analytics 获取一个不错的字符串，然后从那里获取我的 python 代码，以便我可以根据需要对其进行操作。

不实用的可能解决方案

在 GTM 中，我可以为同一事件创建多个触发器，并为每个触发器指定 Click Element 匹配页面每个部分的 CSS 选择器。但是，这将需要为每个部分设置一个单独的触发器，如果我需要更新触发器设置，这会变得很混乱。它也不能帮助我区分相同的链接。

问题

为什么上述方法不能很好地工作，我该如何实现（最好使用最少的 javascript 编码......）？谢谢！

【问题讨论】：

标签： javascript dom google-tag-manager

【解决方案1】：

Simo Ahava 在https://www.simoahava.com/analytics/create-css-path-variable-for-click-element/ 上有一篇关于这个问题的精彩博文（不知道为什么多次谷歌搜索都没有找到这个......）

正如问题中所怀疑的那样，他解释说 Click Element 实际上并不是一个带有 DOM 中链接位置的字符串，正如 GTM 预览模式所指示的那样。它是一个复杂的 HTML 元素。

他继续提供 javascript 代码，该代码采用这个复杂的 Click 元素并提取链接的 DOM 中的位置：

function() {
  // copied from https://www.simoahava.com/analytics/create-css-path-variable-for-click-element/
  // Build a CSS path for the clicked element
  var originalEl = {{Click Element}};
  var el = originalEl;
  if (el instanceof Node) {
    // Build the list of elements along the path
    var elList = [];
    do {
      if (el instanceof Element) {
        var classString = el.classList ? [].slice.call(el.classList).join('.') : '';
        var elementName = (el.tagName ? el.tagName.toLowerCase() : '') + 
            (classString ? '.' + classString : '') + 
            (el.id ? '#' + el.id : '');
        if (elementName) elList.unshift(elementName);
      }
      el = el.parentNode
    } while (el != null);
    // Get the stringified element object name
    var objString = originalEl.toString().match(/\[object (\w+)\]/);
    var elementType = objString ? objString[1] : originalEl.toString();
    var cssString = elList.join(' > ');
    // Return the CSS path as a string, prefixed with the element object name
    return cssString ? elementType + ': ' + cssString : elementType;
  }
}

这会返回类似于 'HTMLDivElement: html > body > div#blog > div.hasCoverMetaIn#main' 的内容，其中 div 是元素的类型，元素类跟在句点 (.) 之后，元素 id 跟在哈希 (#) 之后。

非常感谢 Simo Ahava，希望可以在这里分享他的代码。请参阅他的文章以获得更全面的解释

【讨论】：