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。

简而言之：事件将发送 Story Viewed（或您的自定义事件名称）和带有 viewMode、group、page 和 story 的自定义属性对象。

Storybook 提供的只是 register 回调提供的 api 上的 path 和 storyId。strings 类似于以下示例

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

/<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

创建一个返回包含 viewMode、group、page 和 story 的对象的实用程序函数。类似于以下内容

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

作者

标签