Pendoをモデル駆動型Power Appsにインストールする

最終更新日:

この記事では、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をネイティブにインストールする手順は、以下のとおりです。

  1. Dynamics 365で[設定(Settings)]>[ソリューション(Solutions)]に移動します。
  2. [インポート(Import)]を選択し、インポートするソリューションを含むファイルを選択します。
  3. [次へ(Next)]を選択します。
  4. [Pendo]パッケージを開き、callPendoAPIウェブリソースを編集します。
  5. コンテンツタイプの横にある[テキストエディタ(Text Editor)]を選択します。
  6. 以下のように、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.
         }
     });
    }
  7. 必要に応じて、Dynamics 365アプリケーションに基づいてPendoを選択的に呼び出します
  8. メタデータを設定します
  9. メタデータフィールドを保存し、Pendoソリューションを公開します。
  10. 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)]を確認する手順は、以下のとおりです。

  1. Dynamics 365アカウントの上部にあるアプリ名を選択すると、すべてのアプリが表示されます。
  2. アプリのタイルで省略記号(...)を選択し、[アプリデザイナーで開く(Open In App Designer)]を選択します。
  3. [プロパティ(Properties)]を選択して[一意の名前]を表示します。
  4. URLから[一意のID]を確認します。appid=を探し、=&間の文字列をコピーして貼り付けます。

mceclip7.png

MS D365 CEアプリの[一意のID][一意の名前]は、以下のコンソールコマンドでも確認できます。

Xrm.Utility.getGlobalContext().getCurrentAppProperties()

このコマンドは、以下のような内容を返します。

mceclip8.png

メタデータを設定する

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が表示されます。

Screenshot 2023-08-09 at 2.41.22 PM.png

モバイルでのモデル駆動型アプリの既知の制限

MS D365 CEアプリケーションには、対応するモバイルアプリケーション(「Field Service(Dynamics 365)」モバイルアプリや「Power Apps」モバイルアプリなど)を介してモバイルデバイスからアクセスできます。Microsoftは、モバイルではCEアプリケーションをウェブとは異なる方法でレンダリングしています。たとえば、アプリケーションの一部は、ネイティブのモバイルコンポーネントやWebviewとして、もしくはモバイルフレンドリーな方法(複数のナビゲーション要素の使用など)を用いて再レンダリングされる場合があります。モバイルでの再レンダリングは、Pendoのアナリティクスガイドに以下のような影響を与えます。

アナリティクスへの影響

  • イベントの収集が制限されます。
    • Pendo JavaScriptエージェントは、ネイティブモバイルコンポーネントとして再レンダリングされるウェブコンポーネントからイベントを収集できません。
    • モバイルに対応するために再レンダリングされたウェブコンポーネントには新しいセレクターが含まれる場合があり、再タグ付けが必要です。
    • Pendoは引き続きクリック数をイベントの生データとして収集しますが、セレクターがデスクトップウェブアプリケーションとは異なるため、データをフィーチャーに紐付けることはできません。
  • Pendoのビジュアルデザインスタジオ(Visual Design Studio)によるタグ付けを起動できません。
    • ビジュアルデザインスタジオを使用してページやフィーチャーにタグ付けすることはできません。
    • 推奨ページタグ無しURLによるページのタグ付けは可能です。

ガイドへの影響

  • Pendoのビジュアルデザインスタジオによるガイド作成を起動できません。モバイルUI上でガイドを作成することはできませんが、ウェブ上では可能です。
  • 要素にガイドを紐付けたり、「要素のクリックで次に進む」などの特定の行動にガイドを紐づけたりすることはできません。

 

 

 

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