我旧帖子的翻译：Google Analytics 和 WPO 分析器

我越来越多地看到针对 Google PageSpeed Insights（和其他 WPO 分析器）的批评，因为许多人认为 Google 自己的旗舰跟踪服务 Google Analytics 被标记为错误是矛盾的。 “但这是同一家公司的！”，你可以听到他们说。

Google Analytics 与其他跟踪服务一样，在网站加载期间会消耗大量资源。值得称赞的是，像 Google PageSpeed Insights 这样的服务会标记这一点，以便您可以对其进行优化。对我来说，如果不这样做，它就会失去作为 WPO 工具的可信度。然而，我知道不了解优化的人可能会责怪该工具。这让我想起了伊索寓言《狐狸和葡萄》。

用于优化 Google Analytics 脚本的选项之一是将其托管在您自己的服务器上并设置到期日期，以便浏览器可以缓存它。这是谷歌不推荐的做法，这是可以理解的，因为它失去了随时更新代码的能力。如果您不选择此选项，根据 Google 的说法，您可以通过设置 CRON 作业每隔几个小时下载 Google Analytics 脚本来轻松克服此问题。

另一个选项（与前一个选项完全兼容），也是我使用的选项，是当有人在页面上滚动时加载 Google Analytics 脚本。这可能看起来有害，因为它可能会让您认为它不会跟踪所有用户。然而，在我看来，它会给出更准确的指标：

• 首先，它不会跟踪那些快速点击您网站上的链接并在意识到错误后立即离开的人。
• 它不会跟踪机器人、蜘蛛或以普通用户身份出现的类似实体（因为它们不会发送识别其真实性质的用户代理标头）。

此外，这是一个最佳选择，因为一旦其他所有内容都已加载（因此不会减慢任何内容），脚本就会加载，并且在用户浏览您的网站时透明地加载。

下面是实现这一点的 JavaScript 代码：

/**
 * Google Analytics and WPO Analyzers - WebPerf - Manuel Canga
 * From post: https://trasweb.net/snippets/google-analytics-and-wpo-analyzers
 */

var is_analytics_loaded = false;

load_googleAnalytics = function () {
    if (is_analytics_loaded) {
        return false;
    }

    (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','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-xxxx', 'auto');
    ga('send', 'pageview');

    is_analytics_loaded = true;
};


window.addEventListener("scroll", function () {
    if (document.documentElement.scrollTop !== 0 || document.body.scrollTop !== 0) {
        load_googleAnalytics();
    }
}, true);

从第25行到第29行，我们告诉浏览器，当访问者滚动时（触发滚动事件，滚动条位置不再位于顶部） ，应该执行 load_googleAnalytics 函数。此函数通过标志检查（第 9 至 12 行）Analytics 是否已加载到当前页面上。如果没有，则加载跟踪脚本（第 13 至 19 行）。请注意，在 第 18 行 中，插入了 Google Analytics ID。最后，在第21行中，激活该标志以防止脚本再次加载。

喜欢的话别忘了分享哦。