如何通过Google Tag Manager添加Google Programmable Search所需脚本

完全可以实现，不需要在页面源代码中额外引入独立脚本，所有加载逻辑可全部托管在GTM中。

操作步骤 #

• 登录你的Google Tag Manager后台，进入对应站点的工作空间
• 新建一个标签，类型选择「自定义HTML」
• 在HTML输入框中填入你拿到的CSE加载脚本，如果你需要同时动态插入搜索容器，可直接填入完整代码：

<!-- 已经在页面源码中写好搜索容器的话可跳过本行 -->
<div class="gcse-search"></div>
<script async src="https://cse.google.com/cse.js?cx=e14513e5d62xxxxxx"></script>

• 配置触发条件：如果搜索功能仅在特定页面生效，选择对应页面的页面视图触发器；如果全站生效，选择「所有页面」的页面视图触发器即可
• 保存标签后，使用GTM的预览模式测试加载效果，确认搜索功能正常运行后发布GTM版本即可

注意事项 #

• 如果你已经在页面源代码中提前写好了<div class="gcse-search"></div>容器，自定义HTML标签中只需要保留script部分即可
• 该方案完全满足减少独立脚本引入的需求，所有CSE相关的加载逻辑都由GTM统一管理，不需要修改站点源代码的脚本引入部分

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