我们的网站上有一些抽象的链接。我们希望跟踪它们的点击以及H1标题，以便能够识别它被点击的块。我正在使用Google Tagmanager。页面上有更多具有相同结构的块，该功能在click事件中触发。
两个硬性要求：
它基本上是一个带有标题和链接列表的块，最后一个是“read more ..”。我想创建一个函数，返回链接的文本和H1在一个字符串中。
我使用gtm.click触发器并在标签中设置此值。对于大多数链接，{{Click Text}}就足够了，但不适用于此特定链接。
最后我希望函数返回：
“阅读更多.. |标题”
我有“阅读更多...”，但我无法从它上面的H1元素中获取标题。
https://gomakethings.com/climbing-up-and-down-the-dom-tree-with-vanilla-javascript/
搜索.parent-column，在父列中找到H1，获取innerText并将其添加到{{Clicked Text}}。
<div class="column-2 portlet-column span3" id="sdfghjkl">
<div class="portlet-dropzone portlet-column-content portlet-spacing portlet-column-content-only" id="layout-column_column-2">
<div class="portlet-boundary portlet-boundary_56_ portlet-static portlet-static-end portlet-borderless portlet-journal-content " id="fdsadf"> <span id="dsasdf"></span>
<div class="portlet-borderless-container">
<div class="portlet-body">
<div class="journal-content-article">
<style>
span.icon img { background-repeat: no-repeat; }
</style>
<div class="news_headline headline_news" style="font-family: Noa LT Std;"> <img src="dsasdfds" alt="content" class="icon icon_spacing">
<h1> <span class="headline g-font-content">H1 content</span> </h1>
</div>
</div>
<div class="entry-links"> </div>
</div>
</div>
</div>
<div class="portlet-boundary portlet-boundary_56_ portlet-static portlet-static-end portlet-borderless portlet-journal-content " id="content"> <span id="content"></span>
<div class="portlet-borderless-container">
<div class="portlet-body">
<div class="journal-content-article">
<div class="news_headline">
<div class="relatedArticles" style="margin-top:10px;">
<table>
<tbody>
<tr>
<td style="vertical-align: top;"> <img style="margin-left:9px; margin-right: 8px; color:#005B82;max-width:none;" src="content"> </td>
<td> <a href="content" target="_blank"> <span class="g-font-content content-magazine-color">LINK</span> </a> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="news_headline">
<div class="relatedArticles" style="margin-top:10px;">
<table>
<tbody>
<tr>
<td style="vertical-align: top;"> <img style="margin-left:9px; margin-right: 8px; color:#005B82;max-width:none;" src="content"> </td>
<td> <a href="content" target="_blank"> <span class="g-font-content content-magazine-color">LINK</span> </a> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="news_headline">
<div class="relatedArticles" style="margin-top:10px;">
<table>
<tbody>
<tr>
<td style="vertical-align: top;"> <img style="margin-left:9px; margin-right: 8px; color:#005B82;max-width:none;" src="content" target="_blank"> <span class="g-font-content content-magazine-color">Read more..</span> </a> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-links"> </div>
</div>
</div>
</div>
</div>
</div>
代码：
function() {
labelh1 = {{Click Text}};
if ({{Click Text}} == "Read more.."){
var parentElement = getClosest(event.target, '.parent-column');
var headingInParent = parentElement.querySelector('h1');
var labelh1 = {{Click Text}} + " | " + headingInParent.textContent
var getClosest = function ( elem, selector ) {
if (!Element.prototype.matches) {
Element.prototype.matches =
Element.prototype.matchesSelector ||
Element.prototype.mozMatchesSelector ||
Element.prototype.msMatchesSelector ||
Element.prototype.oMatchesSelector ||
Element.prototype.webkitMatchesSelector ||
function(s) {
var matches = (this.document || this.ownerDocument).querySelectorAll(s),
i = matches.length;
while (--i >= 0 && matches.item(i) !== this) {}
return i > -1;
};
}
// Get closest match
for ( ; elem && elem !== document; elem = elem.parentNode ) {
if ( elem.matches( selector ) ) return elem;
}
return null;
};
return labelh1;
}
答案 0 :(得分：0)
运行以下剪辑并点击“阅读更多...”
var readMoreAnchors = contains('span', /^Read\smore/i);
for(var i = 0; i < readMoreAnchors.length; ++i) {
var readMoreAnchor = readMoreAnchors[i];
addEvent('click', readMoreAnchor, function(event) {
var parentElement = getClosest(event.target, '.portlet-dropzone');
var headingInParent = parentElement.querySelector('h1');
console.log("{{Click Text}}" + " | " + headingInParent.textContent);
});
}
/**
* Get the closest matching element up the DOM tree.
* @private
* @param {Element} elem Starting element
* @param {String} selector Selector to match against
* @return {Boolean|Element} Returns null if not match found
*/
var getClosest = function ( elem, selector ) {
// Element.matches() polyfill
if (!Element.prototype.matches) {
Element.prototype.matches =
Element.prototype.matchesSelector ||
Element.prototype.mozMatchesSelector ||
Element.prototype.msMatchesSelector ||
Element.prototype.oMatchesSelector ||
Element.prototype.webkitMatchesSelector ||
function(s) {
var matches = (this.document || this.ownerDocument).querySelectorAll(s),
i = matches.length;
while (--i >= 0 && matches.item(i) !== this) {}
return i > -1;
};
}
// Get closest match
for ( ; elem && elem !== document; elem = elem.parentNode ) {
if ( elem.matches( selector ) ) return elem;
}
return null;
};
function addEvent(evnt, elem, func) {
if (elem.addEventListener) // W3C DOM
elem.addEventListener(evnt,func,false);
else if (elem.attachEvent) { // IE DOM
elem.attachEvent("on"+evnt, func);
}
else { // No much to do
elem[evnt] = func;
}
}
function contains(selector, text) {
var elements = document.querySelectorAll(selector);
return Array.prototype.filter.call(elements, function(element){
return RegExp(text).test(element.textContent);
});
}<div class="column-2 portlet-column span3" id="sdfghjkl">
<div class="portlet-dropzone portlet-column-content portlet-spacing portlet-column-content-only" id="layout-column_column-2">
<div class="portlet-boundary portlet-boundary_56_ portlet-static portlet-static-end portlet-borderless portlet-journal-content " id="fdsadf"> <span id="dsasdf"></span>
<div class="portlet-borderless-container">
<div class="portlet-body">
<div class="journal-content-article">
<style>
span.icon img { background-repeat: no-repeat; }
</style>
<div class="news_headline headline_news" style="font-family: Noa LT Std;"> <img src="dsasdfds" alt="content" class="icon icon_spacing">
<h1> <span class="headline g-font-content">H1 content</span> </h1>
</div>
</div>
<div class="entry-links"> </div>
</div>
</div>
</div>
<div class="portlet-boundary portlet-boundary_56_ portlet-static portlet-static-end portlet-borderless portlet-journal-content " id="content"> <span id="span-content"></span>
<div class="portlet-borderless-container">
<div class="portlet-body">
<div class="journal-content-article">
<div class="news_headline">
<div class="relatedArticles" style="margin-top:10px;">
<table>
<tbody>
<tr>
<td style="vertical-align: top;"> <img style="margin-left:9px; margin-right: 8px; color:#005B82;max-width:none;" src="https://marketplace.cdn.mozilla.net/img/uploads/addon_icons/508/508664-64.png?modified=cdda3e8d"> </td>
<td> <a href="content" target="_blank"> <span class="g-font-content content-magazine-color">LINK</span> </a> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="news_headline">
<div class="relatedArticles" style="margin-top:10px;">
<table>
<tbody>
<tr>
<td style="vertical-align: top;"> <img style="margin-left:9px; margin-right: 8px; color:#005B82;max-width:none;" src="https://marketplace.cdn.mozilla.net/img/uploads/addon_icons/508/508664-64.png?modified=cdda3e8d"> </td>
<td> <a href="content" target="_blank"> <span class="g-font-content content-magazine-color">LINK</span> </a> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="news_headline">
<div class="relatedArticles" style="margin-top:10px;">
<table>
<tbody>
<tr>
<td style="vertical-align: top;"> <img style="margin-left:9px; margin-right: 8px; color:#005B82;max-width:none;" src="https://marketplace.cdn.mozilla.net/img/uploads/addon_icons/508/508664-64.png?modified=cdda3e8d" target="_blank"> <a><span class="g-font-content content-magazine-color">Read more..</span> </a> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-links"> </div>
</div>
</div>
</div>
</div>
</div>
</div>