如何用JS替代PHP实现非Bot用户加载Adsense脚本？

核心问题回顾 #

原本通过PHP的detectBottypes函数检测User-Agent，仅在photo/*路由、访问者非Bot时渲染Adsense脚本。但页面缓存机制存在缺陷：若页面首次被Bot爬取，缓存后的页面不含广告脚本，真实用户访问也无法看到广告。

解决方案思路 #

• 无论访问者是否为Bot，都在页面中渲染Adsense脚本（确保缓存内容包含完整脚本）
• 通过客户端JS判断访问者是否为非Bot，仅在符合条件时执行Adsense广告初始化逻辑

具体实现代码 #

1. 页面中嵌入Adsense基础脚本

直接在页面的<head>或<body>底部加载Adsense脚本，确保缓存后所有访问者都能获取到脚本：

<!-- 全局加载Adsense基础脚本，不受Bot检测影响 -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXX"
     crossorigin="anonymous"></script>

2. JS实现Bot检测与广告控制逻辑

// 模拟原PHP detectBottypes函数的Bot检测逻辑，可根据实际需求补充关键词
function isBot() {
    const userAgent = navigator.userAgent.toLowerCase();
    const botKeywords = [
        'bot', 'crawl', 'spider', 'slurp', 'curl', 'wget', 'googlebot',
        'bingbot', 'yandexbot', 'baiduspider', '360spider', 'sogou spider'
    ];
    return botKeywords.some(keyword => userAgent.includes(keyword));
}

// 判断当前是否为photo/*路由，可根据项目路由规则调整
function isPhotoRoute() {
    return window.location.pathname.startsWith('/photo/');
}

// 初始化Adsense广告，仅非Bot且在photo路由时执行
function initAdsense() {
    if (!isBot() && isPhotoRoute()) {
        // 替换为你的Adsense广告配置
        (adsbygoogle = window.adsbygoogle || []).push({
            google_ad_client: "ca-pub-XXXXXXXXXXXXXXX",
            enable_page_level_ads: true
            // 若为指定广告单元，可添加slot等参数
        });
    }
}

// 页面加载完成后执行初始化
window.addEventListener('DOMContentLoaded', initAdsense);

补充说明 #

• isBot函数的关键词列表可完全对齐原PHP的detectBottypes检测规则，保证一致性
• isPhotoRoute函数需根据项目实际路由方式调整（如单页应用可结合路由框架API判断）
• 该方案既满足爬虫访问时不加载广告，又确保缓存后真实用户能正常看到广告

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