Published on

How to Add Cloudflare Web Analytics to your NextJS Website

Authors

Introduction

I changed the design of my blog recently. The previous design was powered by Gatsby Starter Minimal Blog. I used Cloudflare Web Analytics on the previous design to measure the number of page views that my website gets and also the real-world performance of the site.

Immediately after switching my blog to the Tailwind NextJS Theme, I needed to continue tracking these important metrics. Here are the steps I took to install Cloudflare Web Analytics on my new NextJS blog.

Why I Chose Cloudflare Web Analytics

Before we get to how to install Cloudflare Web Analytics on your Next.js site, I will talk a bit about why I chose to use Cloudflare Web Analytics on my blog. These are the reasons why I chose Cloudflare Web Analytics to track metrics on my blog:

1. Small Tracking Script Size

This is the major reason why I chose Cloudflare Web Analytics. I care a lot about how quickly my website loads, and I don't want to overburden my users with large scripts. This is why I chose Cloudflare Web Analytics. The tracking script is 5.3kb gzipped and 13.6kb uncompressed. This is fair enough for me as my users will not have to waste bandwidth on an analytics script.

2. Its ability to Track Core Web Vitals

Core Web Vitals are the new thing now. The Core Web Vitals metrics try to give a numerical value to how visitors perceive your site. It checks the Larges Contentful Paint(LCP), First Input Delay(FID), and Cumulative Layout Shift(CLS). The Cloudflare Analytics tracker measures the page experience on the devices of real users, giving you insight into how users of your website perceive it.

These are the four steps that I followed to install Cloudflare Web Analytics on my blog.

Step 1 - Create your Web Analytics Site

On your Cloudflare dashboard, select Web Analytics from the list on the right. Click Add a Site under the Quick Actions menu on the right.

Enter the domain where your blog is hosted and click Next to continue. The hostname will be something like www.example.com.

A tracking snippet will be displayed in a textbox. Click the textbox to copy the tracking snippet.

Step 2 - Add the JS Snippet to your website.

Now that you have created a Web Analytics site, you will proceed to add the tracking snippet to your Next.js site. Create the following _document.js file in your Next.js app, if you don't already have one, at either src/pages/_document.js or pages/_document.js, depending on the location of your pages directory.

_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

You will now paste the tracking snippet that you copied from your Cloudflare dashboard into the Head component. Any HTML that is added in the _document.js becomes global to all the pages in your site.

Edit _document.js, placing the tracking script in the Head component:

_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document'

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

export default MyDocument

You have now successfully added Cloudflare Web Analytics to your Next.js site. When you build and redeploy your site, Cloudflare will start collecting page view and website performance data.

To view the data collected from your website, visit the Cloudflare WEb Analytics page from your dashboard and select the corresponding website from the list provided. You will be able to see the number of visitors, page views, referrers, and other variables, all on one page.

If you enjoyed this article, Check out my other post about how I built a URL shortener with Cloudflare Workers