将 analytics.js 添加到网站中

analytics.js 库(也称为“Google Analytics [分析] 代码”)是一种用于衡量用户与您网站的互动情况的 JavaScript 库。本文介绍了如何将 Google Analytics(分析)代码添加到您的网站中。

Google Analytics(分析)代码

应该在 <head> 标记顶部附近以及任何其他脚本或 CSS 标记之前添加 Google Analytics(分析)代码,并添加您要使用的 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. 创建 <script> 元素,该元素开始从 https://www.google-analytics.com/analytics.js 异步下载 analytics.js JavaScript 库。
  2. 初始化全局函数 ga(称为 ga() 命令队列),您可以通过该函数安排相关命令,使之在 analytics.js 库加载完毕可供使用时立即执行。
  3. ga() 命令队列中添加一条命令,为通过 'GA_MEASUREMENT_ID' 参数指定的媒体资源创建新的跟踪器对象
  4. ga() 命令队列中添加另一条命令,向 Google Analytics(分析)发送当前网页的网页浏览数据

自定义实现时可能需要修改 Google Analytics(分析)代码的最后两行(createsend 命令)或添加更多代码来捕获更多互动。但不应更改用于加载 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(分析)会处理此类数据并从中推断出大量信息,其中包括:

  • 用户总共在您网站上停留了多少时间。
  • 用户在每个网页上停留的时间以及用户查看这些网页的次序。
  • 用户点击了哪些内部链接(根据下一个网页浏览的网址得到)。

此外,IP 地址、用户代理字符串以及 analytics.js 在创建新的跟踪器对象时执行的初始网页检查都可用于确定以下信息:

  • 用户的地理位置。
  • 用户使用的浏览器和操作系统。
  • 屏幕尺寸以及是否安装了 Flash 或 Java。
  • 引荐网站。

后续步骤

通过 Google Analytics(分析)代码收集数据足以满足基本的报告需求,但在许多情况下,您还需要解决与用户相关的其他问题。

本网站上的指南介绍了如何使用 analytics.js 来衡量您关注的互动,但在您实现具体功能之前,强烈建议您阅读左侧导航栏中“基础知识”部分列出的相关指南。这些指南可以帮助您概要了解 analytics.js 库和更好地理解本网站中的所有代码示例。

本系列中的下一个指南将介绍 analytics.js 的运作方式