ハイブリッドアプリにPendoをインストールする

最終更新日:

Pendoは、Pendo SDKと連携するハイブリッドアプリの実装をサポートしています。ハイブリッドアプリの例としては、CordovaやIonicなどがあります。ハイブリッドアプリには、アプリ内のウェブページを読み込むためのモバイルコンポーネントとウェブコンポーネント(例:WebViews)の両方が含まれる場合があります。ハイブリッドアプリの詳細については、「ハイブリッドアプリでPendoを使用する」を参照してください。

Pendoは、モバイルSDKを統合して分析情報を収集し、モバイルパーツのガイドを表示し、またWebインストールスニペットを統合して Webパーツに対して同じことを行うことで、Web SDKを通じてハイブリッドアプリをサポートします。ウェブスニペットのインストールの詳細については、インストールスクリプトを使用したPendoの実装に関する開発者ガイドを参照してください。

Pendoサブスクリプションで両方のアナリティクスストリームを表示できますが、2つの異なるAPIキーに分割され、ユーザージャーニーは連続した別々のセッションとして扱われます。

重要:サブスクリプションはウェブとモバイルのアプリケーションで統一されていますが、訪問者ID、アカウントID、およびメタデータのキーと値がインストール全体で同じであることを確認して、ユーザージャーニーの一貫性が損なわれないようにすることが重要です。

CordovaアプリケーションにPendoをインストールする

Cordovaは、ハイブリッドモバイルアプリを構築するためのオープンソースのフレームワークです。そのウェブページは、iOSまたはAndroidデバイス上で動作するローカルウェブサーバーから提供されます。アプリはウェブ内にあり、アプリ内でウェブビューが開きます。

一般的に、Cordovaアプリケーションは、中央のWebアプリケーションを中心に構築されます。CordovaアプリケーションにPendoをインストールする場合、考慮すべき点がいくつかあります。

  • ブラウザへのビルド
  • ページのタグ付け
  • ネイティブデバイス機能の追跡

ブラウザへのビルド

ほとんどのアプリケーションと同様に、PendoはJavaScriptインストールスクリプトを使用してインストールされます。したがって、ビジュアルデザインスタジオ(Visual Design Studio)でページやフィーチャーにタグ付けしたり、アプリ内ガイドを作成したりするには、WebブラウザからCordovaアプリケーションにアクセスする必要があります。

そのためにはCordovaのCLIが提供するブラウザプラットフォームを使用します。

  1. Cordovaアプリケーションにブラウザプラットフォームを追加する:cordova platform add browser
  2. ブラウザプラットフォーム用のWebアプリケーションを構築する: cordova build browser

これにより、Web アプリケーションの静的ビルドが/<path-to-application>/platforms/browser/wwwに作成されます。次に、ガイドを作成したりページとフィーチャーのタグ付けをするPendoユーザーがアクセスできる場所に、このビルドをホストする必要があります。

ページのタグ付け

Cordovaアプリケーションは複数のプラットフォーム向けに構築できるので、ページルールは、対象となるすべてのプラットフォームを考慮する必要があります。たとえば、以下はサンプルのCordovaアプリケーションの推奨ページです。

Cordova_Suggested_Page.png

この例では、2つの推奨ページで両方とも同じページ(index.html)がポイントされています。これは、このアプリケーションが実行されているブラウザとiOSプラットフォームが、同じページを異なるURLで配信しているためです。

このような状況に対応するには、ブラウザプラットフォームページの標準的なタグ付け手順に従った後、プラットフォームURLを手動で追加します。Pendoでタグ付けされたページに移動し、[ルールの追加]を選択します。詳細な説明については、「ページのタグ付け」をご覧ください。

以下の例では、//*/index.htmlがブラウザプラットフォームのURLを取得し、//*/*/*/*/*/*/*/*/*/index.htmlがiOSプラットフォームのURLを取得しています。

Cordova_Page_Rules.png

ネイティブデバイス機能の追跡

PendoはCordovaアプリケーションのWebアプリケーション層にインストールされるため、アプリケーションのネイティブ部分ではアクティビティが取得されません。

たとえば、PendoがインストールされたCordovaアプリケーションに、デバイス固有のカメラアプリケーションを起動するボタンが含まれている場合、Pendoはそのボタンのクリック数のみを取得し、カメラアプリケーション内で発生する操作は収集しません。

Cordova_activity_capture_example.png

ネイティブデバイスの機能を可視化する必要がある場合、CordovaのAPIが提供するコールバック関数で、トラックイベントを適宜設定することができます。以下は、写真の取得に失敗した場合のトラックイベントを計測する例です。

// EXAMPLE CODE PROVIDED AS IS WITH NO WARRANTY OR SLA


function cameraSuccess() {
  // Code to execute on successful photo
}
function cameraFailure() {
  // Code to execute on failed photo

  // Send camera-error track event to Pendo to track camera failures
  pendo.track("camera-error", {
    model: device.model,
    platform: device.platform,
    version: device.version,
  });
}
navigator.camera.getPicture(cameraSuccess, cameraFailure);
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています