如果Google Analytics(分析)发生故障,我该如何保持网站正常运行?

zua*_*auz 13 javascript ajax jquery asynchronous google-analytics

好吧它是2013年1月19日22:30 NZST和大多数互联网似乎已经爬行,因为Google Analytics似乎运行速度非常慢.Stackoverflow,Firefox.com,reddit和谷歌搜索都很慢.对我来说最重要的是,我的生产企业网站运行缓慢或根本没有加载.不,这不只是我的连接,我也在手机上测试了3G.没有Google Analytics的网站似乎运行正常.

这是一些发生的截图

这位于Firefox窗口的左下角.它将在那里停留20多秒.如果它无法连接,我希望它在3秒后消失.

在此输入图像描述

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

在此输入图像描述

现在它可能不是谷歌分析,我的国家'国际网关可能运行缓慢或其他东西.但有证据表明它可能是谷歌分析.现在,即使它不是谷歌分析,那么如果服务完全失效,我仍然会对某些方法感兴趣.所以假设我们假设Google Analytics数据中心发生大火并且灭火系统失败了.现在,Google Analytics几天完全脱机.没有备份服务器.没有备用数据中心.假设情景确定.现在我的网站仍然需要运行,因为我无法让我的网站依赖Google Analytics服务.但是,如果服务实际上及时运行,那么分析功能可以作为额外的奖励.

好的,我在这里抛出一些想法:

  1. 我可以添加到我的脚本中的超时是否会取消与Google Analytics的连接并停止请求/下载如果耗时太长?然后它会在2秒后继续加载我的网站.
  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>
Run Code Online (Sandbox Code Playgroud)

现在,我可以采用哪些方法来解决这个假设的灾难情景,并在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>
Run Code Online (Sandbox Code Playgroud)

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

应该注意的是,$ .ajax请求中的timeout: 5000属性似乎没有做任何事情.最初我希望如果它无法获取数据5秒钟就会中止请求但是API文档中有一条说明说

仅在Firefox 3.0+中,超时无法取消脚本和JSONP请求; 即使脚本在超时期限后到达,脚本也会运行.

为了以防万一,我会留在那里.根据我的测试,如果无法访问Google Analytics(通过观察Firebug/Chrome中的网络/网络面板),那么它将在Firefox中以21-23秒后退出请求,在Chrome中退出16秒.这可能是一些TCP超时.我并不担心这一点,因为它是静默的超时,用户不会注意到,因为浏览器中没有加载视觉效果.

我已经接受了Jaspal在下面的答案,并授予他赏金,因为他的解决方案对解决这个问题至关重要.但是他的解决方案仍然在浏览器中显示加载的视觉效果.所以我相信使用setTimeout在这里发布的解决方案(对他原来的一个略微修改)是要走的路,并且经过测试对我来说是100%工作.

sev*_*cat 11

根据其加载位置,您的网站的其余部分将在向Google Analytics请求之前加载.加GA是异步加载的,不会停止执行任何代码,所以我真的没有看到存在问题.

  • @zuallauz如果你想测试它,只需将ssl.google-analytics.com和www.google-analytics.com放入本地主机文件(即运行浏览器的机器)中,并将它们指向外部的非现有IP.你的局域网.这将模拟"无响应". (2认同)

Jas*_*ngh 7

最新方法:

  1. 我们允许ga正常加载.
  2. 我们在全局变量(gaClone)中存储对ga dom元素的引用.
  3. 我们将超时设置为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>
    
    Run Code Online (Sandbox Code Playgroud)

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

以前的方法[注意:如果我们尝试将它放在(文档).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>
Run Code Online (Sandbox Code Playgroud)

希望这可以帮助

  • 当你在DOM Ready中包装整个东西时GA没有执行的原因是因为`_gaq`变成了局部变量,ga.js然后无法访问.将`var _gaq`声明移动到全局范围,它将正常工作. (2认同)