PendoをキャンバスPower Appsにインストールする

最終更新日:

この記事では、Power Appsの開発者がMicrosoft Power Appsフレームワークで開発したキャンバスPower AppsにPendoをインストールする方法を説明します。

Microsoft Power Appsはローコードでアプリケーションを開発できるフレームワークです。Microsoftユーザーは、これを活用して社内のビジネスアプリケーションを開発し、カスタマイズすることができます。Microsoft Power Appsには、モデル駆動型アプリケーションとキャンバスアプリケーションという2つの大きなカテゴリーがあります。このガイドでは、キャンバスアプリケーションに焦点を当てます。モデル駆動型アプリケーションについては、Pendoをモデル駆動型Power Appsにインストールするを参照してください。

インストールの概要

キャンバスアプリケーションはMicrosoft Dynamics 365 CE Frameworkの外部で実行されるため、管理ソリューションではキャンバスアプリケーションにPendoをインストールしません。代わりに、Power Apps Component Framework(PCF)で構築したカスタムコードコンポーネントを使用して、各アプリケーションにPendoを追加する必要があります。

コンポーネントの作成に関するMicrosoftのガイダンスについては、最初のコンポーネントを作成するを参照してください。

Pendoコンポーネントは、ユーザーが最初にアプリケーションにアクセスしたときにPendoが読み込まれるように、キャンバスアプリケーションのランディングページに配置してください。既定のランディングページがない場合は、ランディングページとなり得るすべてのページにコンポーネントを追加し、Pendoが常に読み込まれるようにします。Pendoコンポーネントが複数のページにインストールされている場合、Pendoインストールスクリプトがユーザーセッションあたり1回のみ実行されるように、条件ロジックを追加する必要があります。Pendoはページの読み込みあたり1回のみ初期化が可能で、それ以降の初期化の試行は無視されます。

ステップ1. 開発環境をセットアップする

Microsoft Power Appカスタムコンポーネントの作成に必要なソフトウェアをダウンロードし、インストールします(ステップ2)。

ステップ2. 新しいコンポーネントを作成する

新しいコードコンポーネントのディレクトリを作成し、そのディレクトリに移動します。

mkdir <your_repo_name>
cd <your_repo_name>

プロジェクトディレクトリ内に、新しいコンポーネントプロジェクトを作成します。

pac pcf init --namespace <your_component_namespace> --name <your_component_name> --template field --run npm-install

ステップ3. Pendoインストールスクリプトをコードコンポーネントに追加する

ステップ2で作成したテンプレートコンポーネントは、Pendoを追加する際に編集が必要です。Pendoインストールスクリプトをコンポーネントに追加するには、以下のように変更します。

  1. 新しいファイルinitPendo.jsを作成し、以下を追加します。
    export function initPendo(context) {
      (function (apiKey) {
        (function (p, e, n, d, o) {
          var v, w, x, y, z;
          o = p[d] = p[d] || {};
          o._q = o._q || [];
          v = ["initialize", "identify", "updateOptions", "pageLoad", "track"];
          for (w = 0, x = v.length; w < x; ++w)
          (function (m) {
            o[m] =
              o[m] ||
              function () {
                o._q[m === v[0] ? "unshift" : "push"](
                  [m].concat([].slice.call(arguments, 0))
                );
              };
            })(v[w]);
          y = e.createElement(n);
          y.async = !0;
          y.src = "https://cdn.pendo.io/agent/static/" + apiKey + "/pendo.js";
          z = e.getElementsByTagName(n)[0];
          z.parentNode.insertBefore(y, z);
        })(window, document, "script", "pendo");

        window.pendo.initialize({
          visitor: {
            id: context?.userSettings?.userId || "VISITOR-UNIQUE-ID",
          },
          account: {
            id: context?.orgSettings?.uniqueName || "ACCOUNT-UNIQUE-ID",
          },
        });
      })("<YOUR_PENDO_API_KEY>");
    }
  2. 関数をindex.tsファイルにインポートし、以下のコンテキストを渡してinit関数内で呼び出します。
    import {IInputs, IOutputs} from "./generated/ManifestTypes";
    import {initPendo} from './initPendo'

    export class PendoOnMSPCF implements ComponentFramework.StandardControl<IInputs, IOutputs> {

      /**
      * Empty constructor.
      */
      constructor()
      {

      }

      /**
      * Used to initialize the control instance. Controls can kick off remote server calls and other initialization actions here.
      * Data-set values are not initialized here, use updateView.
      * @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to property names defined in the manifest, as well as utility functions.
      * @param notifyOutputChanged A callback method to alert the framework that the control has new outputs ready to be retrieved asynchronously.
      * @param state A piece of data that persists in one session for a single user. Can be set at any point in a controls life cycle by calling 'setControlState' in the Mode interface.
      * @param container If a control is marked control-type='standard', it will receive an empty div element within which it can render its content.
      */
      public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container:HTMLDivElement): void
      {
        // Add control initialization code
        initPendo(context);
      }
    ...
  3. 以下のようにtsconfig.jsonファイルを修正して、プロジェクト内のJavaScriptファイルを許可します。
    {
        "extends": "./node_modules/pcf-scripts/tsconfig_base.json",
        "compilerOptions": {
        "typeRoots": ["node_modules/@types"],
        "allowJs": true
      }
    }

ステップ4. コンポーネントをテストする

npm startを使用して、テスト環境でコンポーネントをローカルに読み込みます。コンポーネントがPendo上で実行されていることを検証するには、ブラウザコンソールを開いてpendo.validateInstall()を実行します。正常に設定されている場合、以下のように表示されます。

Validation.png

ユーザー情報はテスト環境では使用できないため、プレースホルダー値が必要です。

ステップ5. コンポーネントをパッケージ化してデプロイする

以下のコマンドを実行して、コンポーネントをデプロイメント用にパッケージ化します。

mkdir <your_solution_name>
cd <your_solution_name>>
pac solution init --publisher-name <your_publisher_name> --publisher-prefix <your_publisher_prefix>
pac solution add-reference --path ..      
dotnet build

生成されたソリューションのzipファイルは、<your_solution_name>/bin/debugフォルダに格納されます。新しく作成したソリューションをインポートするには、Microsoftの手順「ソリューションのインポート」に従います。ソリューションには、<your_piblisher_prefix>_<your_publisher_name>.<your_solution_name>という命名構造があります。

次に、Microsoftの手順「キャンバスアプリにコンポーネントを追加する」に従って、新しいコードコンポーネントをキャンバスアプリに追加します。キャンバスアプリケーションを保存して公開した後、Pendoはアプリ上で実行されます。

ステップ6. デプロイを確認する

ブラウザコンソールを開き、キャンバスアプリに関連するiframeに移動して、pendo.validateInstall()を実行します。正常に設定されている場合は、Microsoftアプリケーションコンテキストに訪問者IDとアカウントIDが表示されます。

Screenshot 2023-08-09 at 2.41.22 PM.png

キャンバスPower Apps内でのビジュアルデザインスタジオの起動

ビジュアルデザインスタジオ(Visual Design Studio)の起動方法は、キャンバスPower App内と標準のウェブアプリケーション内では異なります。 Pendoをインストールしたキャンバスアプリケーションでビジュアルデザインスタジオを開くには、ブラウザのコンソールを使って次のコマンドを実行します:

pendo.designerv2.launchInAppDesigner()

このコードは、アプリケーションに埋め込まれたカスタムコードコンポーネントから実行することも、カスタムコードブロックを使ってPendoガイドから実行することも可能です。

この記事は役に立ちましたか?
1人中1人がこの記事が役に立ったと言っています