Enable Vercel Analytics in Astro

- code vercel analytics astro

2023-02-09 Update

This feature has been added to vercel integration by me. Just enable it in Astro Config.


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

export default defineConfig({
  output: 'server',
  adapter: vercel({ analytics: true }),

Astro has its Vercel integration. But it hasn’t provided any option to enable analytics yet. So we need to add some scripts for it manually.

I have created a feature discussion for integration. But I don’t have enough ability to create a PR for it. Hope this post can help it get integrated.


Analytics script for this blog:

Create entry script

Create analytics.ts in src/scripts/vercel and add it in your layout.


  <script src="../scripts/vercel/analytics.ts"></script>

Define a mode variable because we only enable it in production mode.


const mode = import.meta.env.MODE as 'development' | 'production';


Vercel docs: https://vercel.com/docs/concepts/analytics/audiences

pnpm add @vercel/analytics


+ import { inject } from '@vercel/analytics';

  const mode = import.meta.env.MODE as 'development' | 'production';

+ inject({ mode });

Web Vitals

Vercel docs: https://vercel.com/docs/concepts/analytics/web-vitals

Thanks to this stackoverflow answer. I have converted the script of this answer to typescript and simplified a bit.

pnpm add web-vitals


import { getCLS, getFCP, getFID, getLCP, getTTFB } from 'web-vitals';
import type { Metric } from 'web-vitals';

const vitalsUrl = 'https://vitals.vercel-analytics.com/v1/vitals';

type Options = { path: string; analyticsId: string; debug?: boolean };

const getConnectionSpeed = () => {
  return 'connection' in navigator &&
    navigator['connection'] &&
    'effectiveType' in (navigator['connection'] as { effectiveType: string })
    ? (navigator['connection'] as { effectiveType: string })['effectiveType']
    : '';

const sendToAnalytics = (metric: Metric, options: Options) => {
  const body = {
    dsn: options.analyticsId,
    id: metric.id,
    page: options.path,
    href: location.href,
    event_name: metric.name,
    value: metric.value.toString(),
    speed: getConnectionSpeed(),

  if (options.debug) {
    console.log('[Analytics]', metric.name, JSON.stringify(body, null, 2));

  const blob = new Blob([new URLSearchParams(body).toString()], {
    // This content type is necessary for `sendBeacon`
    type: 'application/x-www-form-urlencoded',
  if (navigator.sendBeacon) {
    navigator.sendBeacon(vitalsUrl, blob);
  } else
    fetch(vitalsUrl, {
      body: blob,
      method: 'POST',
      credentials: 'omit',
      keepalive: true,

export function webVitals() {
  const options = {
    path: window.location.pathname,
    analyticsId: import.meta.env.PUBLIC_VERCEL_ANALYTICS_ID,
  try {
    getFID((metric) => sendToAnalytics(metric, options));
    getTTFB((metric) => sendToAnalytics(metric, options));
    getLCP((metric) => sendToAnalytics(metric, options));
    getCLS((metric) => sendToAnalytics(metric, options));
    getFCP((metric) => sendToAnalytics(metric, options));
  } catch (err) {
    console.error('[Analytics]', err);


  import { inject } from '@vercel/analytics';

+ import { webVitals } from './webVitals';

  const mode = import.meta.env.MODE as 'development' | 'production';

  inject({ mode });
+ if (mode === 'production') {
+   webVitals();
+ }