Supercharging your Astro website with easy deployment and analytics on Vercel

Do you like an easy to setup astro blog deployment environment with github integration and free web traffic analytics? Vercel is the platform of your choice! It provides you everything out of the box with seemless integration and documentation. The main focus of this blog article is enabling web analytics on your astro website.

Activate web analytics on Vercel

Go to vercel.com and select your website's project. Navigate to the Analytics tab and activate web analytics for that specific project. Regarding of your account tier, there is a different function scope regarding to web analytics. For personal website, I would recommend to use the hobby tier and upgrade to pro if needed.
After that, we need to connect the website with vercel analytics.

Install web analytics in your astro project

Install their analytics package with the package manager of your choice.

npm i @vercel/analytics

Integrate web analytics in your astro project

You only need to edit the astro.config.mjs file by inserting the Vercel specific configuration. With that, your website automatically loads the needed javascript file at runtime to intergrate Vercel web analytics.

import { defineConfig } from 'astro/config';
import vercelStatic from '@astrojs/vercel/static';

export default defineConfig({
    output: 'static',
    adapter: vercelStatic({
        webAnalytics: {
            enabled: true
        },
    })
});

Conclusion

With this easy setup, you have access to information about your website visitors backed up by the same pfatform where you host your astro website. Furthermore, you do not need to integrate different analytic tools or combine that with user unfriendly cookie banners.