javascript - 在 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 类要求
解决方案
你定义了一个函数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
最大的兼容性。
推荐阅读
- vue.js - Vue3 使用来自 node_modules 的组件
- sql - 没有分组依据的 SQL Server 聚合函数
- npm - 使用管道在 bitbucket 上的私有自托管 npm 存储库包
- sql - 尝试使用 json scraper 提取数据并将其插入 sqlite 数据库,但是我什么也没得到
- javascript - 两个日期之间的月差不正确
- c++ - 有没有办法在 C++ 内核程序运行时监控内存使用情况?
- c++ - 在 C++ 的地图上,插入是否比 emplace 更好?
- python - 有没有一种简单的方法可以从 numpy.dtype.descr 中删除“填充”字段?
- linux - 单元测试卡在 Jenkins 构建中
- firebase - Firestore :仅更新键值对