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);
};
这样,终于有统计信息了。