Google 标签管理器变量 - 根据字段标签提取价格

Question

我相信我的用例中的类的价值会轮换或更改，这导致我当前的方法不起作用。

目前的方法如下：

var elements = document.querySelectorAll('ul.sc-kUVfrs.cDZGmz li.sc-kbQyxg span.sc-kYxDKI.sc-iiUMNf.YHzWW.cmsXMM');

我有兴趣了解如何从标题中解析给定文本的值。在下面的示例中，列表中的最后一个值标记为“估计总成本”，其对应值“$1,377.00”。

是否可以在 GTM 中编写一个自定义 JavaScript 变量，根据查找值“估计总成本”返回我们的值“$1,377.00”？

<li class="sc-iyNfIN kzTAaw"><span class="sc-kYxDKI odYTF">Estimated Total Cost: </span><span class="sc-kYxDKI sc-HkLeE YHzWW iIlOcP">$1,377.00</span></li>

Answer 1

如果您无法访问前端代码来添加 datalayer.push() 命令，那么您可以根据 DOM 的结构选择元素。

您可以创建自定义 Javascript 变量来访问您的元素，例如：

function findElementText() {
    var lastLi = document.querySelector('ul li:last-child');
    var secondSpan = lastLi.querySelector('span:nth-child(2)');
    var textSecondSpan = secondSpan.textContent;
return textSecondSpan;
}

请注意，这种方法很脆弱，并使您的跟踪依赖于列表元素周围的页面结构。

如果您想搜索该特定文本，您可以尝试添加一个 HTML 脚本标签，其中包含以下代码，将价格推送到数据层：

<script>
function getPrice() {
var lis = document.getElementsByTagName('li');

for (var i = 0; i < lis.length; i++) {
    var firstSpan = lis[i].getElementsByTagName('span')[0];
    var secondSpan = lis[i].getElementsByTagName('span')[1];
    console.log(firstSpan.textContent);
    if (firstSpan.textContent.trim() === 'Estimated Total Cost:') {
        return dataLayer.push({'event':'eventName','price': secondSpan.textContent});
    }
  }
}
getPrice();
</script>