How to install Ahrefs Web Analytics

Vincent Lejtzén — Wed, 05 Feb 2025 21:03:13 +0000

Ahrefs has recently launched a new web analytics tool that is free to use. Here's how to install it on your website.

This post was originally posted on my personal website titled How to install Ahrefs Web Analytics.

Ahrefs Web Analytics is a free and straightforward tool for website owners to monitor and analyze their site's traffic. It operates without cookies and does not collect personal data, focusing solely on essential metrics—making it perfect for small websites to easily track usage.

Installing Ahrefs Web Analytics

Follow these steps to install Ahrefs Web Analytics on your website.

Create an Ahrefs account (or log in to your existing account)
Connect your Search Console account to Ahrefs
Add your website to Ahrefs
Head over to the "Web Analytics" section and select your website
Embed the tracking code in the head section on your website
Click the button to validate your installation

That's it! You should now be able to see your website's traffic data in Ahrefs Web Analytics.

Embedding the tracking code on a Next.js website

If your website is built with Next.js I would recommend the following way to add the tracking code.

Use an environment variable

Add and environment variable to your .env file or hosting platform like Vercel called AHREFS_ANALYTICS_KEY contaning your Ahrefs Web Analytics key.

Create a custom component

Create a new component called AhrefsWebAnalytics.js in your components contaning the following code. This component will only render the tracking code if the AHREFS_ANALYTICS_KEY environment variable is set. Change it to your needs as you see fit.

const key = process.env.AHREFS_ANALYTICS_KEY

export default function AhrefsAnalytics() {
  if (!key) {
    return null
  }

  return (
    <script
      src="https://analytics.ahrefs.com/analytics.js"
      data-key={key}
      async
    ></script>
  )
}

Add the component to your layout

Add your new component to your layout file.

import AhrefsAnalytics from '@/components/AhrefsAnalytics'

export default async function RootLayout({ children }) {
  return (
    <html>
      <head>
        <AhrefsAnalytics />
      </head>
      <body>{children}</body>
    </html>
  )
}