Adding Cloudflare Web Analytics to NextJs: A Step-by-Step Guide

March 18, 2022 (2y ago)

Cloudflare Web Analytics
💡

This post has been updated for the Next.js 13/14 app directory.

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.

Setting Up Cloudflare Web Analytics with NextJs

  1. Sign Up: Create an account
  2. Email Verification: Verify your email address.
  3. Dashboard Access: Go to Dashboard
  4. Web Analytics Selection: From the left navigation bar, select Web Analytics
  5. Hostname Entry: Enter your hostname. Like mine is xahidex.com
  6. Finalization: Click Done
  7. JavaScript Script: Copy the Javascript script
  8. Integration: Paste the JavaScript script before the closing </body> tag in your document.tsx like this:
import Document, { Head, Html, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang='en'>
        <Head />
        <body>
          <Script
            defer
            src='https://static.cloudflareinsights.com/beacon.min.js'
            data-cf-beacon='{"token": "your-cloudflare-token"}'
            strategy="afterInteractive"
          />
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

Setting up Cloudflare Web Analytics with NextJs 13

If you're using nextjs13. add this script to your app/layout.tsx:

import Script from "next/script";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html
      lang="en"
    >
      <body className="antialiased">
        <main className="flex-auto">
          {children}
          <Script
            defer
            src='https://static.cloudflareinsights.com/beacon.min.js'
            data-cf-beacon='{"token": "your-cloudflare-token"}'
            strategy="afterInteractive"
          />
        </main>
      </body>
    </html>
  );
}

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.

Conclusion

Incorporating Cloudflare Web Analytics into your NextJs project is a seamless process that brings valuable insights without the need for client-side scripts. By following the outlined steps, you can effortlessly harness the power of server-side analytics, free from the complexities of traditional tracking codes. Cloudflare Web Analytics emerges as a compelling alternative, offering real-time data and customization options. This integration not only simplifies the tracking process but also positions your website for enhanced performance and security, aligning with Cloudflare's suite of services. Elevate your understanding of user behavior and optimize your NextJs application with the precision of Cloudflare Web Analytics.