ロケーションAPIを使用して収集したURLをカスタマイズする

最終更新日:

ロケーションAPIを使用して、Pendo Web SDKが収集したURLを変換します。これは、デフォルトのアプリケーションURLがアプリの構造を反映していない場合や、Pendoが収集するURLをより細かく制御したい場合に役立ちます。ロケーションAPIは、インストールスクリプトを介してPendoがインストールされているWebおよびElectronアプリケーションでのみ動作します。

重要:ロケーションAPIは、ブラウザ拡張機能のインストールまたはモバイルアプリのインストールではサポートされていません。

要件

これらのガイドラインに従う前に、次の点を確認してください。

  • WebアプリケーションのWeb SDKバージョンが2.108.0以降であること。
  • ElectronアプリケーションのWeb SDKバージョンは2.126.0であること。
  • ロケーションAPIを実装する準備ができた開発者がいること。
  • 廃止されたメソッドsanitizeUrlannotateUrlignoreHashRoutingqueryStringWhitelistxhrWhitelistを使用している場合は、ロケーションAPIを実装する前にそれらを削除する必要があります。これらのメソッドはロケーションAPIと互換性がなく、正しく動作しなくなります。これらのいずれも使用していない場合は、何もする必要はありません。

仕組み

ロケーションAPIは、PendoWeb SDKが収集したURLを変換します。これは、Pendo がページにタグを付ける方法とガイドを表示するタイミングを決定する方法に影響しますが、エンドユーザーに表示される実際のURLは変更されません。ロケーションAPIを使用して、アプリケーション全体のすべてのURLを変換することも、特定のページのURLのみを変換することもできます。ロケーションAPIの変更は遡及的ではなく、過去に収集されたURLは変更されません。

変換を計画して実行する

ロケーションAPIを実装する前に、タグ付けやレポートを容易にするために、URLをどのように構造化すべきかを特定してください。

  • URL のどの部分を保持、編集、または削除するかを決定します。
  • ページルールの一貫性を保つためにURLを構造化する方法を決定します。
  • 変換計画を作成し、開発者と共有します。

例えば、アプリがクエリパラメーターを持つシングルページレイアウトを使用している場合、それらのパラメータをパスセグメントに置き換えたり、フラット化したりすることを検討するかもしれません。

開発者にアプリケーションに必要なコード変更を依頼してください。ロケーションAPIに関する技術ドキュメントを参照してください。開発者は以下のタイミングと方法で変換を実装できます。

  • Pendo Web SDKの初期化中。
  • ロケーションAPIを使用して随時プログラム的に。

ユースケースの例

サンプルシナリオ ロケーションAPIの影響

プロダクト内の異なるページを区別するにはPendoが必要ですが、URLは変わりません。

https://acme.com/

URLの末尾にテキストが追加され、より一意になり、別のページとしてタグ付けできるようになります。

https://acme.com/dashboard

ユーザーは5つのステップから成るフォームを移動しますが、URLは5つのステップすべてで同じです。

https://acme.com/form-creation

各ステップには固有のURLがあり、個別にタグ付けできます。フォームの完了を追跡し、各ステップにガイドをターゲットできます。

https://acme.com/form-creation?step=1

ハッシュ化されたURLフラグメントにより、不要なガイドの再表示やページビューの増加が発生します。

https://acme.com/features#featureA
https://acme.com/features#featureB

フラグメントを削除するとURLの一貫性が保たれ、ガイドの再表示やページビューの過剰カウントが回避されます。

https://acme.com/features

 

URL には収集すべきではない機密データが含まれています。

https://acme.com/user/123-456-789/details

機密値は削除されるか、プレースホルダーに置き換えられます。

https://acme.com/user/details
 または
https://acme.com/users/redacted/details

URLに不要なクエリパラメータが含まれています。

https://acme.com/dashboard?report=timecard&state=georgia

必要なパラメータのみ取得されるため、レポートが簡素化され、ターゲティングがガイドされます。

https://app.acme.com/dashboard?report=timecard

URLはPendoページタグ付けにサポートされていない構文を使用しています。

https://acme.com/products;color=blue/category;type=shoes

URLをサポートされている形式に変換し、適切にタグ付けできるようにします。

https://acme.com/products/category?color=blue&type=shoes

実装を検証する

実装後、次のいずれかの方法を使用して、URLが正しく変換されていることを確認します。

ビジュアルデザインスタジオ

  1. Pendoで[プロダクト]>[ページ]に移動します。
  2. ビジュアルデザインスタジオを起動します。
  3. ロケーションAPIが有効なページに移動します。
  4. [現在のURL]フィールドを確認してください。変換されたURLが表示されます。

    location_api_visual_design_studio.png

Pendoデバッガーで

  1. ロケーションAPIが有効なページに移動します。
  2. 開発者コンソールを開き、pendo.enableDebugging()を実行します。Pendo デバッガーを起動します。
  3. デバッガーの構成タブに移動します。
  4. フレームセレクターで、Frame href(Pendoが収集したURL)とBrowser URL(ブラウザの実際のURL)の値を比較します。変換が成功した場合、両者は異なるはずです。

location_api_debugger.png

ヒント : ページに複数のiFrameがある場合は、フレームセレクタードロップダウンから特定のiFrameを選択できます。

pendo.location.getHref() を使用して

  1. ブラウザの開発者コンソールを開きます。
  2. pendo.location.getHref()を実行します。
  3. 返される値は変換されたURLを反映しているはずです。

    location_api_get_href.png

pendo.validateEnvironment() を使用して

  1. ブラウザの開発者コンソールを開きます。
  2. pendo.validateEnvironment()を実行します。
  3. [URL検証]セクションまでスクロールします。
  4. 「URL has been customized...」というメッセージを探します。

    location_api_validate_environment.png

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