javascript - 如果 Google Analytics（分析）出现故障，我如何让我的网站正常运行？

Question

好的，现在是 2013 年 1 月 19 日 22:30 NZST，由于 Google Analytics 的运行速度似乎非常缓慢，因此大多数互联网似乎都陷入了困境。Stackoverflow、Firefox.com、reddit 和谷歌搜索速度很慢。对我来说最重要的是，我的生产业务网站运行缓慢或根本没有加载。不，这不仅仅是我的连接，我也在我的手机上用 3G 测试了它。没有 Google Analytics 的网站似乎运行良好。

这是发生的一些屏幕截图

它位于 Firefox 窗口的左下角。它会像那样坐在那里 20 多秒。如果无法连接，我希望它在 3 秒后消失。

在此处输入图像描述

这个旋转的绿色图像位于 Firefox 选项卡中，只是坐在那里，看起来页面仍在加载 20 多秒。如果无法连接，我希望它在 3 秒后消失。

在此处输入图像描述

现在可能不是谷歌分析，我国家的国际网关可能运行缓慢或其他什么。但有证据强烈表明它可能是谷歌分析。现在，即使它不是谷歌分析，如果服务完全关闭，我仍然会对一些方法来应对它感兴趣。所以假设我们假设谷歌分析的数据中心发生了一场大火，灭火系统发生了故障。现在谷歌分析完全离线了几天。没有备份服务器。没有备用数据中心。假设场景ok。现在我的网站仍然需要运行，因为我无法让我的网站依赖于谷歌分析服务。但是，如果服务实际上是及时运行的，那么分析功能将是一个额外的好处。

好的，所以我在这里抛出一些想法：

是否有一个超时我可以添加到我的脚本中，如果它花费的时间太长，它将取消与 Google Analytics 的连接并停止请求/下载？然后它将在 2 秒后继续加载我的网站。
或者更好的是，也许它可以完全加载我的网站，然后在我的网站完全加载完成后使用 Ajax 向 Google Analytics 发送请求？为什么默认情况下不这样做？

这是我们必须使用的代码，当前插入到结束</body>标记之前。

