GTM导致页脚下方出现 多余空白区域该如何移除

这个问题的核心原因是GTM容器本身、或者GTM中挂载的标签在页面DOM末尾注入了无容器包裹的 字符，浏览器会把这些游离的转义空格直接渲染成可见空白，撑出页脚下方的多余区域，按以下步骤操作即可彻底解决：

• 第一步：定位具体注入的代码位置
  打开浏览器开发者工具切换到Elements面板，找到页脚下方对应空白的游离文本节点（内容就是 ），右键选择「Break on -> subtree modifications」，刷新页面触发断点，直接从调用栈里定位到是GTM里的哪个标签、哪段代码注入的这些字符。
  90%以上的这类问题都是三类原因导致：GTM里自定义HTML标签的代码没写完整、标签末尾多写了 或空白字符、嵌入的第三方代码片段拼接异常把转义空格漏到了标签外部。
• 第二步：按定位到的根因修复
  • 如果是自定义HTML标签代码问题：进入GTM后台找到对应标签，检查代码首尾，直接删掉多余的 和游离空白，确认所有HTML标签都正确闭合，不要把可见文本写在<script>、<style>这类非渲染标签的外部。典型错误写法参考：

    <!-- 错误示例：script标签外部残留了&nbsp; -->
    <script>
      // 常规埋点逻辑
    </script>&nbsp;
    

    直接删掉script标签外的 就能解决。
  • 如果是GTM容器代码埋放位置错误：检查页面上的GTM嵌入代码，不要把GTM代码片段放在</body>标签外部，标准GTM嵌入代码应当分别放置在<head>标签内、<body>标签的开头位置，不要贴在整个DOM结构的最末尾。
  • 如果是第三方托管标签通过GTM加载时注入的游离字符（找不到可修改的代码源），可以加CSS兜底规则消除渲染影响：

    body {
      font-size: 0;
    }
    body > * {
      font-size: 16px; /* 替换为站点自身的正文字号默认值 */
    }
    

    注意兜底方案是次优选择，优先还是要找到注入源删掉多余字符，避免引发其他渲染异常。
• 第三步：验证上线
  改完GTM配置后先开启GTM预览模式，访问测试页面检查页脚下方空白是否消失，确认DOM结构里没有游离的 节点后，再发布GTM容器正式版本，清空站点CDN、页面缓存验证线上效果即可。

注意：不要直接写全局规则无脑隐藏body末尾节点，很容易误删GTM加载的正常埋点节点、功能节点，导致统计丢数或者页面功能异常，一定要先断点定位到具体注入代码再处理。

内容的提问来源于stack exchange，提问作者Chris Hayes