Vercel Analytics + Storybook Help

[steveg152]

I am looking for help in configuring Vercel Analytics in my Storybook deployment.

I have tried just adding the script tags and following the “HTML” instructions, would possibly adding a decorator with the <Analytics/> component work and actually give me the stats for the stories that are being viewed?

[pawlean (Pauline P. Narvas)]

Hi @steveg152, welcome to the Vercel Community!

Thanks for your question! I’m not 100% familiar with Storybook, but after some digging, I found that you could configure Vercel Analytics in your Storybook deployment by creating a custom decorator that wraps each story with the <Analytics/> component from @vercel/analytics/react.

import React from 'react';
import { Analytics } from '@vercel/analytics/react';
import { Decorator } from '@storybook/react';

export const withVercelAnalytics: Decorator = (Story, context) => {
  return (
    <>
      <Story {...context} />
      <Analytics />
    </>
  );
};

export const decorators = [withVercelAnalytics];

Or For more precise tracking, you can use the analyticsId prop to ensure data is associated with the correct project:

import React from 'react';
import { Analytics } from '@vercel/analytics/react';
import { Decorator } from '@storybook/react';

// Replace this with your actual Vercel Analytics ID
const VERCEL_ANALYTICS_ID = 'your-analytics-id-here';

export const withVercelAnalytics: Decorator = (Story, context) => {
  return (
    <>
      <Story {...context} />
      <Analytics analyticsId={VERCEL_ANALYTICS_ID} />
    </>
  );
};

export const decorators = [withVercelAnalytics];

Let us know how you get on!