WordPress站点AMP版本如何启用BlockAdBlock广告拦截检测脚本？

这个问题很典型，因为AMP框架对自定义JavaScript有严格的白名单限制，普通的BlockAdBlock脚本直接嵌入会被AMP判定为无效。下面分享几个符合AMP规范的解决方案：

方案一：使用AMP官方的amp-script组件实现自定义检测 #

AMP提供了amp-script组件，允许在AMP页面中运行符合规范的自定义JavaScript。你可以用它来实现广告拦截检测逻辑：

1. 引入amp-script组件
   首先需要在AMP页面的头部添加组件引用，你可以通过WordPress AMP插件的自定义代码功能，或者主题的hooks来添加：

   <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
   

2. 编写检测脚本并嵌入
   接下来添加内联的检测逻辑，用amp-script包裹（注意AMP限制DOM操作的方式，避免使用禁用的API）：

   <amp-script layout="container" script="blockadblock-detect">
     <script type="text/plain" target="amp-script" id="blockadblock-detect">
       // 简化版广告拦截检测逻辑
       function detectAdBlock() {
         const testAd = document.createElement('div');
         testAd.className = 'ad-test-element';
         // 设置隐藏的测试广告元素，避免影响页面
         testAd.style.cssText = 'position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;';
         document.body.appendChild(testAd);
         // 通过元素高度判断是否被拦截
         const isBlocked = !testAd.offsetHeight;
         testAd.remove();
         return isBlocked;
       }
   
       // 检测到拦截后的操作
       if (detectAdBlock()) {
         const notice = document.createElement('div');
         notice.style.cssText = 'position:fixed;top:0;left:0;right:0;background:#e74c3c;color:#fff;padding:12px;text-align:center;z-index:9999;';
         notice.textContent = '请关闭广告拦截器以支持我们的内容创作';
         document.body.appendChild(notice);
       }
     </script>
   </amp-script>
   

方案二：通过WordPress AMP插件的Hooks添加代码（适合开发者） #

如果你使用的是官方AMP插件或AMP for WP这类主流插件，可以通过PHP钩子在AMP模板中注入代码，这样更便于维护：

将以下代码添加到主题的functions.php文件，或者自定义插件中：

// 向AMP页面头部添加amp-script组件
add_action('amp_post_template_head', 'inject_amp_script_component');
function inject_amp_script_component() {
   echo '<script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>';
}

// 向AMP页面主体添加广告拦截检测脚本
add_action('amp_post_template_body', 'inject_adblock_detection_script');
function inject_adblock_detection_script() {
   ?>
   <amp-script layout="container" script="adblock-detect-logic">
     <script type="text/plain" target="amp-script" id="adblock-detect-logic">
       function checkAdBlock() {
         const testDiv = document.createElement('div');
         testDiv.className = 'adsbygoogle'; // 常用广告类名，易被拦截
         testDiv.style.position = 'absolute';
         testDiv.style.width = '100px';
         testDiv.style.height = '20px';
         testDiv.style.opacity = '0';
         document.body.appendChild(testDiv);
         const blocked = !testDiv.offsetHeight;
         testDiv.remove();
         return blocked;
       }

       if (checkAdBlock()) {
         const overlay = document.createElement('div');
         overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.9);display:flex;align-items:center;justify-content:center;color:white;font-size:18px;padding:20px;';
         overlay.innerHTML = '<div>请关闭广告拦截器，以便我们继续为您提供免费内容</div>';
         document.body.appendChild(overlay);
       }
     </script>
   </amp-script>
   <?php
}

关键注意事项 #

• AMP规范检查：添加代码后，务必使用AMP官方验证工具（比如页面添加#development=1参数查看控制台错误）确认没有违规，否则AMP页面会被标记为无效，影响移动端展示。
• 避免禁用API：AMP禁止使用document.write、eval等API，所以你的检测脚本必须严格遵循AMP的DOM操作规则。
• 测试兼容性：不同广告拦截工具的检测逻辑略有差异，建议在多款工具（比如AdBlock、uBlock Origin）中测试效果。

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