New
NextJS, SvelteKit, Remix and the future of StorybookAutomate with Chromatic
Star75,351
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Amplitude Storybook Addon
A storybook addon to capture events in Amplitude
npm install @amplitude/storybook-addon-amplitude
Last updated about 1 month ago
4k
Downloads per week
Readme View on GitHub

storybook-addon-amplitude

A storybook addon to capture events in Amplitude.

Read the blog post here.

What does it do?

The Amplitude Storybook add-on emits events to Amplitude on two different occasions: when a user navigates to a new page and when a user changes a story's args.

Getting Started

The first thing you’ll need to do is sign up for Amplitude. If you already have an account, great! If you don’t, you can sign up here for free.

Once you have an account, you can create a new project which will have an associated API key.

To do this, navigate to the Settings page.

Screen Shot 2022-06-15 at 4 12 52 PM

Then, select Projects in the sidebar.

Screen Shot 2022-06-15 at 4 15 33 PM

In the top right hand corner, click the Create Project button and follow the instructions.

Screen Shot 2022-06-15 at 4 17 13 PM

Next, install the package as a devDependency in your project:

yarn add @amplitude/storybook-addon-amplitude --dev

in storybook/main.js

module.exports: {
  addons: [
+   '@amplitude/storybook-addon-amplitude/preset',
  ]
}

Then, set your Amplitude API keys in ./storybook/manager.js

window.AMPLITUDE_DEV_API_KEY = '<amplitude-dev-api-key>';
window.AMPLITUDE_PROD_API_KEY = '<amplitude-prod-api-key>';

Now your storybook will begin emitting events to your project in Amplitude. You’re ready to start creating charts in Amplitude!

Example Charts

Weekly unique users viewing Storybook documentation

Screen Shot 2022-05-24 at 1 04 57 PM

Most commonly referenced Storybook categories

Screen Shot 2022-05-31 at 1 54 41 PM

Event Taxonomy

User navigates to a new page

When a user switches to a new page, this add-on emits an event to Amplitude that looks like this:

{
  event_type: "viewed documentation", 
  event_properties: {
    category: 'variants', 
    page: "secondarybuttongroup"
  }
}

Tracking the event in this way allows you to build charts in Amplitude to show:

  1. How many people have viewed your Storybook over time
  2. What categories people are viewing most frequently
  3. What pages people are viewing most frequently

User changes a story’s args

When a user changes a story's args, this add-on emits an event that looks like this:

{
  event_type: "updated story args", 
  event_properties: {
    category: 'variants', 
    page: "secondarybuttongroup"
  }
}

Tracking the event in this way allows you to build charts in Amplitude to answer:

  1. How often do people use the story args functionality?
  2. In which category of pages people update the story args most frequently?
  3. On which pages people update the story args most frequently?

Credits

Created by: Mae Capozzi

Maintained by: Mae Capozzi, Jack McCloy, and Jimmy Wilson

Join the community
5,861 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI