Google 跟踪代码管理器：return 在跟踪的 link/element、{{Click Element}} 变量的 DOM 中的位置
Google Tag Manager: return position in the DOM of the tracked link/element, {{Click Element}} variable
背景说明：
我正在使用 Google 跟踪代码管理器 (GTM) 跟踪网页上 link 的点击次数，并且已成功设置，并使用 python 代码提取数据来自 API。但是，GTM 目前 return 没有任何关于 link 页面上的 位置 的指示。我想在事件标签中放置单击元素的 DOM 中的位置。
这样做的目的有两个：首先，我可以区分相同的 links（即 links 具有相同的 link 文本并且去往相同的目的地).其次，这样我就可以确定 link 在页面的许多部分中的哪一个：它是在侧边栏中，在顶部栏中，在主要内容中等
问题
我试过使用 {{Click Element}} 变量，但这只是 return 的 link 的 href，而不是 DOM.[=55 上的位置=]
这很令人费解，因为当我在 GTM 中进入预览模式并查看数据层时，我非常清楚地看到有一个 push 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，然后是一个冒号，接着是 link 在 DOM 上的长描述，所有父项从文档的根开始，一直向下直到单击的 link.
那么为什么，当我将 {{Click Element}} 变量添加到 GTM 事件标签时，这只是 return link 的 href，而不是 [=65] 上的位置=]？我提交更改并在 GTM 中发布新版本，然后转到 Google Analytics，那里只显示 link 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 选择器。但是，这将需要为每个部分设置一个单独的触发器，如果我需要更新触发器设置，这会变得很混乱。它也不会帮助我区分相同的 links.
问题
为什么上面的方法不能很好地工作，我怎样才能做到这一点（最好使用最少的 javascript 编码...）？谢谢！
Simo Ahava 在 https://www.simoahava.com/analytics/create-css-path-variable-for-click-element/ 上有一篇关于这个问题的精彩博客 post（不知道为什么多次 google 搜索没有找到这个...）
正如问题中所怀疑的那样，他解释说，点击元素实际上并不是 DOM 中 link 位置的字符串，如 GTM 预览模式所示。这是一个复杂的 HTML 元素。
他继续提供 javascript 代码，该代码接受这个复杂的点击元素并提取 link 的 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;
}
}
这个 returns 看起来像 'HTMLDivElement: html > body > div#blog > div.hasCoverMetaIn#main' 的东西，其中 div 是元素的类型，元素 class(es) 跟在句点 (.) 之后，元素 ID跟在哈希 (#).
之后
非常感谢 Simo Ahava，希望可以在这里分享他的代码。请参阅他的文章以获得更完整的解释
背景说明：
我正在使用 Google 跟踪代码管理器 (GTM) 跟踪网页上 link 的点击次数，并且已成功设置，并使用 python 代码提取数据来自 API。但是，GTM 目前 return 没有任何关于 link 页面上的 位置 的指示。我想在事件标签中放置单击元素的 DOM 中的位置。
这样做的目的有两个：首先，我可以区分相同的 links（即 links 具有相同的 link 文本并且去往相同的目的地).其次，这样我就可以确定 link 在页面的许多部分中的哪一个：它是在侧边栏中，在顶部栏中，在主要内容中等
问题
我试过使用 {{Click Element}} 变量，但这只是 return 的 link 的 href，而不是 DOM.[=55 上的位置=]
这很令人费解，因为当我在 GTM 中进入预览模式并查看数据层时，我非常清楚地看到有一个 push 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，然后是一个冒号，接着是 link 在 DOM 上的长描述，所有父项从文档的根开始，一直向下直到单击的 link.
那么为什么，当我将 {{Click Element}} 变量添加到 GTM 事件标签时，这只是 return link 的 href，而不是 [=65] 上的位置=]？我提交更改并在 GTM 中发布新版本，然后转到 Google Analytics，那里只显示 link 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 选择器。但是，这将需要为每个部分设置一个单独的触发器，如果我需要更新触发器设置，这会变得很混乱。它也不会帮助我区分相同的 links.
问题
为什么上面的方法不能很好地工作，我怎样才能做到这一点（最好使用最少的 javascript 编码...）？谢谢！
Simo Ahava 在 https://www.simoahava.com/analytics/create-css-path-variable-for-click-element/ 上有一篇关于这个问题的精彩博客 post（不知道为什么多次 google 搜索没有找到这个...）
正如问题中所怀疑的那样，他解释说，点击元素实际上并不是 DOM 中 link 位置的字符串，如 GTM 预览模式所示。这是一个复杂的 HTML 元素。
他继续提供 javascript 代码，该代码接受这个复杂的点击元素并提取 link 的 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;
}
}
这个 returns 看起来像 'HTMLDivElement: html > body > div#blog > div.hasCoverMetaIn#main' 的东西，其中 div 是元素的类型，元素 class(es) 跟在句点 (.) 之后，元素 ID跟在哈希 (#).
非常感谢 Simo Ahava，希望可以在这里分享他的代码。请参阅他的文章以获得更完整的解释