Please add Vercel Analytics

[louiss0]

I want to use vercel analytics in astro but I'd have to create a library for that I see that you have a nice set of Components that Allow the user to integrate analytics from other sites. I'm going to just give you the code for how to integrate Vercel Analytics if you want more info look into the docs.

You need to install web-vitals in order to use the code below.

Code needed for Web Analytics

import { Metric, onCLS, onFCP, onFID, onLCP, onTTFB } from 'web-vitals';

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

function getConnectionSpeed() {
    return 'connection' in navigator
        && navigator['connection']
        && typeof navigator['connection'] === "object"
        && 'effectiveType' in navigator['connection']
        ? navigator['connection']['effectiveType']
        : '';
}

type Options = { params: { [s: string]: any; } | ArrayLike<any>; path: string; analyticsId: string; debug: boolean; }


function sendToAnalytics(metric:Metric, options:Options) {
  const page = Object.entries(options.params).reduce(
    (acc, [key, value]) => acc.replace(value, `[${key}]`),
    options.path,
  );

  const body = {
    dsn: options.analyticsId, // qPgJqYH9LQX5o31Ormk8iWhCxZO
    id: metric.id, // v2-1653884975443-1839479248192
    page, // /blog/[slug]
    href: location.href, // https://my-app.vercel.app/blog/my-test
    event_name: metric.name, // TTFB
    value: metric.value.toString(), // 60.20000000298023
    speed: getConnectionSpeed(), // 4g
  };

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

  const blob = new Blob([new URLSearchParams(body as Record<string, any>).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(options:Options) {
  try {
    onFID((metric) => sendToAnalytics(metric, options));
    onTTFB((metric) => sendToAnalytics(metric, options));
    onLCP((metric) => sendToAnalytics(metric, options));
    onCLS((metric) => sendToAnalytics(metric, options));
    onFCP((metric) => sendToAnalytics(metric, options));
  } catch (err) {
    console.error('[Analytics]', err);
  }
}

Astro Component

<script>

   // Replace this with the one that comes from the file with the script that I have written above. 
      import { webVitals } from "~/utils/vitals";

      const analyticsId = import.meta.env.PUBLIC_VERCEL_ANALYTICS_ID;

      if (analyticsId) {
        webVitals({
          analyticsId,
          path: location.pathname,
          params: location.search,
          debug: !import.meta.env.PROD,
        });
      }</script>