将 GTM 中的 html 内容替换为 Javascript

Question

尝试将 "sofort lieferbar" 替换为 "Lieferung auf Bestellung" 和 javascript if class "availability stati13" in Google Tag Manager。

<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 class 要求

Answer 1

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

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

还要确保在 Dom 上执行此标记准备就绪（以便您的代码找到您要查找的元素）

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

document.querySelector(".availability.stati13") 行也将 return 只有第一个元素！。如果这个 class 有多个 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 以获得最大的兼容性。

将 GTM 中的 html 内容替换为 Javascript

Replace html content with Javascript in GTM

javascript

google-tag-manager