在網站中加入 analytics.js

analytics.js 程式庫 (也稱為「Google Analytics (分析) 代碼」) 是用於評估使用者與網站互動的 JavaScript 程式庫。本文說明如何在網站中加入 Google Analytics (分析) 代碼。

Google Analytics (分析) 代碼

Google Analytics (分析) 代碼必須放在 <head> 頂端頂端和任何其他指令碼或 CSS 代碼之前，並新增您要使用的 Google Analytics (分析) 資源資源 ID。

<!-- Google Analytics -->
<script>
(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','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

上述程式碼有四個主要步驟：

  1. 建立從 https://www.google-analytics.com/analytics.js 開始非同步下載 analytics.js JavaScript 程式庫的 <script> 元素
  2. 初始化全域 ga 函式 (稱為 ga() 指令佇列)，讓您安排要在 analytics.js 程式庫載入並就緒後執行指令。
  3. 將指令新增至 ga() 指令佇列，以便為透過 'GA_MEASUREMENT_ID' 參數指定的屬性建立新的追蹤器物件。
  4. 在 ga() 指令佇列中加入另一個指令，將網頁瀏覽傳送至 Google Analytics (分析)。

如要導入自訂程序，您可能需要修改 Google Analytics (分析) 代碼的最後兩行 (create 和 send 指令)，或是新增其他程式碼來擷取更多互動。不過，請勿變更會載入 analytics.js 程式庫的程式碼，或初始化 ga() 指令佇列函式。

替代非同步代碼

雖然上述 Google Analytics (分析) 代碼可確保所有瀏覽器都能以非同步方式載入及執行指令碼，但缺點是不允許新瀏覽器預先載入指令碼。

下方的替代非同步代碼支援支援預先載入功能，這可以為新版瀏覽器提供大幅的效能提升，但是在無法辨識 async 指令碼屬性的 IE 9 和舊版行動瀏覽器上可能會降低到同步載入和執行。只有在訪客主要使用新式瀏覽器存取您的網站時，才適用這個標記設定。

<!-- Google Analytics -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->

Google Analytics (分析) 代碼會收集哪些資料？

在網站上加入任一代碼後，每次使用者造訪該網頁時，都會傳送一次網頁瀏覽。Google Analytics (分析) 會處理這項資料，並推斷出大量的資訊，包括：

  • 使用者在網站上停留的總時間。
  • 使用者在每個網頁上停留的時間，以及這些網頁的瀏覽順序。
  • 使用者點選的內部連結 (根據下一個網頁瀏覽的網址)。

此外，當您建立新追蹤程式物件時，analytics.js 使用的 IP 位址、使用者代理程式字串和初始網頁檢查都會用於判斷下列資訊：

  • 使用者的地理位置。
  • 目前使用的瀏覽器和作業系統。
  • 螢幕大小，以及是否已安裝 Flash 或 Java。
  • 參照連結網址網站。

後續步驟

在基本報表需求下，透過 Google Analytics (分析) 代碼收集到的資料雖然已足夠，但多數情況下您還需要回答一些關於使用者的問題。

這個網站的指南將說明如何使用 analytics.js 評估您重視的互動，但在導入特定功能之前，我們強烈建議您閱讀左側導覽面板中「基礎」部分列出的指南。這些指南會概略說明 analytics.js 程式庫的總覽，並協助您進一步瞭解整個網站使用的程式碼範例。

本系列的下一個指南將說明 analytics.js 的運作方式。