如何在GA4/GTM中追踪CTA点击前的页面停留时长？

仅为标签添加On-screen duration参数无法实现该需求。
On-screen duration是统计元素本身在可视区域内曝光时长的内置参数，逻辑为元素进入视口开始计时、离开视口暂停计时，最终输出的是CTA按钮被用户实际看到的累计时长。如果CTA不在首屏，用户进入页面后滚动、浏览其他内容的时间不会被计入该参数，和「从进入页面开始累计到点击CTA的总停留时长」统计口径完全不符。

全程不需要改动原有自定义点击事件的上报框架，只需要补3段轻量逻辑即可：

• 记录页面进入时间戳
  在页面最早执行的入口逻辑处（不要放在资源加载完成的回调里，避免统计偏差），初始化时间戳变量：

  const pageEnterTime = Date.now()
  

• 点击触发时计算停留时长
  在CTA按钮的点击回调里、触发原有上报逻辑前，计算从进页面到点击的秒级时长：

  // 差值为毫秒，除以1000转成秒，按需取整或保留小数
  const stayDuration = Math.round((Date.now() - pageEnterTime) / 1000)
  

  若需要更高统计精度，可以把Math.round替换为.toFixed(1)保留1位小数，根据业务需求调整即可。

• 随原有事件共同上报
  把计算得到的stayDuration作为自定义字段，直接拼接到你已经配置好的CTA自定义点击事件的参数里上报即可。原有事件的点击次数统计逻辑完全不受影响，上报后就可以同时查看点击量、点击前停留时长两个维度的数据，支持后续做平均停留时长、不同停留区间的点击转化率等分析。

可选精度优化 #

如果需要排除用户把页面切到后台的无效停留时长，可以额外加一段页面可见性监听逻辑，累计页面处于隐藏状态的时长，计算停留值时把这部分时长从总差值里扣除即可，普通业务场景下直接用上述差值计算的结果已经能满足统计需求。
注意：如果是单页应用，路由切换到对应页面时需要重置pageEnterTime变量，避免统计成首次进入站点的时长。

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