storybook-addon-amplitude

一个用于在 Amplitude 中捕获事件的 Storybook 附加组件。

阅读 博客文章。

它有什么作用？

Amplitude Storybook 附加组件在两种情况下向 Amplitude 发射事件：当用户导航到新页面时，以及当用户更改故事的 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. 人们最常查看哪些页面

用户更改故事的 args

当用户更改故事的 args 时，此附加组件会发射一个类似于这样的事件

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

通过这种方式跟踪事件，您可以创建 Amplitude 中的图表以回答

1. 人们多常使用故事 args 功能？
2. 在哪些类别的页面中，人们最常更新故事 args？
3. 在哪些页面中，人们最常更新故事 args？

鸣谢

创建者：Mae Capozzi

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