使用googletag.pubads().refresh()刷新懒加载广告时如何避免重复追踪？

核心问题分析 #

页面初始化时的首次请求会携带所有广告ID，后续调用googletag.pubads().refresh(lazyloadedAds)触发懒加载广告渲染时，又会发起单独请求，两次请求对应同一广告位，最终导致追踪数据重复。以下是几种仅发起一次请求的可行方案：

方案1：延迟懒加载广告位的定义与注册 #

页面加载阶段只处理非懒加载广告，懒加载广告位等到触发条件（如进入视口）时再定义并展示，跳过refresh步骤，确保仅发起一次请求。

// 初始化非懒加载广告
const nonLazySlot = googletag.defineSlot('/你的广告ID/非懒加载广告位', [728, 90], 'div-non-lazy')
  .addService(googletag.pubads());

googletag.pubads().enableSingleRequest();
googletag.enableServices();
googletag.display('div-non-lazy');

// 懒加载触发逻辑（示例：滚动监听）
function handleLazyLoad() {
  // 触发懒加载时才定义并展示广告位
  const lazySlot = googletag.defineSlot('/你的广告ID/懒加载广告位', [300, 250], 'div-lazy')
    .addService(googletag.pubads());
  
  googletag.display('div-lazy');
}

// 绑定滚动监听（可替换为IntersectionObserver等更高效的懒加载触发方式）
window.addEventListener('scroll', () => {
  const lazyAd = document.getElementById('div-lazy');
  const rect = lazyAd.getBoundingClientRect();
  if (rect.top < window.innerHeight) {
    handleLazyLoad();
    window.removeEventListener('scroll', arguments.callee); // 避免重复触发
  }
});

方案2：用定向参数控制初始请求范围 #

开启单请求模式（enableSingleRequest()），给懒加载广告位设置初始定向标记，让广告服务器在初始请求时忽略这些广告位；触发懒加载时清除定向标记再刷新，确保仅发起一次有效请求。

googletag.pubads().enableSingleRequest();

// 定义所有广告位，给懒加载广告位添加定向标记
const lazySlot = googletag.defineSlot('/你的广告ID/懒加载广告位', [300, 250], 'div-lazy')
  .setTargeting('load_mode', 'lazy')
  .addService(googletag.pubads());

const nonLazySlot = googletag.defineSlot('/你的广告ID/非懒加载广告位', [728, 90], 'div-non-lazy')
  .addService(googletag.pubads());

googletag.enableServices();
googletag.display('div-non-lazy');

// 触发懒加载时更新定向并刷新
function triggerLazyAd() {
  lazySlot.clearTargeting('load_mode');
  googletag.pubads().refresh([lazySlot]);
}

方案3：结合折叠空容器控制初始请求 #

开启collapseEmptyDivs()，初始时让懒加载广告位的容器保持隐藏状态，触发懒加载时再初始化广告位并展示，避免初始请求包含未准备好的广告位。

googletag.pubads().enableSingleRequest();
googletag.pubads().collapseEmptyDivs();

// 初始仅注册非懒加载广告
const nonLazySlot = googletag.defineSlot('/你的广告ID/非懒加载广告位', [728, 90], 'div-non-lazy')
  .addService(googletag.pubads());

googletag.enableServices();
googletag.display('div-non-lazy');

// 懒加载触发时初始化并展示广告位
function loadLazyAd() {
  const lazySlot = googletag.defineSlot('/你的广告ID/懒加载广告位', [300, 250], 'div-lazy')
    .addService(googletag.pubads());
  
  googletag.display('div-lazy');
}

注意事项 #

• 测试时需通过浏览器开发者工具的网络面板，确认初始请求不包含懒加载广告ID，仅在触发懒加载时发起对应请求。
• 懒加载触发逻辑（如滚动监听、IntersectionObserver）需做防抖处理，避免重复调用导致额外请求。

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