如何在Next.js项目中正确检测广告拦截器并显示警告？

方案一：检测广告容器尺寸（适配自定义广告位） #

广告拦截器常通过隐藏容器或阻止渲染来屏蔽广告，可通过监听容器尺寸判断：

• 给广告容器加特定类名（如ad-container），内部放置一个高度固定的隐藏占位元素
• 用useEffect监听容器实际渲染后的高度，若远低于预期阈值（比如<20px），判定为被拦截
• 示例代码：

import { useEffect, useRef, useState } from 'react';

export default function AdSlot({ adType }) {
  const [adBlocked, setAdBlocked] = useState(false);
  const adRef = useRef(null);

  useEffect(() => {
    const checkAdBlock = () => {
      if (!adRef.current) return;
      const { offsetHeight } = adRef.current;
      // 根据你的广告位预设高度调整阈值
      if (offsetHeight < 20) setAdBlocked(true);
    };

    // 初始检测+监听DOM变化（防止延迟拦截）
    checkAdBlock();
    const observer = new MutationObserver(checkAdBlock);
    observer.observe(adRef.current, { childList: true, subtree: true });

    return () => observer.disconnect();
  }, []);

  if (adBlocked) {
    return <div className="ad-warning">请关闭广告拦截器以支持本站运营</div>;
  }

  return (
    <div ref={adRef} className="ad-container">
      {/* 渲染谷歌/自定义广告内容 */}
      {adType === 'google' && <ins className="adsbygoogle" data-ad-client="ca-pub-XXXX" data-ad-slot="XXXX"></ins>}
      {adType === 'custom' && <div className="custom-ad">{/* 自定义广告内容 */}</div>}
      <div className="ad-detection" style={{ position: 'absolute', visibility: 'hidden', height: '120px' }}></div>
    </div>
  );
}

方案二：加载带广告关键词的资源（通用检测） #

广告拦截器会屏蔽含ad/ads等关键词的资源，可通过动态加载这类文件判断：

• 在public目录下创建空文件ad-detect.js，内容可写window.adDetected = true;
• 在全局入口（如_app.js）动态加载该文件，加载失败则判定为被拦截
• 示例代码：

import { useEffect, useState } from 'react';

function MyApp({ Component, pageProps }) {
  const [adBlocked, setAdBlocked] = useState(false);

  useEffect(() => {
    const script = document.createElement('script');
    script.src = '/ad-detect.js';
    script.onload = () => setAdBlocked(false);
    script.onerror = () => setAdBlocked(true);
    document.body.appendChild(script);

    return () => document.body.removeChild(script);
  }, []);

  return (
    <>
      {adBlocked && (
        <div className="global-ad-warning" style={{ position: 'fixed', top: 0, width: '100%', background: '#ffcc00', padding: '10px', textAlign: 'center' }}>
          检测到广告拦截器，请关闭以支持本站运营
        </div>
      )}
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

方案三：谷歌广告专属检测 #

利用谷歌广告的加载回调判断是否被拦截：

• 谷歌广告加载失败时会触发onError回调，也可定时检查广告容器是否有内容
• 示例代码：

import { useEffect, useState } from 'react';

export function GoogleAdSlot() {
  const [adBlocked, setAdBlocked] = useState(false);

  useEffect(() => {
    window.adsbygoogle = window.adsbygoogle || [];
    window.adsbygoogle.push({
      onError: () => setAdBlocked(true)
    });

    // 兜底检测：3秒后检查广告容器是否为空
    setTimeout(() => {
      const adElement = document.querySelector('.adsbygoogle');
      if (adElement && adElement.children.length === 0) setAdBlocked(true);
    }, 3000);
  }, []);

  if (adBlocked) {
    return <div className="ad-warning">请关闭广告拦截器</div>;
  }

  return <ins className="adsbygoogle" data-ad-client="ca-pub-XXXX" data-ad-slot="XXXX" style={{ display: 'block' }}></ins>;
}

实用注意事项 #

• 建议结合多种检测方式，避免单一方法的误判
• 检测脚本的命名和内容不要过于直白，防止被广告拦截器识别为检测逻辑
• 自定义广告位的容器要设置固定尺寸，避免因布局波动导致误判

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