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

文章目录[隐藏]

什么是自定义模板（Community Template）
实战：开发一个「百度统计」GTM自定义模板
使用模板安装百度统计
社区模板库
参考资料

什么是自定义模板（Community Template）

自定义模板（Community Template）是Google Tag Manager（GTM）提供的一种标准化、可复用的标签开发方式。

它允许开发者将原本需要手写JavaScript的埋点代码，封装成安全、可配置、可分享的模板，还可以在社区模板库（Gallery）中进行更广泛的分发，供全球用户使用。

简单说：把复杂、易出错的埋点代码，做成像“插件”一样可直接使用的Tag。

自定义模板编辑器预览

在GTM的模板编辑器（Template Editor）中，你可以创建、预览和测试自定义模板。

编辑器主要由5个核心区域组成：

信息 – 定义模板的基础信息，如名称、描述、图标等
字段 – 可视化配置界面，用于定义用户可填写的参数
代码 – 使用GTM沙盒化JavaScript API，定义模板的具体行为
权限 – 声明模板允许访问的全局变量、Cookie、外部资源等
测试 – 用于验证模板在不同输入条件下是否正常运行

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

下面通过一个完整示例，演示如何将百度统计（Baidu Tongji）基础代码封装为 Community Template。

Step 1 ：创建模板

在GTM中点击「模板」——「新建」（自定义代码）。

创建一个新的 Tag Template。

Step 2 ：设置信息（Info）

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

名称：给这个模板定给名称，我这里命名为Baidu Tongji Basic Tracking
说明：增加一些描述性的文字，表明模板的用途
图标：模板的logo（可选）
是否勾选社区模板条款？
- 发布到社区模板库：需要勾选并同意条款
- 仅内部/客户使用：无需勾选，可直接导出模板文件交付

Step 3 ：设置字段（Fields）

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

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

<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>

唯一的动态参数是86e39c295c390b79e347ea7a9cd47fe3，看着像是网站ID，将其定为siteId，字段的设计思路是：

字段名称：siteId
字段类型：文本输入
是否必填：是
说明：Baidu Tracking ID

点击「添加字段」——「文本输入」，做如下设置：

Step 4 ：开发代码（Code）

根据百度统计官方基础代码，使用GTM提供的沙盒API进行改写：

Baidu Tongji Basic Tracking

// 在此输入您的模板代码。
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();