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 withviewMode
,group
,page
andstory
.
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!