この記事では、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回のみ初期化が可能で、それ以降の初期化の試行は無視されます。
前提条件：開発環境をセットアップする
Microsoft Power Appカスタムコンポーネントの作成に必要なソフトウェアをダウンロードし、インストールします。必要なソフトウェアは、オペレーティングシステムやITポリシーによって異なる場合があります。開発環境がPower Appカスタムコンポーネントを作成するように既に設定されている場合は、この記事のステップ1：新しいコンポーネントを作成するに進んでください。
- 以下のいずれかのVisual Studio Code（VSCode）。［パスに追加（Add to PATH）］が選択されていることを確認します。
- node.js（LTSバージョン）。
- Microsoft Power Platform CLI。Visual Studio Code用Power Platform ToolsまたはWindows用Power Platform CLIのいずれかを使用します。
- .Net Buildツールは、以下のいずれかをインストールします。
ステップ1. 新しいコンポーネントを作成する
Power Appsキャンバスアプリのインストールの場合、PendoインストールスクリプトはPower Apps Component Framework（PCF）のカスタムコードコンポーネント内に存在する必要があります。このステップでは、コンポーネントを配置する場所を作成してから、コンポーネント自体を作成します。新しいコードコンポーネントのディレクトリを作成し、そのディレクトリに移動します。
mkdir <your_repo_name>
cd <your_repo_name>
プロジェクトディレクトリ内に、新しいコンポーネントプロジェクトを作成します。
pac pcf init --namespace <your_component_namespace> --name <your_component_name> --template field --run npm-install
ステップ2. Pendoインストールスクリプトをコードコンポーネントに追加する
このステップで作成したテンプレートコンポーネントは、Pendoを追加する際に編集が必要です。インストールスクリプトで定義された訪問者とアカウントのメタデータは、インストールスクリプトに渡されるコンテキストオブジェクトを介して渡す必要があります。以下はその例です。
visitorId: context.userSettings.userIdaccountId: context.organizationSettings.organizationId
Pendoインストールスクリプトをコンポーネントに追加するには、以下のように変更します。
- 新しいファイル
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>");
} - 関数を
index.tsファイルにインポートし、以下のコンテキストを渡してinit関数内で呼び出します。例については、 GitHubスニペットのリポジトリを参照してください。カスタムコードはテクニカルサポートチームの責任範囲外であるため、この記事またはGitHubリポジトリにあるコードスニペットの使用に関する保証、SLA、またはサポートはありません。
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);
}
... - 以下のように
tsconfig.jsonファイルを修正して、プロジェクト内のJavaScriptファイルを許可します。
{
"extends": "./node_modules/pcf-scripts/tsconfig_base.json",
"compilerOptions": {
"typeRoots": ["node_modules/@types"],
"allowJs": true
}
}
ステップ3. コンポーネントをテストする
npm startを使用して、テスト環境でコンポーネントをローカルに読み込みます。コンポーネントがPendo上で実行されていることを検証するには、ブラウザコンソールを開いてpendo.validateInstall()を実行します。正常に設定されている場合、以下のように表示されます。
ユーザー情報はテスト環境では使用できないため、プレースホルダー値が必要です。
ステップ4. コンポーネントをパッケージ化してデプロイする
以下のコマンドを実行して、コンポーネントをデプロイメント用にパッケージ化します。
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_publisher_prefix>_<your_publisher_name>.<your_solution_name>という命名構造があります。
次に、Microsoftの手順「キャンバスアプリにコンポーネントを追加する」に従って、新しいコードコンポーネントをキャンバスアプリに追加します。キャンバスアプリケーションを保存して公開した後、Pendoはアプリ上で実行されます。
ステップ5. デプロイを確認する
ブラウザコンソールを開き、キャンバスアプリに関連するiframeに移動して、pendo.validateInstall()を実行します。正常に設定されている場合は、Microsoftアプリケーションコンテキストに訪問者IDとアカウントIDが表示されます。
Power Appsキャンバスアプリ内でビジュアルデザインスタジオを使用
ビジュアルデザインスタジオ（Visual Design Studio）の起動方法は、キャンバスPower App内と標準のウェブアプリケーション内では異なります。 Pendoをインストールしたキャンバスアプリケーションでビジュアルデザインスタジオを開くには、ブラウザのコンソールを使って次のコマンドを実行します：
pendo.designerv2.launchInAppDesigner()
このコードは、アプリケーションに埋め込まれたカスタムコードコンポーネントから実行することも、カスタムコードブロックを使ってPendoガイドから実行することも可能です。
Power Appsキャンバスアプリ内のページのタグ付け
ビジュアルデザインスタジオを起動すると、ページにタグを付けることができます。多くのシングルページアプリケーションと同様に、キャンバスアプリケーションは同じURLで異なるページをレンダリングするため、人間が判読できるURLがなく、URLによる標準のページのタグ付けは機能しません。
代わりに、次のいずれかを実行できます。
- Pendoの［アプリケーションの設定（Application Settings）］の［ページタイトルの収集（Collect Page titles）］機能を使用して、URLにページタイトルの値を追加する。
- PendoロケーションAPIを使用してページを定義する。
Power Appsキャンバスアプリ内のフィーチャーのタグ付け
ビジュアルデザインスタジオからフィーチャーにタグを付けることもできます。
Power Appsキャンバスアプリでは、フィーチャールールはcontainsルールに大きく依存しており、壊れやすい可能性があります。［ターゲットページ（Page Location）］を使用して、フィーチャーのタグ付けルールを特定のページに分離できます。これを行うには、Power Appsキャンバスアプリ内のページのタグ付けで説明されているように、最初にページにタグを付けます。内部テキスト収集を除外する場合は、allowedTextを使用してcontainsルールの特定のテキスト文字列を許可する必要があります。詳細については、データ収集の防止戦略を参照してください。
Power Appsキャンバスアプリ内でのガイド作成と使用
ガイドはウェブ上では期待どおりに機能しますが、モバイルブラウザの解像度によっては応答性が低下する可能性があります。さまざまなサイズを試してみてください。