GTM自定义模板快速入门：用Community Template集成百度统计

什么是自定义模板？

自定义模板（Community Template） 是GTM提供的一种标准化标签封装方案。它允许开发者将原本需要手写 JavaScript 的复杂埋点逻辑，封装为：

• 安全 – 运行在沙盒环境，仅可通过声明式权限访问有限资源；
• 可配置 – 通过可视化字段让用户填写参数，无需触碰代码；
• 可复用 – 支持模板文件导出/导入，或发布至官方社区模板库（Gallery）供全球用户使用。

简单来说，自定义模板 = 把易出错、难维护的埋点脚本，变成像“插件”一样即插即用的标

模板编辑器预览

在GTM中点击「模板」→「新建」即可进入模板编辑器，界面如下:

其核心功能区分为6个标签页：

• 信息 – 定义模板名称、描述、版本、图标、作者等元数据
• 字段 – 设计用户在标签配置界面中填写的参数
• 代码 – 使用 GTM 沙盒 JavaScript API 实现模板的核心行为
• 权限 – 声明模板运行所需的访问权限（全局变量、Cookie、网络请求等）
• 测试 – 编写单元测试用例，模拟不同输入验证模板逻辑
• 预览 – 在 GTM 预览模式下实时调试模板行为（与测试互补）

实战：开发一个「百度统计」GTM自定义模板

下面通过完整步骤，演示如何将百度统计的基础代码封装为 Community Template。

Step 1 ：创建模板

在GTM中点击「模板」——「新建」，创建一个新的 Tag Template。

Step 2 ：填写模板信息

在「信息」中配置模板的基础属性：

• 名称：清晰表明用途，建议英文命名（便于社区发布），这里我命名为Baidu Tongji Basic Tracking
• 说明：说明使用条件及功能
• 图标：提升辨识度
• 是否勾选社区模板条款？
  • 发布到社区模板库：若计划发布到 Gallery，需勾选并同意条款；否则无需勾选
  • 仅内部/客户使用：若仅用于当前容器或团队，勾选后可防止误发布

 建议：即使不发布社区，也填写完整信息，方便团队协作与版本管理。

Step 3 ：设置字段

用于定义用户可填写的参数。

分析原始百度统计代码，看有哪些动态的参数是需要通过字段去传入：

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?86e39c295c390b79e347ea7a9cd47fe3";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

百度统计基础代码的唯一可变参数是 hm.js? 后面跟随的网站标识符（如 86e39c295c390b79e347ea7a9cd47fe3），我们将其抽象为字段 siteId。

点击「添加字段」→「文本输入」，配置如下：

• 字段名称：siteId,内部变量名，代码中通过 data.siteId 读取
• 显示名称：用户界面显示标签
• 字段类型：文本输入
• 是否必填：开启，防止用户遗漏
• 默认值：留空
• 验证规则：^[a-f0-9]{32}$，正则校验 32 位十六进制（百度标准格式），可防止格式错误
• 帮助文本：从百度统计后台获取的网站标识符，形如 86e39c295c…为用户提供引导

Step 4 ：编写沙盒代码

将百度统计官方脚本转换为 GTM 沙盒 API。我们加入更健壮的初始化、错误捕获和日志输出。

// 在此输入您的模板代码。
const injectScript = require('injectScript');
const setInWindow = require('setInWindow');
const copyFromWindow = require('copyFromWindow');
const encodeUriComponent = require('encodeUriComponent');
const log = require('logToConsole');

// 初始化 _hmt 队列
const hmt = copyFromWindow('_hmt');
if (!hmt) {
  setInWindow('_hmt', []);
}

// 读取 Site ID
const siteId = data.siteId;

// 构建 Baidu Tongji 脚本 URL
const scriptUrl = 'https://hm.baidu.com/hm.js?' + encodeUriComponent(siteId);

// 注入脚本
injectScript(
  scriptUrl,
  () => {
    log('Baidu Tongji loaded:', siteId);
    data.gtmOnSuccess();
  },
  () => {
    log('Baidu Tongji failed to load:', siteId);
    data.gtmOnFailure();
  }
);

// 完成代码后，调用 data.gtmOnSuccess。
data.gtmOnSuccess();

Step 5 ：配置权限

GTM 会根据代码自动检测所需 API，但您需要为这些 API 指定具体的允许范围。点击「权限」标签，按以下设置：

• 访问全局变量：读取或写入Cookie _hmt
• 注入脚本：就是从第三方域名加载资源，设置为https://hm.baidu.com/* （权限越精确，模板越容易通过社区审核）

Step 6 ：测试

单元测试针对的是Google跟踪代码管理器的自定义模板，可验证模板的功能。

输入一个合法的siteId去运行：

测试结果：

Step 7 ：保存

测试全部通过后，点击右上角「保存」。模板即出现在当前容器的「模板」列表中，可供创建标签时选用。

使用模板安装百度统计

安装百度统计

在GTM中点击「代码」—「新建」—「选择一个代码类型以开始设置」——「Baidu Tongji Basic Tracking」，命名为“百度统计”，做如下设置：

预览测试

GTM里预览测试，可以看到代码已经触发：

社区模板库

若您希望将模板贡献给全球用户，可按以下流程操作：

• 代码托管：将模板 JSON 文件（可通过 GTM 模板详情页「导出」获得）上传至公开 GitHub 仓库。
• 提交申请：访问 GTM Community Template Gallery 点击「提交模板」，填写仓库地址及模板信息。
• 审核等待：Google 官方团队进行安全审查，通常需 数周至数月（视队列长度而定）。
• 审核通过：模板将出现在 Gallery 中，所有 GTM 用户均可一键安装。

参考资料

• https://tongji.baidu.com/static/tongji/Instruction.pdf
• https://developers.google.com/tag-platform/tag-manager/templates?hl=zh-cn