Twitter、LinkedIn、Reddit、Discord などの SaaS コミュニティを閲覧すると、その多くに共通のテーマが表示されることがわかります。このテーマには、BI、分析、洞察など、さまざまな名前が付けられます。当然のことですが、私たちはビジネスを行い、データを収集し、成功するか失敗します。私たちはそれらすべてを調査し、私たちが持っているデータをある程度理解して、行動を起こしたいと考えています。このニーズにより、データを調べたい人の作業を少しでも楽にする多くのプロジェクトやツールが生み出されました。しかし、人間はそれを手に入れれば、さらに多くを求めます。そして、BI と分析の世界では、「さらに多くのこと」は、埋め込み、ブランディング、カスタマイズされたスタイルやアクセスなどの形で実現されることがよくあります。これは、開発者にとってより多くの作業と、より多くの時間を費やすことを意味します。したがって、当然のことながら、すべてを手に入れることができる BI ツールの必要性が生じています。
これらのダッシュボードの構築者および保守者として直面する可能性のある課題のリストを作成してみましょう。
- エンドユーザーまたは閲覧者が独自のアプリケーションまたはプラットフォーム内からダッシュボードを利用できるようにしたい
- さまざまなダッシュボード コレクション (つまり「統合」) を管理できるようにしたいと考えています。
- ダッシュボードとデータセットのコレクションに対して特定のユーザー権限を付与できるようにしたい
- ユーザーが自分に関連するデータのみにアクセスできるようにしたい
Cumul.io 私たちが呼ぶツールを提供します インテグレーション これらの課題の解決に役立ちます。この記事では、統合とは何か、および統合の設定方法について説明します。素晴らしいのは、上記のほとんどの点で必要なコードは最小限であり、ほとんどの部分は Cumul.io UI。
いくつかの背景 - 統合
An 統合 Cumul.io の は、一緒に (たとえば、同じアプリケーション内で) 使用することを目的としたダッシュボードのコレクションを定義する構造です。それは私たちが慣れ親しんでいるものでもあります 埋め込みます ダッシュボードをアプリケーションに組み込みます。つまり、ダッシュボードをアプリケーションに埋め込むには、アプリケーションに、ダッシュボードが属する統合へのアクセスを許可します。ダッシュボードを統合に関連付け、統合のエンド ユーザーがこれらのダッシュボードおよび使用するデータセットに対してどのような種類のアクセス権を持つかを管理できます。ダッシュボードは複数の統合の一部である場合がありますが、統合ごとに異なるアクセス権を持つ場合があります。埋め込みに関しては、スタックの外観に関係なく、作業をシンプルにするために利用できる SDK が多数あります。 😊
Cumul.io アカウントを取得し、Cumul.io の組織の「所有者」であれば、[統合] タブからすべての統合を管理および保守できるようになります。 Cumul.io アカウントの例を見てみましょう。以下に、1 人の Cumul.io ユーザーが作成した可能性のあるダッシュボードを示します。
これらはこのユーザーが作成した可能性のあるすべてのダッシュボードですが、すべてのダッシュボードが同じエンドユーザー、さらに言えばアプリケーションを対象としているわけではない可能性があります。したがって、この Cumul.io アカウントの所有者は、統合 (またはそれ以上!) を作成して維持することになります 💪 それが彼らにとってどのようなものになるかを見てみましょう:
したがって、この Cumul.io アカウントの所有者は 2 つの別々のアプリケーションを管理しているようです。
次に、統合を作成し、そのダッシュボードをアプリケーションに埋め込むプロセスがどのようなものになるかを見てみましょう。良いニュースは、前述したように、実行する必要がある手順の多くは Cumul.io UI 内で実行できることです。
免責事項: この記事では、統合の部分のみに焦点を当てます。したがって、ダッシュボードの作成とデザインに関する作業はすべてスキップし、あらかじめ作成された架空のダッシュボードのセットから始めます。
私たちがやること:
統合の作成
簡単にするために、ここでは統合を 1 つだけ作成しましょう。会社のために保守している分析プラットフォームがあると想像してみましょう。エンドユーザーに提供したいダッシュボードは、マーケティング ダッシュボード、セールス ダッシュボード、リード ダッシュボードの 3 つです。
このアカウントが作成した、またはアクセスできるすべてのダッシュボードのうち、この特定のプロジェクトでは次のダッシュボードのみを使用したいとします。
新統合
統合を作成するには、[統合] タブに移動し、[新しい統合] を選択します。表示されるダイアログから、次のステップがどのようになるかがすでにわかります。
ダッシュボードの選択
次に、この統合にどのダッシュボードを含めるかを選択できます。統合に名前を付けることもできます。ここでは、適切に「非常に重要な統合」とすることにしました。
選択を確認すると、各ダッシュボードにスラッグを定義するオプションが表示されます (強く推奨)。これらは、後でダッシュボードをアプリケーションに埋め込むときに使用できます。後で、スラッグを使用すると、フロントエンド コードでダッシュボードを参照しやすくなり、必要に応じてダッシュボードを置き換えることも簡単になることがわかります (フロントエンド コードでダッシュボード ID を気にする必要がないため)。
アクセス権
次に、ダッシュボードが使用するデータセットに対する統合のアクセス権を設定できるようになります。ここでは「閲覧可能」に設定します。アクセス権とそれに伴う内容の詳細については、次のサイトをご覧ください。 データセットを統合に関連付ける:
フィルターとパラメーター (およびマルチテナント アクセス)
補足: マルチテナント アクセスを支援するために (この架空の設定では意味がありそうですが)、Cumul.io では、ダッシュボードが使用するデータセットにパラメーターとフィルターを設定できるようにしています。これは、分析プラットフォームにログインする各ユーザーには、ダッシュボード内で個人的にアクセスできるデータのみが表示されることを意味します。このシナリオでは、エンド ユーザーが社内のどの部門で働いているかに基づいてアクセスが行われることが想像できます。 Cumul.io でマルチテナンシーを設定する方法の詳細については、次の記事を参照してください。 「Auth0 を使用した Cumul.io ダッシュボードのマルチテナント」。これはダッシュボードの設計プロセス (ここでは省略します) 内で実行できるため、フィルターの動作を視覚化しやすくなります。ただし、ここでは、統合作成プロセスでこれらのフィルターを設定します。
ここでは、データセットに必要なフィルターを設定します。このシナリオでは、ユーザーの部門に基づいてフィルタリングするときに、 department
パラメータとそれに基づくフィルタ:
そして出来上がり!これらの設定が完了すると、統合が正常に作成されました。次のダイアログでは、統合を組み込むための次のステップについての指示が表示されます。
これで、この新しい統合が [統合] タブに表示されるようになります。ここは、後でダッシュボードを埋め込むために使用される統合 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 を使用してこれをどのように実行したかについての詳細な説明.
このリクエストは、認証 ID とトークンを含む JSON オブジェクトを返します。これらのオブジェクトは、後でクライアント側にダッシュボードを埋め込むためのキーとトークンの組み合わせとして使用されます。
ここにオプションで追加できるもう 1 つの非常に優れたものは、CSS プロパティです。これにより、ユーザー (またはユーザー グループ) ごとにカスタムのルック アンド フィールを定義できるようになります。同じアプリケーションの場合、アンジェリーナとブラッドのマーケティング ダッシュボードは次のようになります。
ステップ 2: 埋め込む
そこで少し先に進みました。エンド ユーザー向けに SSO トークンを作成しましたが、まだ実際にダッシュボードをアプリケーションに埋め込んでいません。それを見てみましょう。まず、以下をインストールしてインポートする必要があります。 Webコンポーネント.
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 を指定することも、統合セットアップで定義したダッシュボード スラッグを指定することもできます (これが、これを強くお勧めする理由です。この方法で行うと、はるかに読みやすくなります)。ダッシュボードを埋め込む方法の詳細については、こちらもご覧ください。 開発者のドキュメント.
このステップを実行する優れた方法は、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";
}
前の手順で、この統合の一部であるダッシュボードのスラッグを定義する方法を選択したことに注目してください。これは、ダッシュボード ID を検索して追加する手間を省くことができることを意味します。 dashboardId
私のパラメータの1つとして dashboardElement
。代わりに、ナメクジの 1 つだけを提供できます marketing
, sales
or leads
そして終わりました!もちろん、どのダッシュボードをいつどこに埋め込むかを決定するには、アプリケーションに何らかの選択プロセスを設定する必要があります。
以上です、皆さん! Cumul.io での統合の作成に成功し、数行のコードでそのダッシュボードをアプリケーションに埋め込むことができました 🎉 次に、複数のアプリケーションを同時に保守する必要があるシナリオを想像してください。同じ会社でも別の会社でも。どのようなシナリオであっても、多数のダッシュボードがあり、各ダッシュボードが異なる場所に移動する必要があり、各ダッシュボードがどこにいるかに応じて異なるアクセス権を持たなければならない場合はどうなるか、想像できると思います。 .. なんとすぐに手に負えなくなるのです。統合により、これをすべて 1 か所でシンプルかつきちんとした方法で管理できるようになり、ご覧のとおり、主に Cumul.io UI 内から管理できます。
ここでできることは他にもたくさんありますが、ここでは詳しく説明しませんでした。ユーザー固有のカスタム テーマや CSS の追加など。また、ダッシュボードでパラメーターとフィルターを設定する方法や、マルチテナント設定を実現するためにホスト アプリケーション内からパラメーターとフィルターを使用する方法についても説明しませんでした。興味があれば、これらの手順に関する役立つチュートリアルとドキュメントへのリンクを以下に示します。
出典: https://css-tricks.com/embedded-analytics-made-simple-with-cumul-io-integrations/
- '
- "
- &
- 11
- 7
- 9
- 98
- アクセス
- Action
- すべて
- 分析論
- API
- アプリ
- 申し込み
- 記事
- 認証
- 承認
- ビット
- ブランド設定
- ビルダー
- ビジネス
- コール
- 変化する
- コード
- コマンドと
- コミュニティ
- 会社
- コンポーネント
- 作成
- ダッシュボード
- データ
- 設計
- 詳細
- Developer
- 開発者
- 不和
- 終了
- 顔
- フィールズ
- フィルター
- 名
- フォーカス
- フォーム
- function
- 良い
- グループ
- こちら
- 認定条件
- How To
- HTTPS
- 人間
- アイデア
- インポート
- info
- 情報
- 洞察
- 統合
- 統合
- IT
- JavaScriptを
- キー
- リスト
- マーケティング
- 名
- すっきり
- ニュース
- オプション
- オプション
- 組織
- その他
- 所有者
- プラットフォーム
- 生産された
- プロフィール
- プロジェクト
- プロジェクト(実績作品)
- 財産
- 応答
- REST
- 収益
- SaaSの
- セールス
- センス
- セッションに
- 設定
- 簡単な拡張で
- So
- 解決する
- スポンサー
- 世界
- テーマ
- 時間
- トークン
- トークン
- チュートリアル
- さえずり
- ui
- us
- users
- 詳しく見る
- ビジョン
- 誰
- 以内
- 言葉
- 仕事
- 作品
- 世界