如何解决AdBlocker拦截Google的analytics.js与platform.js问题？

这确实是个非常普遍的问题，尤其是隐私保护类插件（AdBlocker、Ghostery等）现在几乎是浏览器标配，分享几个我在项目中亲测有效的解决思路：

1. 反向代理脚本到自有域名 #

广告拦截器大多是通过域名规则拦截Google的资源，把这两个脚本的请求路由到你自己的域名下，就能绕过拦截。

具体操作： #

在你的服务器上配置反向代理，将自有域名下的路径映射到Google的脚本地址。比如用Nginx的话，添加以下配置：

# 代理Google Analytics脚本
location /analytics.js {
    proxy_pass https://www.google-analytics.com/analytics.js;
    proxy_set_header Host www.google-analytics.com;
    proxy_cache_valid 24h; # 缓存一天，减少重复请求
}

# 代理Google登录脚本
location /platform.js {
    proxy_pass https://apis.google.com/js/platform.js;
    proxy_set_header Host apis.google.com;
    proxy_cache_valid 24h;
}

之后在你的Web应用里，把脚本引用改成自己域名的路径：

<!-- 原来的Analytics引用 -->
<!-- <script src="https://www.google-analytics.com/analytics.js"></script> -->
<!-- 改成代理后的路径 -->
<script src="/analytics.js"></script>

<!-- 原来的Google登录引用 -->
<!-- <script src="https://apis.google.com/js/platform.js"></script> -->
<!-- 改成代理后的路径 -->
<script src="/platform.js"></script>

2. 检测脚本加载失败并降级处理 #

即使做了代理，也可能存在被拦截的情况（比如拦截器通过脚本内容识别），这时候可以在代码中检测脚本是否加载成功，避免页面报错，同时做兜底处理。

示例代码： #

// 加载Analytics脚本（使用代理后的路径）
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','/analytics.js','ga');

// 3秒后检测是否加载成功
setTimeout(() => {
    if (typeof ga === 'undefined') {
        // 加载失败，这里可以选择不执行跟踪逻辑，或者提示用户
        console.log('Analytics服务暂时不可用');
    } else {
        ga('create', 'UA-XXXXXXXXX-X', 'auto');
        ga('send', 'pageview');
    }
}, 3000);

// Google登录脚本的检测逻辑
const loadGoogleLogin = () => {
    const script = document.createElement('script');
    script.src = '/platform.js';
    script.onload = () => {
        // 脚本加载成功，初始化登录功能
        gapi.load('auth2', () => {
            gapi.auth2.init({
                client_id: 'YOUR_CLIENT_ID'
            });
        });
    };
    script.onerror = () => {
        // 加载失败，显示备用登录方式（比如邮箱密码登录）
        document.getElementById('google-login-btn').style.display = 'none';
        document.getElementById('backup-login').style.display = 'block';
    };
    document.body.appendChild(script);
};

// 调用加载函数
loadGoogleLogin();

3. 改用服务器端方案彻底避开客户端拦截 #

如果想从根源上解决拦截问题，可以把相关逻辑移到服务器端：

对于Google Analytics： #

使用Measurement Protocol，在你的后端服务器收集用户行为数据，然后直接向Google Analytics的API发送请求。这样客户端不需要加载任何Analytics脚本，完全避开拦截。

比如在后端（以Node.js为例）发送页面浏览数据：

const axios = require('axios');

const trackPageView = (userId, pageUrl) => {
    axios.post('https://www.google-analytics.com/collect', null, {
        params: {
            v: '1',
            tid: 'UA-XXXXXXXXX-X',
            cid: userId, // 用户唯一标识
            t: 'pageview',
            dp: pageUrl // 页面路径
        }
    });
};

对于Google登录： #

使用OAuth 2.0授权码流程，让用户跳转到你的后端服务进行授权，而不是在客户端加载platform.js。后端处理完授权后，将用户信息返回给客户端，这样客户端不需要依赖Google的前端脚本。

4. 考虑替代方案（可选） #

如果以上方案都不合适，也可以考虑替换成不受拦截影响的工具：

• 对于统计分析：可以用Plausible、Matomo这类注重隐私的开源统计工具，它们的脚本很少被拦截。
• 对于登录功能：可以改用Auth0、Firebase Auth（注意Firebase的脚本也可能被拦截，不过有服务器端SDK可以用），或者自己实现邮箱密码登录。

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