storybook-addon-amplitude

一个用于在 Amplitude 中捕获事件的 Storybook 插件。

在此阅读博客文章。

它有什么作用？

Amplitude Storybook 插件在两种不同情况下向 Amplitude 发送事件：当用户导航到新页面时，以及当用户更改 story 的 args 时。

入门

您需要做的第一件事是注册 Amplitude。如果您已有账户，太好了！如果没有，您可以在此处免费注册。

拥有账户后，您可以创建一个新项目，该项目将关联一个 API 密钥。

为此，请导航到“设置”页面。

然后，在侧边栏中选择“项目”。

在右上角，点击“创建项目”按钮并按照说明操作。

接下来，在您的项目中将该软件包作为开发依赖项安装

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

在 storybook/main.js 中

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

然后，在 ./storybook/manager.js 中设置您的 Amplitude API 密钥

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

如果您想发送到欧盟端点，请确保设置 serverUrl 选项

window.AMPLITUDE_OPTIONS = {
  serverUrl: 'https://api.eu.amplitude.com/2/httpapi',
};

阅读更多：配置，端点

如果您在一个 TypeScript 项目中，您可能需要添加以下声明

declare global {
  interface Window {
    AMPLITUDE_DEV_API_KEY: string;
    AMPLITUDE_PROD_API_KEY: string;
    AMPLITUDE_OPTIONS: {
      serverUrl?: string;
    };
  }
}

现在您的 Storybook 将开始向您在 Amplitude 中的项目发送事件。您已准备好在 Amplitude 中创建图表！

示例图表

每周查看 Storybook 文档的独立用户数

最常引用的 Storybook 分类

事件分类

用户导航到新页面

当用户切换到新页面时，此插件会向 Amplitude 发送一个如下所示的事件

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

以这种方式跟踪事件使您能够在 Amplitude 中构建图表来显示

1. 随时间有多少人查看了您的 Storybook
2. 人们最常查看哪些分类
3. 人们最常查看哪些页面

用户更改 story 的 args

当用户更改 story 的 args 时，此插件会发送一个如下所示的事件

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

以这种方式跟踪事件使您能够在 Amplitude 中构建图表来回答

1. 人们使用 story args 功能的频率如何？
2. 人们在哪些页面分类中更新 story args 最频繁？
3. 人们在哪些页面上更新 story args 最频繁？

贡献者

创建者：Mae Capozzi

维护者：Mae Capozzi，Jack McCloy 和 Jimmy Wilson