我舊文的翻譯：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行中，啟動該標誌以防止腳本再次載入。

喜歡的話別忘了分享哦。