浏览 Twitter、LinkedIn、Reddit、Discord 上的 SaaS 社区,凡是你能想到的社区,你都会看到其中许多社区都有一个共同的主题。 该主题可以有很多名称:BI、分析、洞察等等。 这是很自然的,我们做生意,收集数据,我们成功或失败。 我们希望调查所有这些,了解我们拥有的数据并采取行动。 这种需求催生了许多项目和工具,使任何想要研究数据的人的生活变得更加轻松。 但是,当人类拥有时,人们就会想要更多。 在 BI 和分析领域,“更多”通常以嵌入、品牌、定制样式和访问等形式出现。 这最终意味着开发人员需要做更多的工作,需要更多的时间来考虑。 因此,自然需要可以让您拥有这一切的 BI 工具。
让我们列出作为这些仪表板的构建者和维护者可能面临的挑战:
- 您希望在您自己的应用程序或平台中向最终用户或查看者提供仪表板
- 您希望能够管理不同的仪表板集合(即“集成”)
- 您希望能够向仪表板和数据集集合授予特定用户权限
- 您希望确保用户只能访问与他们相关的数据
Cumul.io 提供了一个我们称之为的工具 集成 这有助于解决这些挑战。 在本文中,我将向您介绍什么是集成以及如何设置集成。 很酷的是,对于上述大多数要点,只需要很少的代码,并且大部分可以在 Cumul.io UI。
一些背景——集成
An 集成 Cumul.io 中的结构定义了旨在一起使用(例如在同一应用程序中)的仪表板集合。 这也是我们常用的 嵌 仪表板到应用程序中。 换句话说,为了将仪表板嵌入到应用程序中,我们允许应用程序访问它们所属的集成。 您可以将仪表板与集成相关联,并管理集成的最终用户对这些仪表板及其使用的数据集拥有的访问权限类型。 仪表板可能是多个集成的一部分,但它可能对不同的集成具有不同的访问权限。 在嵌入方面,有许多 SDK 可供使用,无论您的堆栈是什么样的,都可以让生活变得简单。 😊
一旦您拥有 Cumul.io 帐户,并且您是 Cumul.io 组织的“所有者”,您将能够通过“集成”选项卡管理和维护所有集成。 让我们看一下 Cumul.io 帐户示例。 您可以在下面看到一位 Cumul.io 用户可能创建的仪表板:
尽管这些是该用户可能创建的所有仪表板,但很可能并非所有仪表板都适用于相同的最终用户或应用程序。 因此,这个 Cumul.io 帐户的所有者将创建并维护一个集成(或更多!) 💪 让我们看看对他们来说可能是什么样子:
因此,该 Cumul.io 帐户的所有者似乎维护着两个独立的应用程序。
现在让我们看看创建集成并将其仪表板嵌入到应用程序中的过程是什么样的。 好消息是,如前所述,您必须执行的许多步骤都可以在 Cumul.io UI 中完成。
免责声明:出于本文的目的,我将仅关注集成部分。 因此,我将跳过与仪表板创建和设计有关的所有内容,我们将从一组预制的假想仪表板开始。
我们将要做什么:
创建集成
为了简单起见,我们现在只创建一个集成。 假设我们有一个为公司维护的分析平台。 我们希望向最终用户提供三个仪表板:营销仪表板、销售仪表板和潜在客户仪表板。
假设在该帐户已创建或有权访问的所有仪表板中,对于该特定项目,他们只想使用以下仪表板:
新的集成
要创建集成,我们转到“集成”选项卡并选择“新建集成”。 弹出的对话框已经让您了解下一步的步骤:
选择仪表板
接下来,您将能够选择将哪些仪表板包含在此集成中。 您还可以为集成指定一个名称,我在这里决定将其命名为“非常重要的集成”:
确认选择后,您将可以选择为每个仪表板定义一个 slug(强烈推荐)。 稍后可以在将仪表板嵌入到您的应用程序中时使用它们。 稍后您将看到,slugs 使您可以轻松地在前端代码中引用仪表板,并且在需要时也可以更轻松地替换仪表板(因为您无需担心前端代码中的仪表板 ID)。
访问权限
然后,您将可以设置集成对其仪表板使用的数据集的访问权限。 这里我们将其设置为“可以查看”。 有关访问权限及其含义的更多信息,请查看我们的 将数据集与集成相关联:
过滤器和参数(以及多租户访问)
旁注:为了帮助多租户访问(这在这个虚构的设置中是有意义的),Cumul.io 可以在仪表板使用的数据集上设置参数和过滤器。 这意味着登录分析平台的每个用户只能在仪表板中看到他们个人有权访问的数据。 您可以想象,在这种情况下,访问权限将基于最终用户在公司中工作的部门。 有关如何使用 Cumul.io 设置多租户的更多信息,请查看我们的文章, “使用 Auth0 在 Cumul.io 仪表板上实现多租户”。 这可以在仪表板设计过程中完成(我们正在跳过),这使得更容易可视化过滤器正在做什么。 但在这里,我们将在集成创建过程中设置这些过滤器。
在这里,我们设置数据集可能需要的过滤器。 在这种情况下,当我们根据用户的部门进行过滤时,我们定义了一个 department
参数和过滤器基于:
瞧! 完成这些设置后,您就成功创建了集成。 下一个对话将指导您嵌入集成的后续步骤:
现在您将能够在“集成”选项卡中看到这个全新的集成。 您也可以在这里快速访问集成 ID,稍后将使用该 ID 来嵌入仪表板。
好消息! 创建集成后,您可以随时对其进行编辑。 您可以删除或添加仪表板,也可以更改仪表板的名称或访问权限。 因此,您不必担心随着应用程序的变化和发展而创建新的集成。 由于编辑集成全部在 UI 内进行,因此您无需担心开发人员再次进行所有设置。 非技术用户可以随时随地调整这些集成。
嵌入仪表板
让我们看看我们想要到达哪里。 我们希望在自定义应用程序中提供仪表板。 很简单,用户登录到应用程序,该应用程序有仪表板,他们可以看到仪表板以及允许他们查看的数据。 例如,它可能如下所示:
有人对于如何向最终用户提供仪表板有非常具体的愿景。 他们想要一个可以翻阅每个仪表板的侧边栏。 它也可能是完全不同的东西。 我们将关注的是如何将这些仪表板嵌入到我们的应用程序中,无论主机应用程序是什么样子。
Cumul.io 附带了一组公开可用的 SDK。 在这里我将向您展示如果您要使用 节点SDK。 看看我们 开发人员文档 查看还有哪些其他可用的 SDK 以及如何使用它们的说明。
步骤 1:为您的最终用户生成 SSO 令牌
在为最终用户生成 SSO 令牌之前,您必须确保在 Cumul.io 中创建 API 密钥和令牌。 您可以通过您的 Cumul.io 个人资料执行此操作。 应由有权访问集成的组织所有者创建并使用此 API 密钥和令牌来发出 SSO 授权请求。 完成此操作后,我们首先创建一个 Cumul.io 客户端,该客户端将在应用程序的服务器端完成:
const Cumulio = require("cumulio"); const client = new Cumulio({ api_key: '<YOUR API KEY>', api_token: '<YOUR API TOKEN>',
});
现在我们可以为最终用户创建 SSO 令牌。 有关此 API 调用和必填字段的更多信息,请查看我们的 有关生成的开发人员文档 SSO 令牌.
let promise = client.create('authorization', { integration_id: '<THE INTEGRATION ID>', type: 'sso', expiry: '24 hours', inactivity_interval: '10 minutes', username: '< A unique identifier for your end user >', name: '< end-user name >', email: '< end-user email >', suborganization: '< end-user suborganization >', role: 'viewer', metadata: {}
});
在这里,请注意我们如何添加可选的 metadata
场地。 您可以在此处提供要用来过滤仪表板数据集的参数和值。 在我们所经历的示例中,我们一直在根据部门进行过滤,因此我们会将其添加到元数据中。 理想情况下,您可以从您使用的身份验证提供商处获取此信息。 看到 关于我们如何使用 Auth0 完成此操作的详细说明.
此请求将返回一个 JSON 对象,其中包含授权 ID 和令牌,稍后将其用作密钥/令牌组合以在客户端嵌入仪表板。
您还可以选择在此处添加其他非常酷的东西,那就是 CSS 属性。 这将允许您为每个用户(或用户组)定义自定义外观。 对于同一应用程序,安吉丽娜与布拉德的营销仪表板可能如下所示:
第 2 步:嵌入
我们在那里向前跳了一点。 我们为最终用户创建了 SSO 令牌,但尚未将仪表板实际嵌入到应用程序中。 让我们看一下。 首先,您应该安装并导入 网页组件.
import '@cumul.io/cumulio-dashboard';
导入组件后,您可以像使用 HTML 标签一样使用它。 这是您嵌入仪表板的位置:
<cumulio-dashboard dashboardId="< a dashboard id >" dashboardSlug="< a dashboard slug >" authKey="< SSO key from step 1 >" authToken="< SSO token from step 1 >">
</cumulio-dashboard>
在这里您将有几个选择。 您可以为要嵌入的任何仪表板提供仪表板 ID,也可以提供我们在集成设置中定义的仪表板 slug(这就是我强烈推荐这样做的原因,这样做更具可读性)。 有关如何嵌入仪表板的更多详细信息,您还可以查看我们的 开发者文档.
当然,执行此步骤的一个好方法是在 HTML 文件中定义仪表板组件的框架,并从应用程序的客户端填充其余部分。 我已经完成了以下操作,尽管这当然不是唯一的方法:
我已经添加了带有 ID 的仪表板组件 dashboard
:
<cumulio-dashboard id="dashboard"></cumulio-dashboard>
然后,我在客户端代码中检索了该组件,如下所示:
const dashboardElement = document.getElementById("dashboard");
然后,我从应用程序的服务器端请求 SSO 令牌,该令牌返回所需的密钥和令牌以添加到仪表板组件。 假设我们有一个包装函数 getDashboardAuthorizationToken()
它为我们执行此操作并返回服务器端 SSO 令牌请求的响应。 接下来,我们只需相应地填写仪表板组件即可:
const authorizationToken = await getDashboardAuthorizationToken();
if (authorizationToken.id && authorizationToken.token) { dashboardElement.authToken = authorizationToken.token; dashboardElement.authKey = authorizationToken.id; dashboardElement.dashboardSlug = "marketing|sales|leads";
}
请注意,在前面的步骤中,我如何选择为作为此集成一部分的仪表板定义 slugs。 这意味着我可以避免查找仪表板 ID 并添加 dashboardId
作为我的参数之一 dashboardElement
。 相反,我可以只提供其中一个蛞蝓 marketing
, sales
or leads
我完成了! 当然,您必须为您的应用程序设置某种选择流程,以决定在何处以及何时嵌入哪个仪表板。
就是这样,伙计们! 我们已经在 Cumul.io 中成功创建了一个集成,并且通过几行代码,我们已经能够将其仪表板嵌入到我们的应用程序中🎉现在想象一个场景,您必须同时维护多个应用程序,无论是在同一家公司或不同的公司。 无论您的情况如何,我相信您都可以想象如果您有多个仪表板,其中每个仪表板都必须去往不同的地方,并且每个仪表板都必须根据它们所在的位置以及我们的位置而拥有不同的访问权限。 ..它怎么会很快失控。 集成允许您以一种简单而整洁的方式进行管理,一切都在一个地方,正如您所看到的,主要是在 Cumul.io UI 中。
您还可以在这里执行更多操作,但我们尚未详细介绍。 例如添加用户特定的自定义主题和 CSS。 我们也没有介绍如何在仪表板中设置参数和过滤器,或者如何在主机应用程序中使用它们,以便拥有多租户设置。 如果您有兴趣,可以在下面找到一些指向这些步骤的有用教程和文档的链接。
来源:https://css-tricks.com/embedded-analytics-made-simple-with-cumul-io-integrations/
- '
- "
- &
- 11
- 7
- 9
- 98
- ACCESS
- 账号管理
- 操作
- 所有类型
- 分析
- API
- 应用
- 应用领域
- 应用领域
- 刊文
- 认证
- 授权
- 位
- 品牌推广
- 建设者
- 商业
- 呼叫
- 更改
- 码
- 相当常见
- 地区
- 公司
- 元件
- 创造
- XNUMX月XNUMX日
- data
- 设计
- 细节
- 开发商
- 开发
- 不和
- 邮箱地址
- 结束
- 面部彩妆
- 字段
- 过滤器
- 姓氏:
- 专注焦点
- 申请
- 功能
- 非常好
- 团队
- 点击此处
- 创新中心
- How To
- HTTPS
- 人类
- 主意
- 输入
- info
- 信息
- 可行的洞见
- 积分
- 集成
- IT
- JavaScript的
- 键
- 清单
- 营销
- 名称
- 整齐
- 消息
- 附加选项
- 附加选项
- 组织
- 其他名称
- 业主
- 平台
- 生成
- 本人简介
- 项目
- 项目
- 财产
- 响应
- REST的
- 回报
- SaaS的
- 销售
- 感
- 集
- 设置
- 简易
- So
- 解决
- 赞助商
- 世界
- 主题
- 次
- 象征
- 令牌
- 教程
- ui
- us
- 用户
- 查看
- 愿景
- WHO
- 中
- 话
- 工作
- 合作
- 世界