2021-06-03
Immediately after switching my blog to the Tailwind NextJS Theme, I needed to continue tracking important metrics. Here are the steps I took to install Cloudflare Web Analytics on my new NextJS blog.
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.
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:
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.
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.
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.
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.
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:
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