Hugo 静态博客实现 Google AdSense 广告位懒加载：从原理到实践

<template id="ad-template">
  <div class="ad-content">
    <ins class="adsbygoogle"></ins>
    <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
  </div>
</template>

<!-- ═══════════════════════════════════════════════ -->
<!-- 首屏直接加载：ad_5_1（第一个广告位，用户最先看到） -->
<!-- ═══════════════════════════════════════════════ -->
<div class="sidebar-module">
  <h4>广告赞助</h4>
  {{ partial "payads/ad_5_1.html" . }}
</div>

<!-- ... 其他内容模块（分类、标签等）... -->

<!-- ═══════════════════════════════════════════════ -->
<!-- 非首屏广告位：全部懒加载 -->
<!-- ═══════════════════════════════════════════════ -->
{{ partial "lazy-ad.html" (dict "slot" "5_2" "context" .) }}

<!-- ... 其他内容模块（最新文章）... -->

{{ partial "lazy-ad.html" (dict "slot" "5_3" "context" .) }}

<!-- ... 以此类推 ... -->

{{ partial "lazy-ad.html" (dict "slot" "5_12" "context" .) }}

// 错误：克隆的 script 不执行
var clone = template.content.cloneNode(true);
placeholder.appendChild(clone); // 脚本不执行！

// 正确：重新创建 script 元素
var oldScript = clone.querySelector("script");
var newScript = document.createElement("script");
newScript.textContent = oldScript.textContent;
oldScript.parentNode.replaceChild(newScript, oldScript); // 执行！

/**
 * Hugo 侧边栏广告位懒加载
 *
 * 功能：
 * 1. Intersection Observer 检测广告位可见性
 * 2. 从 <template> 克隆内容到 DOM
 * 3. 重新创建 <script> 元素触发执行
 * 4. 分批初始化 adsbygoogle，避免冲突
 *
 * @version 1.0.0
 */

