Share via


分析情報からクイック アクション ショーケースへ移動

分析 情報からクイック アクションへの移動 Power BI 埋め込みショーケースは、リアルタイム分析に基づいて意味のある顧客キャンペーンを作成するアプリを示しています。 ユーザーは、Power BI 埋め込みレポート データをスライスしてフィルター処理して分析情報を検出し、レポート内からすぐに顧客割引またはクーポン キャンペーンを構成して開始できます。

このショーケースでは、アプリケーションの使用方法を示します。

  • カスタム コマンドとメニュー 項目をレポートに追加するための拡張メニュー コマンド API。
  • レポート イベントとアプリケーション コードの間で通信するためのイベント処理
  • レポート ビジュアルの基になるデータをエクスポートする exportData API。

分析情報からクイック アクション ショーケースエクスペリエンスに移動する

架空の販売会社である Contoso は、 Go from insights を使用してクイック アクションショーケース を使用して分析情報を生成し、Power BI 埋め込みレポート内から直接キャンペーンを開始します。 埋め込みレポートは、顧客の購入を顧客の名前と地域、購入カテゴリ、前回の購入から数日、および費やした金額で示します。

レポートには、テーブル、縦棒グラフ、ドーナツ グラフの視覚化、およびいくつかのスライス、フィルター処理、並べ替えのメカニズムがあります。 このレポートでは、Contoso は過去 30 日間の 500 ドルから 799 ドルのハイエンド購入に最も関心を持っているので、レポートはそれらのスライサー範囲が適用されて読み込まれます。

Insights to actions ショーケースを示すスクリーンショット。

分析情報を生成する

売上結果に関する分析情報を得るために、レポート ユーザーは、ドロップダウン リスト、視覚化、およびスライサーで特定の値と範囲を選択することで、データをさらにフィルター処理またはスライスできます。 たとえば、Professional Services のセールス マネージャーは複数の異なるリージョンを選択し、Professional Services カテゴリの総支出は全体で最も高いものの、MEA、英国、米国 リージョンで最も低く、LATAM またはカナダでは購入しなかったことに気付きます。

ドーナツ グラフで選択米国リージョンを示すスクリーンショット。最新の購入カテゴリ別の合計支出と比較した米国の支出データが強調表示されています。

キャンペーンを作成する

セールス マネージャーは、Professional Services の販売をカナダ、LATAM、MEA、英国、米国のお客様に販売を促進することにしました。 現在の顧客リストを使用していつでもキャンペーンを開始するには、Sales Manager で [キャンペーンの作成] ボタンを選択するか、顧客テーブルビジュアルの [その他のオプション] (...) メニューから [キャンペーンの開始] を選択します。

[キャンペーンの作成] ボタンを示すスクリーンショット。

表のビジュアルの [その他のオプション] メニューの [キャンペーンの開始] オプションを示すスクリーンショット。

対象顧客リストを作成する

レポート ユーザーは、レポート ドロップダウン リスト、視覚化、スライサーを使用して、対象の受信者に顧客リストを絞り込むことができます。 この場合、Sales Manager はリージョン ドロップダウン リストからカナダLATAMMEAUK米国を選択し、顧客テーブルにそれらのリージョンからの顧客のみが一覧表示されるようになりました。 顧客リストの準備ができたら、Sales Manager によって [ キャンペーンの作成] が選択されます。

複数のリージョンが選択された [リージョン] ドロップダウンと、それらのリージョンの顧客のみを示す顧客リストを示すスクリーンショット。

割引キャンペーンを作成する

[キャンペーン配布リスト] ポップアップが開き、対象の受信者の名前と連絡先情報が一覧表示され、[割引の送信] または [クーポンの送信] を選択できます。 Sales Manager が [ 割引の送信] を選択します。

キャンペーン配布連絡先リストと [割引の送信] ボタンと [クーポンの送信] ボタンを含むダイアログ ボックスを示すスクリーンショット。

[ 割引を配布リストに送信 ] ダイアログ ボックスで、Sales Manager は、対象の顧客に Contoso プロフェッショナル サービスの 10% 割引を提供するメッセージを書き込み、[ 送信] を選択します。

メッセージ テキスト ボックスと [送信] ボタンを示すスクリーンショット。

アプリは、割引オファーの電子メールを配布リストに送信し、 送信済 み通知を表示します。

販売マネージャーは、配布リスト画面で [クーポンの送信] を選択して、顧客に クーポンを送信 することもできます。

分析情報からクイック アクション ショーケース コードに移動する

ショーケースを実装するためのコードは、 PowerBI-Embedded-Showcases GitHub リポジトリにあります。

  • アプリケーション HTML コード は、埋め込みレポート コンテナーと要素、ダイアログ ボックス、テキスト フィールド、ボタンをビルドします。

  • レポート JavaScript コードは、レポートを埋め込み、すべての視覚化操作、データエクスポート、ボタン処理関数を定義します。

キャンペーン コマンドをレポートに追加する

レポートembedConfigurationでは、拡張メニュー コマンド API を使用して、テーブル ビジュアルの [その他のオプション] メニューの上部に表示されるコマンドをレポートに追加campaignします。

let config = {
...
    settings: {
        ...
        extensions: [
            {
                command: {
                    name: "campaign",
                    title: "Start campaign",
                    icon: base64Icon,
                    selector: {
                        $schema: "http://powerbi.com/product/schema#visualSelector",
                        visualName: tableVisualGuid
                    },
                    extend: {
                        visualOptionsMenu: {
                            title: "Start campaign",
                            menuLocation: models.MenuLocation.Top,
                        }
                    }
                }
            },
        ...
    }
}

[キャンペーンの開始] コマンドを処理する

次のコードは、コマンドの commandTriggered イベントを campaign 処理します。 このコードは 、スタート キャンペーン メニュー項目選択イベントをリッスンし、テーブル ビジュアルから現在フィルター処理された顧客リスト データを送信します。

// Adding onClick listener for the custom menu in the table visual in the report
reportShowcaseState.report.on("commandTriggered", async function (event) {
    if (event.detail.command === "campaign") {

        // Populate data according to the current filters on the table visual
        const result = await tableVisual.exportData(models.ExportDataType.Underlying);
        handleExportData(result);
        onStartCampaignClicked();
    }
});

[キャンペーンの作成] ボタンのクリックを処理する

次のコードは、[ キャンペーンの作成 ] ボタンのクリック イベントを処理します。 このコードは、キャンペーンの 作成 ボタン選択イベントをリッスンし、テーブル ビジュアルから現在フィルター処理された顧客リスト データを送信します。

// Adding onClick listener for the button in the report
reportShowcaseState.report.on("buttonClicked", async function () {

    // Populate data according to the current filters on the table visual
    const result = await tableVisual.exportData(models.ExportDataType.Underlying);
    handleExportData(result);
    onStartCampaignClicked();
});

次のステップ