使用JavaScript和Google代码管理器更改html内容

Question

我正在尝试使用Google跟踪代码管理器触发的javascript根据特定查询字符串更改部分网页HTML内容。

问题 - 它不稳定，它有时会起作用并显示图片，有时它不会无缘无故。

HTML

<style>#dc {display:none;}</style>
<img id="dc" class="alignleft wp-image-2685" src="/someImage.png" width="269" height="400" />

的JavaScript

<script type="text/javascript">
     $(document).ready(function() {
            $('#dc').show();
        } 
       );
</script>

以下是GTM中的标签：

我已经测试了Tag是否正在触发以及所有，并且它正确触发（当查询串dc = 1时），这是触发器：

任何人都知道为什么它不能稳定运行？我该怎么解决？

Answer 1

看起来你有竞争条件：在加载jQuery之前，GTM标签似乎在某些情况下被触发（因此$ is not a function错误，因为$当时不存在标签被执行，之所以只使用Chrome而不是Firefox，是因为并非所有浏览器的行为都相同：））。

您可以做的是在jQuery

之后在代码中插入以下脚本

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  dataLayer = window.dataLayer || [];
  dataLayer.push({event: "jquery_loaded"});
</script>

然后使用该自定义事件创建GTM触发器：

并将DOM Ready触发器替换为该触发器。

如果您在2个条件下进行竞赛（加载了jQuery并且某些内容被动态加载），那么您可以编写一个带有setInterval的小循环，它会在两个条件下触发GTM事件（用作触发器）满足了。

Answer 2

它在Firefox而非Chrome中运行的原因可能是Firefox自57版以来实施的拖尾功能。它会延迟跟踪脚本的加载（最多6秒），直到加载其他脚本为止。这就是为什么在你的标签之前加载jquery的原因，如Max。