Google Tag Manager自定义HTML标签报错：模板含无效代码求助

你的代码里存在几个明确的语法错误，这就是触发GTM“模板中存在无效的HTML、CSS或JavaScript”提示的核心原因：

• 第一行末尾的多余语法：第一行HTML结尾的';属于误引入的无效代码，看起来像是你把JS字符串拼接的片段直接复制过来了，纯HTML场景下完全不需要这个符号，直接删除即可。

• span标签的style写法彻底错误：HTML的style属性要求使用标准CSS语法，而你写成了JavaScript的属性赋值格式（比如style.width = "100%";），这完全不符合HTML规则。正确写法是把这些内容转换成CSS键值对，用分号分隔，同时要把JS驼峰式属性（比如backgroundColor）改成CSS短横线命名（background-color），zIndex改成z-index，示例如下：

  <span style="width: 100%; position: fixed; left: 0; bottom: 0; z-index: 999999; opacity: 1; transition: bottom 1.5s ease-out 0s, opacity .2s ease-out 1s, transform .2s ease-out 0s; background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px);"></span>
  

• 额外优化建议：为避免全局函数和页面其他代码冲突，建议把removeCustomBanner函数用自执行函数包裹，减少全局变量污染：

  <script>
    (function() {
      window.removeCustomBanner = function(element) {
        element.remove();
      };
    })();
  </script>
  

修复后的完整代码示例：

<div id="id-custom_banner" style="width: 100%; position: fixed; left: 0; bottom: 0; z-index: 999999; opacity: 1; transition: bottom 1.5s ease-out 0s, opacity .2s ease-out 1s, transform .2s ease-out 0s; background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px); display: flex; justify-content: center; align-items: center;">
  <div style="position: absolute; right: 0; top: -21px; cursor: pointer" onclick="removeCustomBanner(this.parentNode);">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16.6 17" style="width: 20px; height: 20px; filter: drop-shadow(1px 1px 2px #333); -webkit-filter: drop-shadow(1px 1px 2px #333)">
      <polygon fill="#FFF" points="15.5,1.7 13.7,0 7.7,6.1 1.8,0 0,1.7 6,7.9 0,14.1 1.8,15.9 7.7,9.7 13.7,15.9 15.5,14.1 9.5,7.9 "></polygon>
    </svg>
  </div>
  <div class="timer" style="position: absolute; left: 0; top: 0; z-index: 10; padding: 5px; color: #fff"></div>here add
</div>
<div>
  <span style="width: 100%; position: fixed; left: 0; bottom: 0; z-index: 999999; opacity: 1; transition: bottom 1.5s ease-out 0s, opacity .2s ease-out 1s, transform .2s ease-out 0s; background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px);"></span>
</div>
<script>
  (function() {
    window.removeCustomBanner = function(element) {
      element.remove();
    };
  })();
</script>

内容的提问来源于stack exchange，提问作者Mohamed Magdy Ahmed Ibrahim