使用 JavaScript 和 Google Tag Manager 更改 html 内容答案

【问题标题】：Change html content using JavaScript and Google Tag Manger使用 JavaScript 和 Google Tag Manager 更改 html 内容
【发布时间】：2018-10-12 10:23:16
【问题描述】：

我正在尝试使用 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 中的标签：

我已经测试了代码是否正在触发，并且它可以正确触发（当 querystring dc=1 时），这里是触发器：

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

【问题讨论】：

您检查过错误吗？例如在控制台中
没有。这有帮助吗： gtm.js?id=GTM-NMC9HDC:90 Uncaught {Hd: "Uncaught TypeError: $ is not a function - :1"} Hd : "Uncaught TypeError: $ is not a function - :1" proto : 对象 |图片：i.gyazo.com/513fba4a4a8615fdc9f45123e1102a09.png
我猜它与jquery有关。确保它包含在正确的版本中
有趣的事实 - 经过多次测试，它在 Firefox 中 100% 工作，在 Chrome 中只有 5-10%

标签： javascript html css google-tag-manager

【解决方案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 事件（用作触发器） .

【讨论】：

感谢@Max，我正在使用 GTM 触发 JQuery 脚本。这可能是原因吗？如果是 - 触发它的最佳做法是什么，或者我应该直接在页面中实现它？
最常见的设计模式是从源代码 (learn.jquery.com/about-jquery/how-jquery-works) 同步加载您的核心库（例如 jQuery），正是为了避免像您这样的竞争条件。如果您仍想通过 GTM 加载它们（由于 GTM 的性质，这将是异步的），解决方案是在加载脚本时推送 dataLayer 事件（我提供了 1 个解决方案，这里是另一个 stackoverflow.com/questions/12820953/…），并使用那些事件作为触发器来执行其他任务（加载其他 JS 文件，使用 jQuery 等）
我已经在源代码中实现了jQuery脚本，它解决了这个问题，谢谢;)

【解决方案2】：

它在 Firefox 而不是 Chrome 中工作的原因可能是 Firefox 从 57 版开始实施的拖尾功能。它会延迟跟踪脚本的加载（最多 6 秒），直到加载其他脚本。这就是为什么 jquery 在你的标签之前加载的原因，正如 Max 所提到的那样。

【讨论】：