storybook-addon-amplitude

一個用於在 Amplitude 中捕捉事件的 Storybook 擴充套件。

在此處閱讀部落格文章。

它的作用是什麼？

Amplitude Storybook 擴充套件在兩種不同的情況下向 Amplitude 發出事件：當使用者導航到新頁面時，以及當使用者變更故事的 args 時。

開始使用

您需要做的第一件事是註冊 Amplitude。如果您已經有帳戶，那就太棒了！如果您沒有，可以在此處免費註冊。

擁有帳戶後，您可以建立一個新專案，該專案將具有相關聯的 API 金鑰。

若要執行此操作，請導覽至「設定」頁面。

然後，在側邊欄中選擇「專案」。

在右上角，按一下「建立專案」按鈕並依照指示操作。

接下來，在您的專案中將套件安裝為 devDependency

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