如何排查修复 Shopify 站点因 GTM 脚本导致的搜索功能故障？

本文共计1654个文字，预计阅读时间需要7分钟。

原文：

在 Shopify 主题中集成 Google Tag Manager（GTM）是常见做法，但许多开发者会遇到一个隐蔽却高频的问题：GTM 脚本加载后，站点原生搜索框（尤其是基于 framework--search 或 search.liquid 的模态/内联搜索）完全无响应——输入无反应、提交无跳转、甚至 DOM 事件监听器失效。正如案例所示，移除 GTM 代码后搜索立即恢复，说明问题确由 GTM 引入，而非主题逻辑本身缺陷。

? 核心排查路径：从现象到根源

该问题极少源于 GTM 容器代码本身语法错误，而几乎总是由以下三类连锁因素引发：

1. GTM 中部署的第三方标签（尤其是 CHTML 类型）动态注入了冲突脚本
   GTM 的“自定义 HTML”标签（Custom HTML Tag）常被用于插入第三方分析、A/B 测试或营销工具代码。若其中包含：

   • 全局 document.addEventListener('submit', ...) 或 document.querySelector('form[action="/search"]') 类选择器，且未做防重绑定；
   • 使用 e.preventDefault() 但未正确判断表单目标（如拦截了所有 <form> 提交）；
   • 动态创建 <script> 标签并覆盖 window.Shopify 或 window.searchForm 等主题依赖对象；
     → 这些都会直接劫持或破坏 Shopify 搜索表单的默认行为。