如何通过Google Tag Manager(GTM)向Hotjar发送虚拟页面浏览？

嘿，我之前刚好解决过这个问题！既然你已经通过GTM的dataLayer推送事件来触发GA的虚拟页面浏览，那完全可以复用这个流程来同步触发Hotjar的虚拟页面浏览，具体步骤如下：

1. 创建捕获虚拟页面数据的Data Layer变量 #

首先，确保你已经在GTM里创建了对应的数据层变量，用来捕获你推送到dataLayer里的虚拟页面信息。比如你推送的事件格式是：

dataLayer.push({
  event: 'virtualPageView',
  virtualPagePath: '/virtual/checkout-step',
  virtualPageTitle: '虚拟结算步骤页'
});

那你需要创建两个数据层变量：

• {{Virtual Page Path}}：对应virtualPagePath字段
• {{Virtual Page Title}}：对应virtualPageTitle字段

2. 新建Hotjar虚拟页面浏览的自定义HTML标签 #

在GTM里创建一个自定义HTML标签，粘贴以下代码：

<script>
  // 确保Hotjar脚本已加载完成再执行
  if (typeof hj !== 'undefined') {
    // 调用Hotjar的虚拟页面浏览方法
    hj('vpv', {{Virtual Page Path}}, {
      title: {{Virtual Page Title}}
    });
  }
</script>

这段代码的逻辑是：当Hotjar的全局hj对象存在时，调用它的vpv方法，传入你从dataLayer获取的虚拟页面路径和标题。

3. 设置标签的触发条件 #

给这个HTML标签配置和你GA虚拟页面浏览标签完全相同的触发条件——也就是你之前用来触发GA的那个自定义事件（比如virtualPageView事件）。这样只要dataLayer推送了该事件，就会同时触发GA和Hotjar的虚拟页面浏览请求，实现同步。

4. 测试验证 #

• 开启GTM的预览模式，触发虚拟页面事件，检查标签是否成功触发；
• 打开浏览器控制台，输入hj.debug(true)开启Hotjar调试模式，确认虚拟页面浏览是否被正确记录；
• 也可以在Hotjar的后台查看实时访问数据，验证虚拟页面是否被统计到。

补充提示 #

Hotjar官方文档确实主要强调直接在页面代码中调用hj('vpv', ...)，但通过GTM来实现的优势在于：你不需要修改页面原生代码，就能和现有的GA虚拟页面流程完全对齐，所有跟踪逻辑都统一在GTM中管理，后续维护也更方便。

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