<script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-123456789-1']);
    _gaq.push(['_trackPageview']);
    (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
</script>

现在，我可以采用哪些方法来修复这种假设的灾难场景并在 Google Analytics 关闭时让我的网站保持连续性？我对潜在的软件或硬件解决方案感兴趣。假设我可以完全访问运行我的 PHP/MySQL/HTML5 网站的 Linux VPS。

另外，对此的权威答案是什么：有人说将代码放在结束</head>标记之前。其他人说把它放在结束</body>标签之前。哪个是最好的方法？

非常感谢

解决方案更新

好的，我在 Jaspal 的帮助下找到了有效的方法。解决方案如下。

<script type="text/javascript">
    // Load Google Analytics after my site has completely loaded
    // Then when Google Analytics request is made it won't show any visuals in the browser
    setTimeout(loadGoogleAnalytics, 5000);

    // Setup _gaq array as global so that the code in the ga.js file can access it
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-123456789-1']);
    _gaq.push(['_trackPageview']);

    /**
     * Loads Google Analytics
     */
    function loadGoogleAnalytics()
    {
        var srcUrl = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

        $.ajax(
        {
            url: srcUrl,
            cache: true,
            dataType: "script",
            success: function(data)
            {
                console.log('got the script');
            },
            error: function()
            {
                console.log('failed to get the script');
            },
            timeout: 5000
        });
    };
</script>

基本上它起作用的原因是因为有一个 5 秒的 setTimeout。这让我的页面有足够的时间来加载所有内容、JS、CSS、图像等。然后它会启动 $.ajax 请求并下载 ga.js 和 __utm.gif，这实际上是将数据发送到 Google Analytics。在最初的 5 秒之后，基本上我之前提到的所有浏览器视觉效果都消失了，Google Analytics 请求在后台静默发生，浏览器用户没有加载视觉效果。然后我尝试用主机文件阻止谷歌分析，但我仍然没有得到任何浏览器视觉效果——完美。

应该注意的是$.ajaxtimeout: 5000请求中的属性似乎没有做任何事情。最初我希望它会在 5 秒内无法获取数据时中止请求，但 API 文档中有一条注释说

仅在 Firefox 3.0+ 中，脚本和 JSONP 请求不能被超时取消；即使脚本在超时期限之后到达，它也会运行。

无论如何我都会把它留在那儿以防万一。根据我的测试，如果无法访问 Google Analytics（通过观察 Firebug/Chrome 中的网络/网络面板），它将在 Firefox 中 21-23 秒和 Chrome 中 16 秒后中止请求。这可能是一些 TCP 超时。无论如何，我并不担心，因为它会静默超时，并且用户不会注意到，因为浏览器中没有加载视觉效果。

我在下面接受了 Jaspal 的回答并授予他赏金，因为他的解决方案对于解决这个问题至关重要。然而，他的解决方案仍然在浏览器中显示加载视觉效果。所以我相信这里使用 setTimeout 发布的解决方案（对他的原始解决方案稍作修改）是可行的方法，并且经过测试可以 100% 为我工作。

score 11 · Accepted Answer

鉴于它的加载位置，您网站的其余部分将在向 Google Analytics 请求之前加载。另外 GA 是异步加载的，不会停止任何代码的执行，所以我真的不认为有问题。

score 7 · Accepted Answer

最新方法：

我们允许 ga 正常加载。
我们将 ga dom 元素的引用存储在全局变量 (gaClone) 中。

我们将超时设置为 30 秒。我们还设置了另一个全局变量（loadedGoogleAnalytics）并最初将其设置为 0。当 ga 加载时，我们将此变量设置为 1。在超时到期时，我们检查 ga 是否已加载。如果不是，我们删除 dom 元素 ga。

<script type="text/javascript">
    var loadedGoogleAnalytics = 0;
    var gaClone;
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-123456789-1']);
    _gaq.push(['_trackPageview']);

    _gaq.push(function() {
        loadedGoogleAnalytics = 1;
        //console.log('GA Actualy executed!');
    });

    (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

        gaClone = ga;

    })();

    setTimeout(function() {
        //console.log('timeout fired');
        if (loadedGoogleAnalytics != 1) {
            gaClone.parentNode.removeChild(gaClone); 
        }
    }, 30000);
</script>

[我已经用我的一个实际 GA 帐户验证了这种方法，并且我能够看到所有实时跟踪]

以前的方法 [注意：如果我们尝试将它放在 (document).ready(); 中，Ga 不会执行] [此解决方案不起作用]

<script type="text/javascript">
    $(document).ready(function() {
            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'UA-123456789-1']);
            _gaq.push(['_trackPageview']);

            srcUrl = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

            $.ajax({
                url: srcUrl,
                cache: true,
                dataType: "script",
                success: function(data) {
                    //console.log('got the script');
                },
                error: function() {
                    //console.log('failed to get the script');
                },
                timeout: 30000
            });
        });
</script>

希望这可以帮助

score 0 · Accepted Answer

www.google-analytics.com/ga.js您可以在自己的服务器上托管副本并从那里加载。如果您确实走这条路，我会设置一个 cron 作业来定期获取 ga.js 以确保您拥有最新版本。

关于跟踪代码放置：将跟踪代码放置在页面较早（之前）的主要原因之一</head>与快速离开页面的访问者有关（可能在整个页面呈现之前）。在这种情况下，您越早执行跟踪代码，就越有可能收集一些数据。

score -1 · Accepted Answer

试图修复没有损坏的东西

如果您想使用谷歌分析，您将需要与那里的服务器进行某种方式的通信。正如许多其他答案所指出的那样，那里的服务是异步运行的，这意味着它不会阻止您的网站运行任何东西。“正在加载的视觉效果”是为了显示正在加载的东西……您对此无能为力。

你有两个选择；忍受谷歌分析或使用一些服务器端脚本来运行分析。

如果网站挂起，那是因为其他原因。

编辑

同样不立即包括 GA 也会降低统计数据的准确性；特别是跳出率将不正确。

javascript - 如果 Google Analytics（分析）出现故障，我如何让我的网站正常运行？

4 回答 4

试图修复没有损坏的东西

编辑

Related

Reference