寻求Google Tag Manager自定义JS变量统计标题标签数量方案

一、单独统计单个标题标签的变量 #

针对

、

、

分别创建自定义JavaScript变量，操作和代码如下：

1. 在GTM后台新建自定义JavaScript变量
2. 对应标签的统计代码：
   • 统计

     数量：

     function() {
       return document.querySelectorAll('h2').length;
     }
     

   • 统计

     数量：

     function() {
       return document.querySelectorAll('h3').length;
     }
     

   • 统计

     数量：

     function() {
       return document.querySelectorAll('h4').length;
     }
     

   逻辑说明：document.querySelectorAll()会抓取页面内所有匹配选择器的元素，.length就是该标签的出现次数。

二、统计指定标签的总数量变量 #

新建一个自定义JavaScript变量，用以下代码实现

+

+

的总数统计：

function() {
  return document.querySelectorAll('h2, h3, h4').length;
}

如果需要复用单独统计的逻辑，也可以用这种写法：

function() {
  const h2Num = document.querySelectorAll('h2').length;
  const h3Num = document.querySelectorAll('h3').length;
  const h4Num = document.querySelectorAll('h4').length;
  return h2Num + h3Num + h4Num;
}

三、在GA4事件中配置参数 #

创建GA4事件标签时，在事件参数区域添加以下配置：

• 参数名设为h2_count，值选择对应的

  统计变量

• 参数名设为h3_count，值选择对应的

  统计变量

• 参数名设为h4_count，值选择对应的

  统计变量

• 参数名设为heading_total，值选择总数量统计变量

事件触发后，GA4就能接收并展示各标题标签的单独数量和总数量。

额外注意事项 #

• 若页面存在动态加载内容（如滚动加载、AJAX渲染），需将变量的触发时机调整为DOM Ready或Window Loaded，或者监听内容加载完成的自定义事件，确保统计的是完整页面内容
• 如果需要排除隐藏的标题标签，可修改选择器，例如document.querySelectorAll('h2:not([style*="display:none"])')，根据实际隐藏规则调整选择器逻辑

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