谷歌标签管理器 - 在 javascript 变量中获取元素的父级答案

【问题标题】：Google Tag manager - Get parent of element in a javascript variable谷歌标签管理器 - 在 javascript 变量中获取元素的父级
【发布时间】：2017-11-03 01:07:40
【问题描述】：

在自定义的javascript变量中，如何获取被点击元素的父元素？

<div>
    <h2>Lorem Ipsum</h2>
    <a href="#"></a>
</div>

例如，我想在单击<a> 时获取<H2> 的内容，以便在单击<a> 时记录Lorem Ipsum。

【问题讨论】：

锚标签的父元素是div，而不是h2。
是的，第一步是获取 div 元素，然后我可以下拉到 h2 子元素

标签： javascript google-tag-manager

【解决方案1】：

使用 Jquery，你可以做这样的事情

$('a').click(function(){
 var h2Content = $(this).siblings('h2').text();
 console.log(h2Content);
});

小心，这段代码会在所有标签上放置一个点击事件处理程序。

【讨论】：

这是在 Google 跟踪代码管理器中。不能事先绑定点击。
那不是真的。您可以通过自定义 HTML 进行绑定。但是，最好通过使用 jquery 和您回答的 click 元素来检索值。

【解决方案2】：

似乎 Click Element 变量在这里工作得很好。很奇怪，我在 '' 中使用它，这使它只返回 url。但是你可以像这样使用它

function(){
    var title = jQuery({{Click Element}}).parent().find('h2').html();

    return title;
}

【讨论】：

我的上帝。我永远追求复杂的解决方案，当这一直有效的时候。谢谢

【解决方案3】：

我知道这是一个较老的问题，但在我自己搜索这个确切的问题时，我发现 this really helpful link 有一个解决方案。

您可以添加自定义变量。为此，请在 Google 跟踪代码管理器中转到 Variables，在 User-Defined Variables 下单击 New。选择Custom JavaScript 中的Variable Type，将其命名为Find Closest，然后输入以下代码：

function() {
  return function(target, selector) {
    while (!target.matches(selector) && !target.matches('body')) {
      target = target.parentElement;
    }
    return target.matches(selector) ? target : undefined;
  }
}

为您的具体情况添加另一个 JavaScript 变量。比如：

function() {
    var parentElement = {{Find Closest}}({{Click Element}}, 'div'),
        childElement = typeof parentElement !== 'undefined' ? parentElement.querySelector('h2') : undefined;
    return typeof childElement !== 'undefined' ? childElement.innerText : undefined;
}

注意：对于旧版浏览器，您可以为 matches 添加 polyfill。

【讨论】：