Storybook Addon Amplitude

Storybook Addon Amplitude provides support for Amplitude on Storybook.

Getting Started

Install:

npm install storybook-amplitude --save-dev

within .storybook/main.js:

module.exports = {
  addons: ['storybook-amplitude/register']
};

Then, set on window object a key STORYBOOK_AMPLITUDE_API_KEY using your API key as value:

window.STORYBOOK_AMPLITUDE_API_KEY = 'YOUR_API_KEY_HERE'

Configuration

You can use a custom event name and identify each event with an email by setting the following values on window object:

window.STORYBOOK_AMPLITUDE_EVENT = 'Your custom event'
window.USER_EMAIL = 'email'

The default value for STORYBOOK_AMPLITUDE_EVENT is Story Viewed.

Event anatomy

lt;dr: the event will be sent with Story Viewed (or your custom event name) and the custom property object with viewMode, group, page and story.

The Storybook provides just the path and storyId on the api provided by register callback. The strings are like these examples:

• /story/fundamentals-principles--page
• /docs/design-spacing--page
• /docs/components-accordion--base
• /story/components-accordion--base

So, we've split the path and created an object with this anatomy:

/<viewMode>/<group>-<page>--<story>

Examples:

| Path | ViewMode | Group | Page | Story | | -------------------------------------- | -------- | ------------ | ---------- | -------- | | /story/fundamentals-principles--page | story | fundamentals | principles | null | | /docs/design-spacing--page | docs | design | spacing | null | | /docs/components-accordion--base | docs | components | accordion | base | | /story/components-button--disabled | story | components | button | disabled |

Creating an util function that returns an object with viewMode, group, page and story. Something like this:

{
  viewMode: 'docs',
  group: 'components',
  page: 'button',
  story: 'disabled'
}

Support

Do you need a help? Open a issue here!