從深入解析到快速動作展示

發行項
02/19/2024

從深入解析到快速動作的 Power BI 內嵌展示示範應用程式，可根據即時分析來建立有意義的客戶行銷活動。使用者可以配量和篩選 Power BI 內嵌報表資料以探索見解，然後從報表內立即設定並啟動客戶折扣或優待券活動。

此展示示範應用程式如何使用：

擴充功能表命令API，可將自訂命令和功能表項目新增至報表。
事件處理，以在報表事件與應用程式程式碼之間進行通訊。
exportData API，用來匯出報表視覺效果的基礎資料。

從深入解析到快速動作展示體驗

Contoso 是虛構的銷售公司，使用 Go from insights 快速展示動作來產生見解，並直接從 Power BI 內嵌報表啟動行銷活動。內嵌報表會依客戶名稱和區域、購買類別、上次購買後的天數，以及花費的金額來呈現客戶的購買。

報表具有資料表、直條圖和環圈圖視覺效果，以及數個切割、篩選和排序機制。針對此報告，Contoso 對過去 30 天的更高階購買專案最感興趣，$500-$799 美元，因此報表會隨著套用這些交叉分析篩選器範圍載入。

顯示深入解析動作展示的螢幕擷取畫面。

產生深入解析

若要深入瞭解銷售結果，報表使用者可以選取下拉式清單中的特定值和範圍、視覺效果和交叉分析篩選器，進一步篩選或配量資料。例如，專業服務的銷售經理會選取數個不同的區域，並瞭解雖然專業服務類別整體支出最高，但在 MEA、UK 和美國區域中具有最低支出，但在 LATAM 或加拿大則沒有購買。

顯示環圈圖中所選取美國區域的螢幕擷取畫面，其中醒目提示美國支出資料與最新購買類別橫條圖總支出相較之下的總支出。

建立行銷活動

銷售經理決定將專業服務銷售升階至加拿大、LATAM、MEA、英國和美國客戶。若要使用目前客戶清單隨時啟動行銷活動，銷售經理可以選取 [建立行銷活動] 按鈕，或從客戶資料表視覺效果的 [其他選項] (...) 功能表選取 [開始行銷活動]。

顯示 [建立行銷活動] 按鈕的螢幕擷取畫面。

顯示資料表視覺效果 [更多選項] 功能表中 [開始活動] 選項的螢幕擷取畫面。

建立目標客戶清單

報表使用者可以使用報表下拉式清單、視覺效果和交叉分析篩選器，將客戶清單縮小至目標收件者。在此情況下，銷售經理會從 [區域] 下拉式清單中選取[加拿大]、[LATAM]、[MEA]、[英國] 和[美國]，而 [客戶] 資料表現在只會列出來自這些區域的客戶。當客戶清單就緒時，銷售經理會選取 [ 建立行銷活動]。

顯示 [區域] 下拉式清單的螢幕擷取畫面，其中已選取數個區域，而客戶清單僅顯示來自這些區域的客戶。

建立折扣行銷活動

[ 行銷活動通訊群組清單] 快顯視窗隨即開啟，列出目標收件者的名稱和連絡人資訊，並提供 [ 傳送折扣 ] 或 [ 傳送優待券] 的選項。銷售經理會選取 [傳送折扣]。

顯示活動通訊連絡人清單和 [傳送折扣] 和 [傳送優待券] 按鈕對話方塊的螢幕擷取畫面。

在 [ 將折扣傳送至通訊群組清單 ] 對話方塊中，銷售經理會在 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();
});