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 -->
上述程式碼有四個主要作用:
- 建立
<script>
元素,並開始從https://www.google-analytics.com/analytics.js
以非同步方式下載 analytics.js JavaScript 程式庫 - 初始化全域
ga
函式 (稱為ga()
指令佇列),讓您排定指令在 analytics.js 程式庫載入並準備就緒時執行。 - 將指令加入
ga()
指令佇列,為透過'GA_MEASUREMENT_ID'
參數指定的屬性建立新的追蹤器物件。 - 在
ga()
指令佇列中加入另一個指令,藉此傳送目前網頁的網頁瀏覽給 Google Analytics (分析)。
導入自訂導入方式時,可能需要修改 Google Analytics (分析) 代碼的最後兩行 (create
和 send
指令),或是加入其他程式碼來擷取更多互動。不過,請勿變更會載入 analytics.js 程式庫的程式碼,或初始化 ga()
指令佇列函式。
替代非同步代碼
雖然上述 Google Analytics (分析) 代碼可確保指令碼在所有瀏覽器上以非同步方式載入及執行,但還是不允許新式瀏覽器預先載入指令碼。
下方替代的非同步標記支援預先載入功能,可以稍微提升新版瀏覽器的效能,但是在 IE 9 和不辨識 async
指令碼屬性的舊版行動瀏覽器上,也會降低同步載入與執行效能。建議您只在訪客主要使用新式瀏覽器存取您的網站時,才使用這項代碼設定。
<!-- 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 的運作方式。