故事本 - 插图 - 缩写
用于记录事件的故事手册 广度。 。 。 .
读取 这里的博客文章。 。 。 .
先决条件
- 20或以上节点
- 故事书9.0以上
- 振幅账户(可自由分级)
版本兼容性
| 故事书版本 | 添加版本 |
|---|---|
| 9.x (中文(简体) ) | 3.x 运算 |
| 8.x 电话 | 2.1.0 |
| 7.x 电话 | 2.0.0-2.0.1 国家 |
| 6.x (单位:千美元) | 1.x 运算 |
这有什么用?
"Amplitude Storybook"在两个不同场合向"Aplitude"显示事件:当一个用户浏览到一新页面时,当一个用户更改一个故事的参数时.
开始
首先你需要做的是签下阿姆比特 如果你已经有帐户了,太好了! 如果你没有,你可以 免费报名。 。 。 .
一旦有了账户,您就可以创建一个新的工程,它将有一个相关的 API 密钥.
注意 : 您可能想要创建一个 prod 工程和一个 dev 工程, 这样您就可以在不影响数据的情况下进行测试
要做到这一点,请浏览设置页面 .
然后,在侧边栏中选择项目 .
在右上角,单击“创建工程”按钮并遵循指示.
下一步, 在您的工程中将软件包安装为 devDependent:
# Using yarn
yarn add @amplitude/storybook-addon-amplitude --dev
# Using npm
npm install @amplitude/storybook-addon-amplitude --save-dev
内 storybook/main.js
module.exports: {
addons: [
+ '@amplitude/storybook-addon-amplitude',
]
}
然后, 设置您的振幅 API 密钥 ./storybook/manager.js
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;
};
}
}
现在,你的故事书 将开始 发布事件 在你的工程 在海拔。 你准备好开始在海平面上创建图表了!
示例图表
每周独有用户查看故事书文档
最常用的引用类别
大部分视图组件
最多修改参数的组件
事件分类学
用户导航到新页面
当一个用户切换到新页面时,这个加通会向外观显示一个事件:
{
event_type: "viewed documentation",
event_properties: {
category: "actions",
page: "button"
}
}
通过这种方式跟踪事件,您可以在“高度”中绘制图表,以显示:
- 多少人看过你的书
- 人们最经常看到的是哪些类别
- 人们最经常浏览的网页
用户更改一个故事的参数
当一个用户更改一个故事的参数时,这个加词会发出一个这样的事件:
{
event_type: "updated story args",
event_properties: {
category: "actions",
page: "button"
}
}
以这种方式跟踪事件,您可以在“高度”中绘制图表,以回答:
- 人们多常使用故事词库功能?
- 在哪一类页面中人们最经常更新故事的词源?
- 人们最经常在哪个网页上更新故事?
解决问题
事情不出现 在振幅?
- 校验您的 API 密钥设置正确
storybook/manager.ts - 设定
window.AMPLITUDE_OPTIONS = { logLevel: 4 };内storybook/manager.ts并检查浏览器控制台中的任何错误信息 - 确保您在您的区域使用正确的服务器 URL
故事书没有装入?
- 确保附加件被正确安装和配置
storybook/main.ts - 请检查date=中的日期值 (帮助) 校对:Soup
捐款
我们总是很高兴收到捐款! 请 参考我们的捐款准则 更多细节.
许可证
这个项目根据麻省理工学院许可证颁发——见 自由主义 详细文件.
贷项
拥有者 : 振幅公司
当前维护者 : 吉米·威尔逊(@jimmynotjim)
贡献者 :
 吉米·威尔逊 🐛 💻 📖 💡 🚇 👀 ⚠️ 🔧 |
 梅·卡波齐 🐛 💻 📖 💡 🚇 👀 ⚠️ 🔧 |
 杰克·麦克洛伊 💻 🚇 👀 |
 蒂门·范古尔普 💻 |
 Kaelig Deloumeau-President 总统 💻 |
 奴隶Mitev 💻 📖 💡 🚇 |
 布赖恩·苏 👀 |
 武阮 👀 |
本项目遵循 全部贡献者 规格。 任何捐款都欢迎!