(function () {
  "use strict";

  // ═══════════════════════════════════════════════
  // 配置
  // ═══════════════════════════════════════════════
  var CONFIG = {
    // 提前预加载距离（px）：距离视口 400px 时开始加载
    rootMargin: "400px",

    // 每批最多激活的广告位数量
    // AdSense 建议同时 push 不超过 3 个，设为 2 更保守
    batchSize: 2,

    // 批次间隔（ms）：避免 adsbygoogle 初始化冲突
    batchInterval: 500,

    // adsbygoogle push 延迟（ms）：等 DOM 稳定后再 push
    adsbygoogleDelay: 100,
  };

  // ═══════════════════════════════════════════════
  // 状态
  // ═══════════════════════════════════════════════
  var pending = []; // 待处理队列
  var isProcessing = false; // 是否正在处理批次
  var activatedSlots = {}; // 已激活的广告位（防重复）

  // ═══════════════════════════════════════════════
  // 核心函数：执行容器内的所有脚本
  // ═══════════════════════════════════════════════

  /**
   * 重新创建 <script> 元素以触发执行
   *
   * 原理：浏览器只对通过 document.createElement 创建的 script
   * 执行解析。cloneNode 或 innerHTML 插入的 script 不执行。
   */
  function executeScripts(container) {
    var scripts = container.querySelectorAll("script");

    for (var i = 0; i < scripts.length; i++) {
      var oldScript = scripts[i];
      var newScript = document.createElement("script");

      // 复制所有属性（src, type, async 等）
      for (var j = 0; j < oldScript.attributes.length; j++) {
        var attr = oldScript.attributes[j];
        newScript.setAttribute(attr.name, attr.value);
      }

      // 复制脚本内容（内联脚本）
      newScript.textContent = oldScript.textContent;

      // 替换旧元素 → 触发浏览器执行
      oldScript.parentNode.replaceChild(newScript, oldScript);
    }
  }

  // ═══════════════════════════════════════════════
  // 核心函数：激活单个广告位
  // ═══════════════════════════════════════════════

  function activateAd(container) {
    var slot = container.getAttribute("data-ad-slot");

    // 防重复激活
    if (!slot || activatedSlots[slot]) return;
    activatedSlots[slot] = true;

    var template = container.querySelector("template.lazy-ad-template");
    var placeholder = container.querySelector(".lazy-ad-placeholder");

    if (!template || !placeholder) {
      console.warn("[LazyAds] Missing template or placeholder for slot:", slot);
      return;
    }

    // 1. 从 <template> 克隆内容（DocumentFragment）
    var content = template.content.cloneNode(true);

    // 2. 清空占位符，插入真实广告内容
    placeholder.innerHTML = "";
    placeholder.appendChild(content);

    // 3. 移除占位符样式，恢复普通容器样式
    placeholder.classList.remove("lazy-ad-placeholder");
    placeholder.style.cssText = "";

    // 4. 执行所有脚本（关键步骤！）
    executeScripts(placeholder);

    // 5. 延迟初始化 adsbygoogle
    // 原因：等 DOM 插入完成、脚本执行完毕后，再 push
    setTimeout(function () {
      try {
        var ins = placeholder.querySelector("ins.adsbygoogle");
        if (
          ins &&
          window.adsbygoogle &&
          ins.getAttribute("data-adsbygoogle-status") !== "done"
        ) {
          (window.adsbygoogle = window.adsbygoogle || []).push({});
        }
      } catch (e) {
        console.warn("[LazyAds] adsbygoogle push failed:", e);
      }
    }, CONFIG.adsbygoogleDelay);

    console.log("[LazyAds] Activated slot:", slot);
  }

  // ═══════════════════════════════════════════════
  // 分批处理：避免同时初始化多个 adsbygoogle
  // ═══════════════════════════════════════════════

  /**
   * 为什么需要分批？
   *
   * Google AdSense 的 adsbygoogle.push({}) 是全局队列。
   * 如果同时 push 多个，可能导致：
   * 1. 广告填充率下降（竞争同一个请求槽）
   * 2. 控制台报错（某些情况下）
   * 3. 页面卡顿（大量 iframe 同时创建）
   */
  function processBatch() {
    if (isProcessing || pending.length === 0) return;
    isProcessing = true;

    // 取出本批次
    var batch = pending.splice(0, CONFIG.batchSize);
    var done = 0;

    batch.forEach(function (container) {
      // 使用 requestIdleCallback 或 setTimeout 让出主线程
      // 避免阻塞用户滚动
      var schedule =
        window.requestIdleCallback ||
        function (cb) {
          setTimeout(cb, 1);
        };

      schedule(function () {
        activateAd(container);
        done++;

        // 本批次完成，检查是否还有下一批
        if (done >= batch.length) {
          isProcessing = false;
          if (pending.length > 0) {
            setTimeout(processBatch, CONFIG.batchInterval);
          }
        }
      });
    });
  }

  // ═══════════════════════════════════════════════
  // Intersection Observer：检测可见性
  // ═══════════════════════════════════════════════

  function onIntersection(entries, observer) {
    entries.forEach(function (entry) {
      if (entry.isIntersecting) {
        // 进入视口，加入待处理队列
        observer.unobserve(entry.target);
        pending.push(entry.target);
        processBatch();
      }
    });
  }

  // ═══════════════════════════════════════════════
  // 初始化
  // ═══════════════════════════════════════════════

  function init() {
    var containers = document.querySelectorAll(".lazy-ad-container");
    if (containers.length === 0) return;

    console.log("[LazyAds] Found", containers.length, "lazy ad containers");

    // 降级处理：不支持 IntersectionObserver 的浏览器直接加载
    if (!window.IntersectionObserver) {
      for (var i = 0; i < containers.length; i++) {
        activateAd(containers[i]);
      }
      return;
    }

    var observer = new IntersectionObserver(onIntersection, {
      root: null, // 视口为根
      rootMargin: CONFIG.rootMargin, // 提前预加载
      threshold: 0, // 任意像素可见即触发
    });

    for (var i = 0; i < containers.length; i++) {
      observer.observe(containers[i]);
    }
  }

  // DOM 就绪后初始化
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init);
  } else {
    init();
  }
})();

/* 懒加载占位符样式 */
.lazy-ad-placeholder {
  background: #f8f9fa;
  border: 1px dashed #dee2e6;
  border-radius: 8px;
  padding: 40px 20px;
  text-align: center;
  color: #adb5bd;
  font-size: 13px;
  min-height: 250px; /* 预留空间，避免布局抖动 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.lazy-ad-placeholder .fas {
  font-size: 24px;
  margin-bottom: 8px;
  opacity: 0.5;
}

/* 已激活的广告位 */
.lazy-ad-container:not(:has(.lazy-ad-placeholder)) {
  /* 广告加载完成后的样式 */
}

// 检测懒加载广告位是否被提前移除
function checkLazyAdsBlocked() {
  var containers = document.querySelectorAll(".lazy-ad-container");
  var blocked = 0;

  containers.forEach(function (c) {
    // 如果容器被隐藏或移除，说明拦截器在工作
    var style = window.getComputedStyle(c);
    if (style.display === "none" || !document.body.contains(c)) {
      blocked++;
    }
  });

  return blocked > 0;
}

// 用户开始滚动时，提前加载下一屏广告
var scrollTimeout;
window.addEventListener(
  "scroll",
  function () {
    clearTimeout(scrollTimeout);
    scrollTimeout = setTimeout(function () {
      // 预加载视口下方 2 屏的广告
      preloadAds(2);
    }, 150);
  },
  { passive: true },
);

<!-- 只在第一个需要 slotbydup 的广告位加载脚本 -->
<script>
  // 标记已加载
  window._slotbydupLoaded = true;
</script>