javascript - 如何避免离线时 google-analytics-loading 延迟加载事件监听器

Question

我有一个可以在线和离线使用的应用程序。我已将 GA 包含在正文中并启用异步。我还有处理与 window 上的 load 事件监听器关联的 DOM 的核心函数。当系统未连接时，ga.js 文件需要花费大量时间来尝试加载。这可以防止触发 load 事件。那么我该如何避免这种情况呢？我可以使用 DOMContentLoaded 但这是一样的，因为 js 文件包含在 DOM 内容中。

Answer 1

尝试一下。

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

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>