您花了一些时间开发一个副项目。您认为它很酷！您决定将其发布到世界各地。然后……它运行良好。或者它运行不佳。等等，是这样吗？您忘记添加分析——当时您并没有想到。现在您很好奇有多少人访问过该网站，但是……您不确定。Netlify 分析闪亮登场。
有很多次我
- 忘记添加分析
- 不想增加额外的页面权重，或者
- 我担心隐私问题
我上个月发布了一个 CSS 网格生成器，并且忘记添加分析。发布很成功，但现在对我来说有点像黑盒子，不知道那里发生了什么，或者将来是否需要调整发布。但是，现在我可以启用 Netlify 分析 并查看过去的信息，而不会丢失任何信息。太棒了。
Netlify 分析没有很多花哨的功能——它并非旨在取代超级全面的营销工具。但是，如果您想在不添加大量脚本的情况下获取有关您网站的一些数据，它可以成为一个方便的工具。
它真正令人称道的一点是 **准确性**。由于数据来自服务器，因此您可以清楚地了解服务器实际提供的服务，而不是依赖第三方，而第三方由于诸如广告拦截器等因素可能导致报告不一致（例如，据估计 15% 的用户 使用 Ghostery 等工具），缓存和其他因素。
分析仪表盘
每个网站的仪表盘显示了一些“一目了然”的信息
然后，您可以按特定日期深入了解更详细的信息
有一些来自主要来源和主要页面的信息
有一个“找不到的主要资源”区域，显示您的访问者尝试从您的网站检索但失败的任何页面、图像或任何内容。当我在我的网站上启用它时，我能够修复一个我早已忘记的损坏资源。
能够检查我的一些开发项目的运行情况将会很棒。但我也很高兴能够从我的工作中去除额外的实现步骤。需要注意的注意事项是，您的网站需要由 Netlify 托管才能使用分析工具，并且它是付费功能。您启用的任何网站都将在“带宽使用情况”图表中显示长达 90 天（3 个计费周期），如果足够旧，则在所有其他图表中显示长达 30 天，但是从您启用分析到计算和填充仪表盘之间可能需要长达 2 天的时间。
幕后
分析仪表盘本身使用 React 和 Highcharts 构建。Highcharts 是一个 JavaScript 图表库，其中包括响应式选项和 辅助功能模块。所有组件都从我们内部的分析 API 获取数据。
在开发开始之前，我们进行了一项内部数据可视化库比较调查，以便为我们的需求选择最佳库。我们选择 Highcharts 而不是其他流行的选项，例如 d3.js，主要是因为这意味着 Netlify 的任何具有 JavaScript 经验的工程师都可以加入并做出贡献，无论他们是否具备深入的 SVG 和 D3 相关知识。
虽然图表本身呈现为 SVG 元素，但 Highcharts 允许您 使用 HTML 渲染图表中的任何文本，从而简化和加快我们的开发时间，并允许我们使用 CSS 进行高级样式设置。 Highcharts 文档 也是一流的，并通过其声明式 API 提供大量自定义选项。
我们使用了 Highcharts 的 React 包装器 来为每种类型的图表创建可重用的 React 组件。“主要来源”、“主要页面”和“找不到的主要资源”卡片使用不同的组件显示 <table>，使用作为 props 传递的数据。
在构建这些图表的 UI 方面，我们遇到的一个更棘手的挑战是在面积图的 X 轴上以不会显得过于拥挤的方式显示日期。
Highcharts 提供了一个选项，可以使用 JavaScript 回调函数 自定义轴标签的格式，因此我们利用它来将每个隔一个日期显示为标签。在此基础上，我们编写了一个算法来捕获显示的每个月的第一个日期，并将月份名称添加到标签的标记中，使 UI 更简洁易懂。
其他分析替代方案，以及代码片段
如果您仍然希望运行第三方脚本和其他类型的分析，Netlify 具有全局添加到 <head> 或 <body> 标签的功能。这很有用，因为根据您网站的设置方式，将第三方脚本添加到每个页面可能会有点麻烦。此外，有时您希望允许不访问存储库的人员更改这些脚本。转到仪表盘中的特定站点，然后单击 设置 → 构建和部署 → 后处理。
在那里您将找到代码片段注入
单击“添加代码片段”，您将可以选择是否要将第三方代码片段添加到 <body> 或 <head> 标签中，并且您将有机会以 HTML 格式发布您的代码。例如，如果您需要添加 Google Analytics，您需要将其包装在类似这样的脚本标签中
<script async src="https://#/gtag/js?id=UA-68528-29"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXX-XX');
</script>您还可以为其命名，以便您可以跟踪它。如果您以后需要添加更多内容，这将很有帮助。
就是这样！
您可以使用内置的新 Netlify 分析产品或更强大的工具开始运行。
需要特定的托管与博客文章的开头相矛盾……
哦，这太棒了！看起来它涵盖了人们通常希望从分析中获得的大部分内容，而没有额外的负担，哈哈。感谢分享！
听起来很棒，但这只是 awstats 的翻版，只不过是一个（简单的）日志分析器。我不会为此每月支付 9 美元。
发布视频
这是否适用于带有/不带服务工作线程的 SPA，这些线程在路由更改时不会请求新的 HTML 文件？
嗨，Sarthak！目前，不可以。唯一访客将是准确的，但页面浏览量将不准确。我们正在讨论如何实现这一点，但这目前还不是此次发布的一部分。