如何结合GTM默认宏和jQuery？

Question

我一直在玩GTM一段时间，但现在我卡住了。

我需要获取包含H4标签的clicked element（）的父div，然后在H4中获取文本并将其传递给'Event Action'。

到目前为止，我已经设置了click监听器，但我不确定如何在jQuery选择器中使用{{element}}？

任何提示/想法？或者我这样做完全错了？ ： - ）

下面是DOM结构，它说明了点击的内容以及GTM宏需要抓取的内容：

Answer 1

我不确定JQuery如何适应这一点，但您可以使用自定义宏（GTM中的数据层类型）获取该值。您可以从gtm.element开始上下移动DOM，这是单击的元素。这样的事情是否适用于数据变量名称？

gtm.element.parentNode.parentNode.firstChild.firstChild.innerText

具体针对您的具体情况，但它应该完成工作。

Answer 2

我想到和@ wils484一样，但我想我会做一些更灵活的事情：

function(){

    //define element that was clicked
    var element      = {{gtm.element}};

    //define class
    var elementClass = 'border-box';

    /*go up the DOM tree and as long as there are still elements and
     *they do not contain the class name that contains our elementClass
     *that holds our h4 tag, keep moving. This should be good to go 
     *for earlier IE's.
     */

    while(element && !((" " + element.className + " ").indexOf(" " + elementClass + " ") > -1)){

        element = element.parentNode;
    }

    //find our h4 tag and grab the innerText, or if IE, grab textContent
    return element.querySelector('h4').innerText || element.querySelector('h4').textContent;
}

我是js的新手，过去一周花了一些时间在这上面，甚至发布了一笔赏金，试图找出如何找到这门课程。在帖子Check for class in element in while loop in javascript中有一些替代选项，但我觉得我从@Greg Burghardt得到的回复（稍微调整过早期版本的IE）对GTM来说是最多的。