能否通过Google AdManager实现广告延迟（按需）加载？

针对你的场景（根据设备空间动态选择3个广告单元之一），Google Ad Manager有明确的官方支持方案，核心是动态创建广告容器+按需定义/激活广告位，以下是具体实现步骤和说明：

为什么<template>方式无效 #

GAM的googletag.defineSlot()或googletag.display()执行时，需要目标DOM容器已经存在于当前DOM树中。<template>标签内的内容未渲染前不属于活跃DOM，无法被GAM的脚本关联，因此广告无法正常加载。

官方可行实现方案 #

1. 提前加载GAM基础脚本 #

确保GPT（Google Publisher Tag）基础代码在页面初始化时加载，不要放在延迟渲染的内容里：

<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
  window.googletag = window.googletag || {cmd: []};
  googletag.cmd.push(function() {
    googletag.pubads().enableSingleRequest(); // 合并广告请求，可选
    googletag.enableServices();
  });
</script>

2. 动态判断并加载广告 #

根据当前可用空间（视口宽度、布局）选择对应广告单元，动态创建DOM容器并初始化广告：

// 1. 定义广告单元配置，根据空间返回对应参数
function getTargetAdConfig() {
  const viewportWidth = window.innerWidth;
  if (viewportWidth >= 1200) {
    return {
      adUnitPath: '/你的发布商ID/桌面广告单元ID',
      adSizes: [[728, 90], [970, 250]], // 支持的多尺寸
      containerId: 'desktop-ad'
    };
  } else if (viewportWidth >= 768) {
    return {
      adUnitPath: '/你的发布商ID/平板广告单元ID',
      adSizes: [[300, 250], [300, 600]],
      containerId: 'tablet-ad'
    };
  } else {
    return {
      adUnitPath: '/你的发布商ID/移动广告单元ID',
      adSizes: [[320, 50], [320, 100]],
      containerId: 'mobile-ad'
    };
  }
}

// 2. 核心加载广告函数
function loadTargetAd() {
  // 清理旧广告（避免冲突）
  const oldContainer = document.querySelector('.active-ad-container');
  if (oldContainer) oldContainer.remove();
  if (window.currentAdSlot) {
    googletag.cmd.push(() => googletag.destroySlots([window.currentAdSlot]));
  }

  // 获取当前需加载的广告配置
  const config = getTargetAdConfig();
  // 创建新广告容器并插入DOM
  const newContainer = document.createElement('div');
  newContainer.id = config.containerId;
  newContainer.className = 'active-ad-container';
  document.getElementById('ad-host').appendChild(newContainer); // 替换为你的广告父容器ID

  // 初始化并显示广告
  googletag.cmd.push(function() {
    window.currentAdSlot = googletag.defineSlot(
      config.adUnitPath,
      config.adSizes,
      config.containerId
    ).addService(googletag.pubads());
    
    googletag.display(config.containerId);
    // 若需强制刷新广告，可调用：
    // googletag.pubads().refresh([window.currentAdSlot]);
  });
}

// 3. 触发时机：页面加载、窗口尺寸变化时调用
window.addEventListener('load', loadTargetAd);
window.addEventListener('resize', () => {
  // 防抖处理，避免频繁请求
  clearTimeout(window.adResizeTimer);
  window.adResizeTimer = setTimeout(loadTargetAd, 300);
});

关键注意事项 #

• 始终保证广告容器在执行defineSlot/display前已插入活跃DOM。
• 切换广告时必须用googletag.destroySlots销毁旧广告位，防止内存泄漏和请求冲突。
• 窗口 resize 时添加防抖逻辑，避免短时间内多次触发广告请求。
• 若使用单请求模式（enableSingleRequest），可减少HTTP请求数，适合需要加载多个广告的场景。

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