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。
事件結構
lt;dr: 事件將會傳送
Story Viewed(或您的自訂事件名稱)，以及包含viewMode、group、page和story的自訂屬性物件。
Storybook 提供的只是 api 上由 register 回呼提供的 path 和 storyId。strings 看起來像這些範例
/story/fundamentals-principles--page/docs/design-spacing--page/docs/components-accordion--base/story/components-accordion--base
因此，我們分割了路徑並建立了一個具有此結構的物件
/<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'
}
支援
您需要協助嗎？ 在此開啟一個問題！
