Storybook Amplitude 插件

Storybook Amplitude 插件为 Amplitude 在 Storybook 上提供了支持。

开始使用

安装

npm install storybook-amplitude --save-dev

在 .storybook/main.js 中

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

然后，设置一个包含您的 API 密钥的环境变量

window.STORYBOOK_AMPLITUDE_API_KEY = '561t966209h0789k7ffr2c3nmn0sau90'

您可以通过设置环境变量来使用自定义事件名称

window.STORYBOOK_AMPLITUDE_EVENT = 'Your custom event'

默认值是 Story Viewed。

tl;dr（太长不看）：事件将以 Story Viewed（或您的自定义事件名称）发送，并带有包含 viewMode、group、page 和 story 的自定义属性对象。

Storybook 在 register 回调提供的 api 中只提供了 path 和 storyId。字符串 如下例所示

因此，我们分割了路径，并创建了一个具有以下结构的对象

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

示例

路径	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

创建一个 util 函数，返回一个包含 viewMode, group, page 和 story 的对象。类似于这样

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

作者

标签