nth-position of element inside specific class 定义事件的自定义标签

Question

我们使用 class "mainContainer" 跟踪容器内的 link 点击次数，标记如下所示：

<div class="mainContainer">
   <div>
      <a href="x">link nr. 1</a>
   </div>
   <div>
      <a href="x">link nr. 2</a>
   </div>
   <div>
      <a href="x">link nr. 3</a>
   </div>
</div>

我已经设置了一个事件，它使用 css 选择器跟踪对这些 link 中任何一个的所有点击。mainContainer > div > a

事件具有类别 "referring link" 和操作 "referring link clicked"。作为标签，我们想给出 link 的实际 position/number。所以如果 link nr。单击 3，标签应命名为 "referring link number 3".

我假设，我可以用第 n 个子伪 class 来定位每个 link，所以 link 第三个是 .mainContainer > div:nth-child (3) > a 并为每次点击写一个特定的标签。

不幸的是，我不明白如何让 tagmanager 监听特定的 link 单击并将标签写到事件中。

有人可以帮忙吗？提前谢谢你。

Answer 1

我自己想出来的，这是解决方案，希望对其他人有帮助：

function() {
  var linkedArticles = document.querySelectorAll('.mainContainer > div > a');
  var clickedElement = {{Click Element}};
  var linkPosition = Array.prototype.indexOf.call(linkedArticles, clickedElement) + 1;
  return linkPosition;
}

nth-position of element inside specific class 定义事件的自定义标签

nth-position of element inside specific class defines the custom label for event

google-tag-manager