使用 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 中的代码：

我已经测试了标签是否全部触发，并且它正确触发（当查询字符串 dc=1 时），这里是触发器：

有人知道为什么它不能稳定工作吗？我该如何解决？

Answer 1

您似乎遇到了竞争条件：在某些情况下，GTM 标记似乎在加载 jQuery 之前触发（因此出现 $ 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 秒），直到您的加载其他脚本。这就是 Max.

提到的 jquery 在您的标签之前加载的原因

使用 JavaScript 和 Google 标签管理器更改 html 内容

Change html content using JavaScript and Google Tag Manger

html

javascript

css

google-tag-manager