在 GTM 中用 Javascript 替換 html 內容

Question

如果 Google 跟蹤代碼管理器中的 class “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 class 要求

Answer 1

你定義了一個 function myFunction()但是你在哪里執行它？ 也許你應該把它寫成一個自我執行的 function：

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

還要確保在准備好的 Dom 上執行此標記（以便您的代碼找到您正在尋找的元素）

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

此外，行document.querySelector(".availability.stati13")將僅返回第一個元素。如果此 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以獲得最大的兼容性。