使用 google 标签管理器将 javascript 插入特定的 div

Question

我目前使用 Google 标签实现 iframe 代码 - 使用以下代码将 HTML 自定义到目标页面上的特定 div (id="empty-div") 和它工作得很好。 Google 标签管理器（自定义 Html 标签 + 触发器）

自定义 HTML 标签：

<script type="text/javascript">
  jQuery('[id="empty-div"]').html('<iframe src="https://feed.mikle.com/widget/v2/115010/" height="1200px" width="100%" class="fw-iframe" scrolling="no" frameborder="0"></iframe>');
</script>

我想用下面提供的代码替换上面的 iframe 代码。

<script type="text/javascript" src="https://feed.mikle.com/js/fw-loader.js" data-fw-param="115010/"></script>

寻找简单的实现

在 Google 跟踪代码管理器

中发布时执行以下操作会导致错误

<script type="text/javascript">
  jQuery('[id="empty-div"]').html('<script type="text/javascript" src="https://feed.mikle.com/js/fw-loader.js" data-fw-param="115010/"></script>');
</script>

Answer 1

我查了导致错误的原因。

Parse error. Unterminated string literal

在 Gtag 中，您正在添加一个添加脚本的脚本。当您上传代码时，它将变成一大行文本。该文本以 <script> 开头，以 </script> 结尾。在 HTML 中一切正常，但由于它是 string 脚本标签将过早关闭，因为中间还有另一个 </script> 标签关闭第一个标签.让其后的所有代码都无法解析，并会抛出错误。

所以我建议您使用下面的脚本，它将使用原版 JavaScript 创建一个新的 <script> 元素，设置正确的 src 并将其放入 <div id="empty-div">.我选择不使用 jQuery，因为我发现没有它更容易解释会发生什么。它对性能或其他 JavaScript 没有影响。

我不明白为什么要在 div 中附加 <script>，因为这不是常见的做法，也不会对 <div id="empty-div"> 产生任何影响, 但我相信你有你的理由。

<script>
  (function () {
    var empty = document.getElementById('empty-div');    // Select empty div
    var script = document.createElement('script');       // Create new script element
    script.setAttribute('data-fw-param', '115010');      // Add the data-fw-param attribute
    script.async = true;                                 // Set async to true. This can improve performance
    script.src = https://feed.mikle.com/js/fw-loader.js; // Set the src to the script
    empty.appendChild(script);                           // Insert the script into the empty div
  }())
</script>

我在 this SO thread 中找到了问题的解释。请搜索浏览器或工具给您的错误以供将来参考。您将有更多机会更快地找到答案！

希望这对您有所帮助，祝您编码愉快！

使用 google 标签管理器将 javascript 插入特定的 div

Insert javascript to a specific div using google tag manager

javascript

google-tag-manager