Cloudflare Analytics and Cloudflare Web Analytics are two popular analytics products that provide data on website visitors, top pages, page views, etc. This data can be helpful in understanding and growing a website.
Cloudflare Web Analytics is a server-side analytics tool. There's no need to include any JavaScript code on your website, unlike Google Analytics Tracking code. To view these statistics, all you have to do is update your DNS or use Cloudflare's proxy.
Cloudflare Analytics uses your website's server logs to track data, so there's no need to add any extra JavaScript code. However, this data is often less accurate than client-side data (like from Google Analytics), since it includes all bots and other spam.
Cloudflare Analytics is a paid product available to Cloudflare customers who utilize their other services to improve the performance and security of their websites.
Cloudflare Web Analytics is Cloudflare's reaction to Google Analytics and other web analytics solutions like Plausible Analytics.
It works on the client side and requires you to put a JavaScript snippet into your website. Cloudflare Web Analytics is also free to use.
Now I'd like to compare both Cloudflare Analytics and Google Analytics
Cloudflare Web Analytics vs Google Analytics
Cloudflare Web Analytics is an easy way to track website traffic. It provides detailed information about visitors behavior, which helps you improve your site. Google Analytics is a free service that lets you see how many people visit your site, where they come from, and how long they stay. Let's know furthermore. Cloudflare Analytics offers a lot of features, such as real-time reporting, custom dashboards, and advanced segmentation. You can also use it to set up email notifications when certain events occur. However, it does not offer any analytics tools for mobile devices. Google Analytics has a wide range of features, including mobile tracking, conversion tracking, and social media integration.
Cloudflare Analytics gives you access to real-time data about your visitors, while Google Analytics offers historical data. You can use both services to learn what works best for your business. For example, if you want to know whether your blog posts are driving sales, you could compare the number of visits to your blog post pages against the number of purchases made after reading them. If you find that your blog posts aren't generating sales, you might consider changing the content to better appeal to your audience.
How to use Cloudflare Web Analytics with NextJs
- Create an account
- Verify your email address.
- Go to Dashboard
- From the left navigation bar, select Web Analytics
- Enter your hostname. Like mine is
xahidex.com - Click Done
- Copy the Javascript script
- Paste the JavaScript script before the closing
</body>tag:
import Document, { Head, Html, Main, NextScript } from 'next/document'
export default class MyDocument extends Document {
render() {
return (
<Html lang='en'>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}For React you can create
_document.jsxfor Javascript or_document.tsxfor Typescript file in thepagesfolder. Paste in the following code.
import Document, { Head, Html, Main, NextScript } from 'next/document'
export default class MyDocument extends Document {
render() {
return (
<Html lang='en'>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}Add this CloudFlare script between <Head> and </Head> tag like this:
import Document, { Head, Html, Main, NextScript } from 'next/document'
import Script from "next/script";
export default class MyDocument extends Document {
render() {
return (
<Html lang='en'>
<Head>
<Script
defer
src='https://static.cloudflareinsights.com/beacon.min.js'
data-cf-beacon='{"token": "your-cloudflare-token"}'
strategy="afterInteractive"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}