如何通过GTM为HubSpot搭建的网站启用Data Layers

完全存在成熟可落地的技术方案，不需要对HubSpot站点做复杂定制开发，就能通过GTM实现全站点标准化Data Layer部署，适配HubSpot所有原生页面类型，包括落地页、博客列表/详情页、产品页、表单页、交易结账页。

• 前置配置：全局嵌入GTM容器
  进入HubSpot后台的设置-网站-页面配置项，找到全局页眉、页脚的代码注入位置，把GTM平台生成的两段容器代码分别对应粘贴到页眉、页脚输入框，保存后全站点发布。配置完成后打开GTM预览模式，校验所有页面类型都能正常加载GTM容器。注意不要把GTM代码只嵌入单个落地页模板，这是很多人第一次部署会踩的坑——不同模板下的子页面会出现漏加载问题，必须选全局代码注入位。
• Data Layer基础初始化
  这一步全程在GTM内操作即可，不需要修改HubSpot侧代码：新建自定义HTML标签，触发规则设置为「所有页面 - 页面浏览最早触发时机」，标签内写入初始化代码，避免后续事件推送时出现Data Layer未定义的报错：

  window.dataLayer = window.dataLayer || [];
  

• 分场景完成数据推送
  根据需要采集的字段属性，用两种方式完成数据入层：
  • 读取HubSpot原生全局数据：HubSpot站点加载时会在全局上下文挂载hsVars对象，内置了页面类型、内容ID、表单ID、产品信息、交易金额等平台原生字段，不需要手动埋点，直接在GTM中新建自定义JavaScript变量读取对应字段即可，比如读取当前页面类型的变量示例：

    function() {
      return window.hsVars?.content?.content_type || '';
    }
    

    读取到字段值后，配置对应触发规则，在页面加载时把值推送到Data Layer即可。
  • 自定义业务事件推送：如果需要采集业务侧自定义维度（比如活动标识、用户等级、自定义转化属性），既可以在HubSpot对应页面的自定义代码模块中写入Data Layer推送代码，也可以直接在GTM中通过DOM选择器抓取页面公开的文本、属性值完成推送。以HubSpot表单提交事件为例，不需要修改表单原有代码，直接在GTM中监听全局事件即可完成提交数据入层：

    window.addEventListener('message', function(e) {
      if (e.data?.type === 'hsFormCallback' && e.data?.eventName === 'onFormSubmitted') {
        dataLayer.push({
          event: 'hubspot_form_submit',
          form_id: e.data.id,
          conversion_type: 'lead_capture'
        })
      }
    })
    

• 调试发布
  打开GTM预览模式，逐类页面验证Data Layer的推送时机、字段值是否符合预期，排查错值、漏推问题后，发布GTM容器正式版本即可生效。

• GTM自带预览调试面板：部署过程中最核心的调试工具，可以实时查看每个触发节点的Data Layer值变化、标签触发状态，不需要额外安装第三方工具
• HubSpot官方开发者文档：文档中列出了全局hsVars对象下所有可读取的字段说明，对照文档找字段比逐页调试效率高很多
• 浏览器调试扩展：可以安装GTM调试类、Data Layer检测类的浏览器扩展，日常排查问题时可以快速看到当前页面的Data Layer推送记录，不用每次都打开GTM预览模式

内容的提问来源于stack exchange，提问作者M. Awais