id: 09979e1b8f4a44c2bbd5de114f96af3c
parent_id: 
item_type: 1
item_id: f9eed75a29524ecdbd41e2668869d464
item_updated_time: 1764345635021
title_diff: "[{\"diffs\":[[1,\"Cloudflare从入门到精通 9. Web Analytics\"]],\"start1\":0,\"start2\":0,\"length1\":0,\"length2\":33}]"
body_diff: "[{\"diffs\":[[1,\"<html>\\\r\\\n<head>\\\r\\\n  <title>Cloudflare从入门到精通 9. Web Analytics</title>\\\r\\\n  <basefont face=\\\"微软雅黑\\\" size=\\\"2\\\" />\\\r\\\n  <meta http-equiv=\\\"Content-Type\\\" content=\\\"text/html;charset=utf-8\\\" />\\\r\\\n  <meta name=\\\"exporter-version\\\" content=\\\"YXBJ Windows/608924 (zh-CN, DDL); Windows/10.0.0 (Win64); EDAMVersion=V2;\\\"/>\\\r\\\n  <meta name=\\\"content-class\\\" content=\\\"yinxiang.peso.superNote\\\"/>\\\r\\\n  <meta name=\\\"application-data:yinxiang.noteLayout\\\" content=\\\"{\\\"lineSpace\\\":\\\"recommend\\\",\\\"paragraphSpace\\\":\\\"recommend\\\"}\\\"/>\\\r\\\n  <style>\\\r\\\n\\tbody, td {\\\r\\\n\\t  font-family: 微软雅黑;\\\r\\\n\\t  font-size: 12pt;\\\r\\\n\\t}\\\r\\\n  </style>\\\r\\\n</head>\\\r\\\n<body>\\\r\\\n<a name=\\\"43388\\\"></a>\\\r\\\n<h1>Cloudflare从入门到精通 9. Web Analytics</h1>\\\r\\\n\\\r\\\n<div><span style=\\\"\\\"><div style=\\\"max-width: 700px;\\\"><p></p><div style=\\\"--en-blockquote: true; box-sizing: border-box; border-left: 3px solid #b4c0cc; background-position: initial initial; background-repeat: initial initial;\\\"><div>原文链接: <a href=\\\"http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483912&amp;idx=1&amp;sn=03eefdf33e1dd554977f2b1f8cc383d6&amp;chksm=c287e5f1f13799bd676384f06cb294b05a85e3549d045e5bb2f83fd39a6f99b8223c716c4d7c&amp;mpshare=1&amp;scene=1&amp;srcid=0526HjkQE46cmwnZrXIuToSD&amp;sharer_shareinfo=437943f4716615d0c4e747ced2ad5293&amp;sharer_shareinfo_first=437943f4716615d0c4e747ced2ad5293#rd\\\"><span>http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483...</span></a></div></div><p></p><div style=\\\"\\\"><div><div><div><span style=\\\"\\\">原创</span><span><span style=\\\"\\\">DeBill</span></span><span><a style=\\\"\\\"> DeBill独立开发 </a></span><span><em></em></span></div><div style=\\\"\\\"><div style=\\\"background-attachment: scroll; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; color: rgb(0, 0, 0); word-spacing: 0em; letter-spacing: 0em; word-break: break-word; overflow-wrap: break-word; text-align: left;\\\"><h2 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"font-size: 22px; color: rgb(81, 81, 81); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: linear-gradient(0deg, rgb(255, 177, 27) 40%, transparent 40%); background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; display: block; font-weight: bold; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; -webkit-box-reflect: unset;\\\"><span>📜 前言</span></span></h2><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>我们上线一个网站后往往需要添加追踪统计的功能，方便我们了解当前网站的流量，Cloudflare Web Analytics 工具可以以简单的方式集成到我们的网站，帮助我们实现网站流量分析</span></p><h2 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"font-size: 22px; color: rgb(81, 81, 81); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: linear-gradient(0deg, rgb(255, 177, 27) 40%, transparent 40%); background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; display: block; font-weight: bold; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; -webkit-box-reflect: unset;\\\"><span>🧾 教程</span></span></h2><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>下面的教程分三种情况介绍如何将 Cloudflare Web Analytics 接入你的网站</span></p><h3 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"color: rgb(34, 34, 34); letter-spacing: 0em; border-top-style: none; border-bottom-style: none; border-left-style: solid; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 3px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(255, 177, 27); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; display: block; font-weight: bold; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span>通过 Cloudflare 代理的网站</span></span></h3><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>如果你的域名是托管在 Cloudflare 上的且开启了小黄云，那集成 Web Analytics 十分简单，进入后代后选择</span><code style=\\\"color: rgb(155, 110, 35); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 245, 227); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>Analytics &amp; Logs --&gt; Web Analytics --&gt; Add a site</span></code></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/a040238bb3c2430d96dc73b1dd434bb1\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span></div><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>进入菜单后，在下来菜单中选择你托管在 Cloudflare 中的域名，然后点击 Done 即可</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/d38fa83474e542f496eba5a24ae02969\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span></div><h3 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"color: rgb(34, 34, 34); letter-spacing: 0em; border-top-style: none; border-bottom-style: none; border-left-style: solid; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 3px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(255, 177, 27); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; display: block; font-weight: bold; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span>不通过 Cloudflare 代理的网站</span></span></h3><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>如果你的网站不是由 Cloudflare 代理的，其他步骤都相同，只是在 Set up hostname 步骤里输入域名后再点击完成</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/aba3d24051e7473fa94eb9d6c68b6f10\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span></div><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>此时你需要将下面的 JS 代码粘贴到你的网站的任意 HTML 的 header 里</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/b913b747ba994dbeaff4b2db2083b05a\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span></div><h3 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"color: rgb(34, 34, 34); letter-spacing: 0em; border-top-style: none; border-bottom-style: none; border-left-style: solid; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 3px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(255, 177, 27); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; display: block; font-weight: bold; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span>Pages 项目</span></span></h3><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>Pages 项目集成十分简单，进入后台后，选择</span><code style=\\\"color: rgb(155, 110, 35); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 245, 227); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>Workers &amp; Pages -&gt; 选择你的项目</span></code></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/5330c346360d4717970e32737793d9e2\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span></div><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>点击上方 Tab，然后拉到最下方 enable 就集成好了</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/cdb0f98b92fa4b6fba343fcddc29d051\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span></div><h2 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"font-size: 22px; color: rgb(81, 81, 81); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: linear-gradient(0deg, rgb(255, 177, 27) 40%, transparent 40%); background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; display: block; font-weight: bold; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; -webkit-box-reflect: unset;\\\"><span>📊 指标讲解</span></span></h2><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>进入后代后选择</span><code style=\\\"color: rgb(155, 110, 35); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 245, 227); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>Analytics &amp; Logs --&gt; Web Analytics</span></code><span> 再进入刚刚设置追踪的网站，Cloudflare 会默认展示过去 24 小时里网站的数据，可以看到很多统计指标，先看最左上角</span></p><h3 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"color: rgb(34, 34, 34); letter-spacing: 0em; border-top-style: none; border-bottom-style: none; border-left-style: solid; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 3px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(255, 177, 27); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; display: block; font-weight: bold; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span>Visits - 网站访问量</span></span></h3><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>你可以添加不同的 filter 查看具体的数据，也可以选择查看的流量的日期区间（最高支持半年），拉到页面最下面能看到所有信息，包括总访问数、流量都从哪些国家来的、从哪些链接过来的，访问的页面路径是哪些、访问的设备等信息</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/5a73aa790aa44fa78367cff2ee4ffcfa\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span></div><h3 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"color: rgb(34, 34, 34); letter-spacing: 0em; border-top-style: none; border-bottom-style: none; border-left-style: solid; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 3px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(255, 177, 27); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; display: block; font-weight: bold; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span>Page views - 页面访问量</span></span></h3><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>Page views 页面和 Visits 页面差不多</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/2ea17cf09e3c4393adeb3dbd9a7b6d3f\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span></div><h3 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"color: rgb(34, 34, 34); letter-spacing: 0em; border-top-style: none; border-bottom-style: none; border-left-style: solid; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 3px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(255, 177, 27); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; display: block; font-weight: bold; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span>Page load time - 页面加载时间</span></span></h3><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>这个指标是体现户访问你网站是快还是慢最直观的指标，加载页面的总耗时。页面加载时间由很多部分组成，包括但不限于 DNS 解析时间 、TCP 建链时间、请求时间、响应时间、浏览器渲染页面时间等，所以不能将下面每部分时间汇总。还有一些耗时非显示，例如 pre-DNS lookup 的时间</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/fb69f94ab44e456dabacf772fffbb64b\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span></div><h3 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"color: rgb(34, 34, 34); letter-spacing: 0em; border-top-style: none; border-bottom-style: none; border-left-style: solid; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 3px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(255, 177, 27); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background-attachment: scroll; background-clip: border-box; background-color: unset; background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; display: block; font-weight: bold; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span>Core Web Vitals</span></span></h3><div style=\\\"display: flex;\\\"><span><img src=\\\":/d593999a8d8f4b00b8b0076c7cff02ea\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span></div><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>最后一项是由谷歌创造的 CWV （Core Web Vital）指标，用于衡量网站的用户体验如何。分别由以下 4 个指标组成：</span></p><ul style=\\\"list-style-type: disc; color: rgb(0,0,0);\\\"><li><div style=\\\"color: rgb(58, 58, 58); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>Largest Contentful Paint (LCP) ↗</span><span>: 测量用户感知的页面加载速度。它返回页面主要内容的加载时间。尽可能让</span><strong style=\\\"color: rgb(0, 0, 0); font-weight: bold; background-attachment: scroll; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;\\\"><span>75%的网页访问的 LCP 不超过 2.5 秒</span></strong><span>，小于 2.5 秒则为 good</span></div></li><li><div style=\\\"color: rgb(58, 58, 58); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>Interaction to Next Paint (INP) ↗</span><span>: 衡量用户界面响应能力——网站对点击或按键等用户交互的响应速度。良好的响应代表网页对用户交互能做出快速响应，</span><strong style=\\\"color: rgb(0, 0, 0); font-weight: bold; background-attachment: scroll; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;\\\"><span>INP 低于或等于 200 毫秒表示网页响应速度良好</span></strong></div></li><li><div style=\\\"color: rgb(58, 58, 58); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>First Input Delay (FID) ↗</span><span>: 衡量网站对第一个用户输入的响应速度</span></div></li><li><div style=\\\"color: rgb(58, 58, 58); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>Cumulative Layout Shift (CLS) ↗</span><span>: 测量视觉稳定性，即在将各种元素加载到视图中时页面布局是否发生变化。尽可能让</span><strong style=\\\"color: rgb(0, 0, 0); font-weight: bold; background-attachment: scroll; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;\\\"><span>75% 的网页访问的 CLS 不高于 0.1</span></strong><span>，小于 0.1 则为 good</span></div></li></ul><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>根据 Google 设计的行业标准方法和测试，每个指标都会自动被评为“良好”、“需要改进”或“较差”。往下拉会有一个</span><code style=\\\"color: rgb(155, 110, 35); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 245, 227); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>Debug View</span></code><span>页面告诉你哪些元素影响 LCP，需要改善</span></p><div style=\\\"display: flex;\\\"><span><img src=\\\":/86ac7253617a4680bc87573b1fd117ae\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span></div><h2 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"font-size: 22px; color: rgb(81, 81, 81); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: linear-gradient(0deg, rgb(255, 177, 27) 40%, transparent 40%); background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; display: block; font-weight: bold; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; -webkit-box-reflect: unset;\\\"><span>🍙 对比 Umami</span></span></h2><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>对比 Umami，Visits 和 Page Views 的指标都是有的，但是有以下差别</span></p><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><strong style=\\\"color: rgb(0, 0, 0); font-weight: bold; background-attachment: scroll; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;\\\"><span>Cloudflare Web Analytics 优于 Umami 的地方：</span></strong></p><ul style=\\\"list-style-type: disc; color: rgb(0,0,0);\\\"><li><div style=\\\"color: rgb(58, 58, 58); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>持续的 Core Web Vitals 指标记录</span></div></li><li><div style=\\\"color: rgb(58, 58, 58); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>Page Load Time 指标</span></div></li></ul><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><strong style=\\\"color: rgb(0, 0, 0); font-weight: bold; background-attachment: scroll; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;\\\"><span>Umami 优于 Cloudflare Web Analytics 的地方：</span></strong></p><ul style=\\\"list-style-type: disc; color: rgb(0,0,0);\\\"><li><div style=\\\"color: rgb(58, 58, 58); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>Session 功能，记录每一个用户的访问次数，访问了多少个页面，从哪个国家用的什么浏览器和设备等信息</span></div></li><li><div style=\\\"color: rgb(58, 58, 58); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>Raealtime 功能记录当前有哪些用户正在访问网站</span></div></li><li><div style=\\\"color: rgb(58, 58, 58); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>Compare 功能可以对比不同时间段的流量情况</span></div></li><li><div style=\\\"color: rgb(58, 58, 58); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>如果是自部署的 Umami 可以查看网站整个生命周期的流量，Cloudflare Web Analytics 最多只支持半年</span></div></li></ul><div style=\\\"display: flex;\\\"><span><img src=\\\":/8e914a237eb4442ca8abe787a1eb3082\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; display: block; max-width: 100%; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; object-fit: fill; width: auto;\\\" width=\\\"auto\\\"/></span></div><h2 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"font-size: 22px; color: rgb(81, 81, 81); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: linear-gradient(0deg, rgb(255, 177, 27) 40%, transparent 40%); background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; display: block; font-weight: bold; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; -webkit-box-reflect: unset;\\\"><span>🚫 限制</span></span></h2><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>Web Analytics 有一些使用限制</span></p><ul style=\\\"list-style-type: disc; color: rgb(0,0,0);\\\"><li><div style=\\\"color: rgb(58, 58, 58); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>免费计划不能设置 Rule 让部分页面不追踪</span></div></li><li><div style=\\\"color: rgb(58, 58, 58); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>Cloudflare 允许最多 10 个非 Cloudflare 代理的网站使用 Web Analytics</span></div></li><li><div style=\\\"color: rgb(58, 58, 58); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>最多可以查看过去六个月的流量情况</span></div></li><li><div style=\\\"color: rgb(58, 58, 58); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>不支持 UTM 参数查询。UTM 参数是特殊的查询字符串参数，可以帮助追踪流量的来源。目前，Cloudflare Web Analytics 不会记录查询字符串，以避免收集潜在的敏感数据。</span></div></li></ul><h2 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"font-size: 22px; color: rgb(81, 81, 81); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: linear-gradient(0deg, rgb(255, 177, 27) 40%, transparent 40%); background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; display: block; font-weight: bold; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; -webkit-box-reflect: unset;\\\"><span>🕳️ 避坑指南</span></span></h2><ul style=\\\"list-style-type: disc; color: rgb(0,0,0);\\\"><li><div style=\\\"color: rgb(58, 58, 58); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>如果你将 Cache-Control 标头设置为 public，no-transform，Cloudflare 将无法修改网站的原始 payload。因此，Beacon 脚本不会自动注入网站，Web Analytics 将不起作用</span></div></li><li><div style=\\\"color: rgb(58, 58, 58); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>Cloudflare Web Analytics 可以通过覆盖 History API 的 pushState 函数并监听 onpopstate 事件来自动跟踪单页应用程序 (SPA) 上的用户交互。注意，不支持基于哈希的路由器。</span></div></li><li><div style=\\\"color: rgb(58, 58, 58); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>有朋友反馈，Web Analytics 可能会把 DOMContentLoaded 时间变长很多导致访问性能差</span></div></li><li><div style=\\\"color: rgb(58, 58, 58); letter-spacing: 0em; text-align: left; font-weight: normal;\\\"><span>当你的主域名开启了 Web Analytics，所有</span><strong style=\\\"color: rgb(0, 0, 0); font-weight: bold; background-attachment: scroll; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgba(0, 0, 0, 0.4); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;\\\"><span>子域名也会默认使用 Web Analytics</span></strong></div></li></ul><h2 style=\\\"background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: none; background-origin: padding-box; background-position-x: 0; background-position-y: 0; background-repeat: no-repeat; background-size: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0,0,0); border-bottom-color: rgb(0,0,0); border-left-color: rgb(0,0,0); border-right-color: rgb(0,0,0); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; display: block; height: auto; overflow-x: unset; overflow-y: unset; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset;\\\"><span style=\\\"font-size: 22px; color: rgb(81, 81, 81); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: linear-gradient(0deg, rgb(255, 177, 27) 40%, transparent 40%); background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; display: block; font-weight: bold; overflow-x: unset; overflow-y: unset; text-align: left; text-indent: 0em; text-shadow: none; transform: none; -webkit-box-reflect: unset;\\\"><span>📝 总结</span></span></h2><p style=\\\"color: rgb(58,58,58); letter-spacing: 0; text-align: left; text-indent: 0;\\\"><span>如果你的域名托管在 Cloudflare，图省事又对网站统计没有特殊的需求，只想看看 UV 和 PV 等指标，那么直接一键集成 Web Analytics 最方便。如果还需要其他的一些功能，例如：Session 查看、网站点击热力图查看、网站目前谁在线等，建议使用</span><code style=\\\"color: rgb(155, 110, 35); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 245, 227); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>Umami</span></code><span>、</span><code style=\\\"color: rgb(155, 110, 35); letter-spacing: 0em; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 245, 227); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: no-repeat; background-size: auto; width: auto; height: auto; border-top-style: none; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-right-width: 3px; border-top-color: rgb(0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0.4); border-left-color: rgba(0, 0, 0, 0.4); border-right-color: rgba(0, 0, 0, 0.4); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-all;\\\"><span>Posthog</span></code><span>等专业做网站流量统计的服务。</span></p></div><div><span><br/></span></div></div></div><div><div><div><div style=\\\"display: flex;\\\"><div style=\\\"color: rgba(0,0,0,.3);\\\"><span>修改于</span></div></div></div></div></div></div></div></div></span>\\\n</div></body></html>\\u0000\"]],\"start1\":0,\"start2\":0,\"length1\":0,\"length2\":55415}]"
metadata_diff: {"new":{"id":"f9eed75a29524ecdbd41e2668869d464","parent_id":"f67288c3a0be4374b5d532b5dcc3aabc","latitude":"0.00000000","longitude":"0.00000000","altitude":"0.0000","author":"","source_url":"","is_todo":0,"todo_due":0,"todo_completed":0,"source":"joplin-desktop","source_application":"net.cozic.joplin-desktop","application_data":"","order":1764348817695,"markup_language":2,"is_shared":0,"share_id":"","conflict_original_id":"","master_key_id":"","user_data":"","deleted_time":0},"deleted":[]}
encryption_cipher_text: 
encryption_applied: 0
updated_time: 2025-11-28T21:03:21.959Z
created_time: 2025-11-28T21:03:21.959Z
type_: 13