首页 > 解决方案 > 在 GTM 中用 Javascript 替换 html 内容

问题描述

如果 Google 跟踪代码管理器中的类“availability stati13”,则尝试用 javascript 将“sofort lieferbar”替换为“Lieferung auf Bestellung”。

<div class="availability stati13" style="">
sofort lieferbar

            <div class="blueinfo">
        <div style="display: none; opacity: 1;">in den nächsten Tagen Versandbereit</div>
    </div>
</div>

Javascript 本身工作正常,但在 GTM 中,如果使用自定义 html 标记触发,则不会发生任何事情。

<script type="text/javascript">
function myFunction() {
  var str = document.querySelector(".availability.stati13").innerHTML; 
  var res = str.replace("sofort lieferbar", "Lieferung auf Bestellung");
  document.querySelector(".availability.stati13").innerHTML = res;
}
</script>

有人知道,为什么 gtm 中的这个脚本不起作用?

GTM 工作正常,我试过这个:

document.body.innerHTML = document.body.innerHTML.replace(/hello/g, 'hi');

那会起作用,但我无法创建 if 类要求

标签: javascriptgoogle-tag-manager

解决方案


你定义了一个函数myFunction(),但你在哪里执行它?也许你应该把它写成一个自执行函数:

(function(){
    // your code here ...
})();

还要确保在准备好的 Dom 上执行此标记(以便您的代码找到您正在寻找的元素)

dom-ready-trigger-in-google-tag-manager-quick-guide/

此外,该行将document.querySelector(".availability.stati13")仅返回第一个元素!。如果这个类有多个 DOM 元素,您必须使用querySelectorAll.

var elements = document.querySelectorAll(".availability.stati13");    
for (i = 0; i < elements.length; ++i) {
  var str = elements[i].innerHTML;
  elements[i].innerHTML = str.replace("sofort lieferbar", "Lieferung auf Bestellung");
}

我使用for而不是forEach最大的兼容性。


推荐阅读