Google Tag Manager无限滚动第二页滚动深度全部触发问题求助

问题根源 #

无限滚动加载新文章时，原有滚动深度监测的状态未重置，且新页面加载后当前滚动位置可能已超出所有阈值，导致四个滚动深度事件被同时触发。

解决方案 #

1. 重置滚动深度状态

在无限滚动完成新文章加载后，手动重置滚动深度的相关状态变量，避免沿用之前页面的滚动记录：

// 向dataLayer推送重置事件与初始状态
window.dataLayer.push({
  event: 'resetScrollDepth',
  scrollDepthPercent: 0,
  scrollDepthPixels: 0
});

同时确保滚动深度监测脚本在新内容加载后重新初始化，而非复用旧实例。

2. 调整GTM触发条件

• 给滚动深度触发规则添加初始加载排除逻辑：在触发条件中新增判断，排除页面初始加载时的滚动触发。例如通过自定义变量判断是否为新页面加载后的首次滚动，或结合window.performance.navigation.type过滤初始加载场景。
• 限定滚动深度计算范围：将滚动深度的监测目标从整个window改为单篇文章的容器元素，这样每次加载新文章时，监测范围自动切换为当前文章容器，不会受全局滚动位置影响。

3. 自定义滚动深度监测脚本（替代GTM默认模板）

如果GTM自带模板灵活性不足，可编写自定义脚本实现精准控制：

// 移除旧文章容器的滚动监听
const oldArticleContainer = document.querySelector('.article-container');
if (oldArticleContainer) {
  oldArticleContainer.removeEventListener('scroll', handleArticleScroll);
}

// 给新加载的文章容器绑定监听
const newArticleContainer = document.querySelector('.new-article-container');
if (newArticleContainer) {
  // 重置触发标记
  ['25','50','70','90'].forEach(t => newArticleContainer.dataset[`triggered${t}`] = 'false');
  newArticleContainer.addEventListener('scroll', handleArticleScroll);
}

// 滚动处理逻辑
function handleArticleScroll(e) {
  const container = e.target;
  const scrollPercent = (container.scrollTop / (container.scrollHeight - container.clientHeight)) * 100;
  const thresholds = [25,50,70,90];

  thresholds.forEach(threshold => {
    if (scrollPercent >= threshold && container.dataset[`triggered${threshold}`] === 'false') {
      window.dataLayer.push({
        event: `scrollDepth-${threshold}%`,
        scrollDepthPercent: threshold
      });
      container.dataset[`triggered${threshold}`] = 'true';
    }
  });
}

该脚本会针对单篇文章容器计算滚动深度，每次加载新文章时重置触发标记，彻底避免跨页面的异常触发。

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