cloudflare pages启用自定义域名的web analytics统计

2022年3月28日 • ... • ☕️ 1 min read

目前这个博客是二级域名，因为主域名本身并没有转移到cloudflare里，所以二级域名使用自定义域添加的，等于单独做了一个cname记录过去。

在cloudflare pages的配置里，可以一键启用web-analytics，我随便开通之后就不管了。但是过了一段时间，发现并没有任何浏览记录（包括自己的），纳闷了好一会儿，发现页面有个报错。

Access to XMLHttpRequest at 'https://cloudflareinsights.com/cdn-cgi/rum' from origin 'https://blog.axiu.me' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

明显的跨域警告报错，一番查找，发现自动启用的Web Analytics会自动绑定到临时域名，同时这个token只能验证临时域名，放其他地方就会报跨域。所以解决办法，禁用cloudflare pages里的Analytics，同时在Web Analytics标签里，添加一个站点，选择”使用不属于cloudflare的域名”xxx”，然后保存，并在网站里添加指定的js片段。

如果是使用gatsby，可以在gatsby-browser.js里添加以下代码：

export const onRouteUpdate = ({ location, prevLocation }) => {
  const head = document.head;
  const script = document.createElement('script');
  script.id = 'cloudflare-web-analytics';
  script.defer = true;
  script.src = 'https://static.cloudflareinsights.com/beacon.min.js';
  script.setAttribute(
    'data-cf-beacon',
    `{"token": "your-token-string"}`
  );

  const existingScript = head.querySelector(`#${script.id}`);
  if (existingScript) {
    head.removeChild(existingScript);
  }

  head.appendChild(script);
};

这样，终于有统计信息了。