この記事では、Power Appsの開発者がMicrosoft Power Appsフレームワークで開発したモデル駆動型Power AppsにPendoをインストールする方法を説明します。
Microsoft Power Appsはローコードでアプリケーションを開発できるフレームワークです。Microsoftユーザーは、これを活用して社内のビジネスアプリケーションを開発し、カスタマイズすることができます。Microsoft Power Appsには、モデル駆動型アプリケーションとキャンバスアプリケーションという2つの大きなカテゴリーがあります。この記事では、モデル駆動型アプリケーションに焦点を当てます。キャンバスアプリケーションについては、PendoをキャンバスPower Appsにインストールするを参照してください。
モデル駆動型アプリは、ウェブ環境向けに最適化されています。モバイルアプリにインストールする場合は、多数の既知の制限を考慮する必要があります。
Dynamics 365パッケージをインストールする
モデル駆動型アプリケーションは、Microsoft Dynamics 365 Customer Experience Framework（MS D365 CE）で実行されます。MS D365 CE（旧：Dynamics 365 CRM）は、Microsoft Dynamics 365 Sales、Marketing、Customer Service、Field Service、およびProject Operationsのさまざまな機能を1つのプラットフォームにまとめた統合スイートです。CEアプリケーションの例としては、CRM、Customer Service Hub、Field Serviceなどがあります。
サードパーティの従業員向けウェブアプリケーションの場合は、Pendo Launcherを使用してPendoをデプロイすることをお勧めします。Microsoft Dynamics 365 CEのモデル駆動型Power Apps上にPendoをネイティブにインストールする手順は、以下のとおりです。
- Dynamics 365で［設定（Settings）］>［ソリューション（Solutions）］に移動します。
- ［インポート（Import）］を選択し、インポートするソリューションを含むファイルを選択します。
- ［次へ（Next）］を選択します。
- ［Pendo］パッケージを開き、
callPendoAPIウェブリソースを編集します。 - コンテンツタイプの横にある［テキストエディタ（Text Editor）］を選択します。
- 以下のように、Pendo APIキーをコードにコピーして貼り付けます。
function callpendoapi() {
'use strict';
if (window.top.pendo) return;
console.log('Invoking Pendo Agent');
let agentUrl = "https://cdn.pendo.io/agent/static/<YOUR PENDO API KEY HERE>/pendo.js"
pendo(agentUrl);
return false;
}
function pendo(agentUrl) {
'use strict';
(function (p, e, n, d, o) {
var v, w, x, y, z; o = p[d] = p[d] || {}; o._q = [];
v = ['initialize', 'identify', 'updateOptions', 'pageLoad']; 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 = agentUrl;
z = e.getElementsByTagName(n)[0]; z.parentNode.insertBefore(y, z);
})(window.top, window.top.document, 'script', 'pendo');
window.top.pendo.initialize({
visitor: {
id: //Globally Unique Visitor ID
// email: // Recommended if using Pendo Feedback, or NPS Email
// full_name: // Recommended if using Pendo Feedback
// role: // Optional
// You can add any additional visitor level key-values here,
// as long as it's not one of the above reserved names.
},
account: {
id: //Name Of Organization Or Department Visitor Belongs To
// is_paying: // Recommended if using Pendo Feedback
// monthly_value:// Recommended if using Pendo Feedback
// planLevel: // Optional
// planPrice: // Optional
// creationDate: // Optional
// You can add any additional account level key-values here,
// as long as it's not one of the above reserved names.
}
});
} - 必要に応じて、Dynamics 365アプリケーションに基づいてPendoを選択的に呼び出します。
- メタデータを設定します。
- メタデータフィールドを保存し、Pendoソリューションを公開します。
- Pendoのインストールを確認します。
オプション：Dynamics 365アプリケーションに基づいてPendoを選択的に呼び出す
すべてのMS D365 CEアプリケーションではなく、MS D365 CEアプリケーションの一部でPendoを選択的に呼び出したい場合は、以下のサンプルコードをベースにcallPendoAPI関数を置き換えてください。
function callpendoapi() {
'use strict';
if (window.top.pendo) return;
var globalContext = Xrm.Utility.getGlobalContext();
globalContext.getCurrentAppProperties().then(
function success(app) {
console.log(app);
// select which app will have Pendo running
if (app.uniqueName === '<YOUR UNIQUE MSD365 APP NAME HERE>'){
// Load Pendo if unique name matches
console.log('Invoking Pendo Agent on ' + app.uniqueName);
let agentUrl = "https://cdn.pendo.io/agent/static/<YOUR PENDO API KEY HERE>/pendo.js";
pendo(agentUrl);
}
else if (app.appId === '<YOUR UNIQUE MSD365 APP ID HERE>'){
// Load Pendo if unique ID matches
console.log('Invoking Pendo Agent on ' + app.appId);
let agentUrl = "https://cdn.pendo.io/agent/static/<YOUR PENDO API KEY HERE>/pendo.js";
pendo(agentUrl);
}
}
MS D365 CEアプリの［一意のID（Unique ID）］と［一意の名前（Unique Name）］を確認する手順は、以下のとおりです。
- Dynamics 365アカウントの上部にあるアプリ名を選択すると、すべてのアプリが表示されます。
- アプリのタイルで省略記号（...）を選択し、［アプリデザイナーで開く（Open In App Designer）］を選択します。
- ［プロパティ（Properties）］を選択して［一意の名前］を表示します。
- URLから［一意のID］を確認します。
appid=を探し、=と&間の文字列をコピーして貼り付けます。
MS D365 CEアプリの［一意のID］と［一意の名前］は、以下のコンソールコマンドでも確認できます。
Xrm.Utility.getGlobalContext().getCurrentAppProperties()
このコマンドは、以下のような内容を返します。
メタデータを設定する
pendo.initialize()関数を編集して、訪問者IDとアカウントIDを含めることができます。訪問者IDは必須フィールドであり、全体を通して一意である必要があります。アカウントIDの指定は強く推奨されており、組織名や部署名を使用できます。詳細については、Pendoのインストールを計画するを参照してください。
訪問者メタデータの例
visitor: {
id: Xrm.Utility.getGlobalContext().userSettings.userId,
},
ガイダンスについては、Microsoftのドキュメント「getGlobalContext.userSettings（クライアントAPI参照）」を参照してください。
アカウントメタデータの例
account: {
id: Xrm.Utility.getGlobalContext().organizationSettings.organizationId,
},
ガイダンスについては、Microsoftのドキュメント「getGlobalContext.organizationSettings（クライアントAPI参照）」を参照してください。
Pendoのインストールを確認する
ブラウザコンソールを開き、キャンバスアプリに関連するiframeに移動して、pendo.validateInstall()を実行します。正常に設定されている場合は、Microsoftアプリケーションコンテキストに訪問者IDとアカウントIDが表示されます。
ウェブのモデル駆動型アプリに関する考慮事項
フィーチャーのタグ付けのために作成したルールは、Containsセレクターに大きく依存する場合があり、壊れやすい可能性があります。 内部テキスト収集を除外する場合は、allowedTextを使用してContainsルールの特定のテキスト文字列をホワイトリストに登録する必要があります。Containsルールを含む、CSSセレクターの詳細については、フィーチャーのタグ付けでCSSセレクターを使用するを参照してください。
モバイルのモデル駆動型アプリに関する考慮事項
MS D365 CEアプリケーションには、対応するモバイルアプリケーション（「Field Service（Dynamics 365）」モバイルアプリや「Power Apps」モバイルアプリなど）を介してモバイルデバイスからアクセスできます。Microsoftは、モバイルではCEアプリケーションをウェブとは異なる方法でレンダリングしています。たとえば、アプリケーションの一部は、ネイティブのモバイルコンポーネントやWebviewとして、もしくはモバイルフレンドリーな方法（複数のナビゲーション要素の使用など）を用いて再レンダリングされる場合があります。モバイルでの再レンダリングは、Pendoのアナリティクスとガイドに以下のような影響を与えます。
アナリティクスへの影響
- イベントの収集が制限されます。
- Pendo JavaScriptエージェントは、ネイティブモバイルコンポーネントとして再レンダリングされるウェブコンポーネントからイベントを収集できません。
- モバイルに対応するために再レンダリングされたウェブコンポーネントには新しいセレクターが含まれる場合があり、再タグ付けが必要です。
- Pendoは引き続きクリック数をイベントの生データとして収集しますが、セレクターがデスクトップウェブアプリケーションとは異なるため、データをフィーチャーに紐付けることはできません。
- Pendoのビジュアルデザインスタジオ（Visual Design Studio）によるタグ付けを起動できません。
ガイドへの影響
- Pendoのビジュアルデザインスタジオによるガイド作成を起動できません。モバイルUI上でガイドを作成することはできませんが、ウェブ上では可能です。
- 要素にガイドを紐付けたり、「要素のクリックで次に進む」などの特定の行動にガイドを紐づけたりすることはできません。