この記事は、Pendoをインストールするためのコンポーネントと手順をまとめたものです。インストールでは、WebアプリケーションのフロントエンドにPendoのJavaScriptコードを挿入します。これは概ね次の3つのステップで行われます。
注)インストールスクリプトは一般的に「スニペット」と呼ばれています。スニペットはPendoエージェントを参照するコードブロックであり、APIキーと初期化メソッドが含まれています。Pendoエージェントはpendo.jsファイルで、イベント収集、アプリ内ガイダンス、Feedbackモジュール(サブスクリプションによる)を提供します。コンポーネントの詳細については、以下のインストールの内容を参照してください。
すでにPendoをご利用のお客様で、Pendo Feedbackをプロダクトに追加する場合は、Feedbackを新規にご利用になる方向けの手順として、 Feedbackのインストールに関する開発者向けガイドをご覧ください。
インストールは、Pendoをアプリケーションに統合するために必要な唯一の技術的部分です。他のエンジニアリングリソースは必要ありません。セットアップが完了すると、エージェントがアプリケーションのユーザーにPendoを提供します。PendoエージェントとAPIデベロッパーに関する詳細なドキュメントは、Engage APIをご覧ください。
その他の開発オプションもあります。イベントのタグ付けと追跡のためのカスタムHTML属性を追加することで、Pendoを最適化できます。詳しくは、HTML属性およびトラックイベントを参照してください。
他の一般的なCRM、分析、およびコラボレーションツールとのインテグレーションを追加して、Pendoを拡張することもできます。範囲は、コード不要のインストールウィザードによるネイティブインテグレーションからカスタム開発まで多岐にわたります。詳しくは、インテグレーション(Integrations)の記事をご覧ください。Pendoのインストールが完了した後のサブスクリプションのインテグレーション機能については、Pendoの担当者にお問い合わせください。
Pendoのインストールプロセスの詳細については、「Pendoインストールの計画(Planning your Pendo Installation)」を参照してください。
始める前に
Pendoをインストールするには、以下のものが必要です。
-
- Pendoサブスクリプション
- Pendoをインストールするためのエンジニアリングリソース
- 訪問者IDとアカウントIDの命名規則
- 収集するその他のメタデータのリスト
Pendoインストールワークブック(Installation Workbook)を使って、インストールを完了するために必要な情報をチームメンバーと共有することをお勧めします。
データ要件
Engage(インサイトとガイダンス)をご利用のお客様の場合、環境やプロダクトライン全体で個々のユーザーを追跡し、Pendoがアナリティクスを追跡して正しくガイドを提供できるようにするために、グローバルに一意の訪問者IDが必要です。
訪問者IDの値は、サイズが128バイトに制限されています。これより大きい値は切り捨てられます。このIDについては、プロダクトチームとエンジニアリングチームの間でコンセンサスを得る必要があります。詳細は、ステップ1:訪問者とアカウントメタデータの識別を参照してください。
EngageとFeedbackの両方のデータニーズに合わせてコードを最適化することをお勧めします。これには、グローバルに一意の訪問者ID、メールメタデータ、アカウントIDが含まれます。Pendo Feedbackに必要なものについては、Feedbackのインストールに関する開発者向けガイドをご覧ください。
インストールの内容
このセクションでは、インストールに関連する全体的な手順と主なコンポーネントを簡単に説明します。
Pendoインストールの概要
Pendoエージェント
サブスクリプションに応じて、Pendoエージェントは次の目的でブラウザで実行されるJavaScriptファイル(pendo.js)となります。
-
- 訪問者イベント(ページの読み込み、機能のクリックなど)の収集および追跡
- 訪問者およびアカウントのメタデータの収集
- ガイドの読み込み
- Feedbackモジュールの配信
通常、エージェントはPendoサーバー上で構成され、インストールスクリプト(「スニペット」) によって要求されます。
インストールスクリプト(「スニペット」)
インストールスクリプトは、一般に「スニペット」と呼ばれ、Pendoエージェントコード(pendo.js)を取得して読み込む短いJavaScript関数です。使用状況の追跡、フィードバックの収集、メッセージやガイドの配信を行うことができます。インストールスクリプトには以下が含まれます。
-
- Pendoエージェントの要求
- エージェントが収集したデータをPendoサブスクリプションのプロダクトにマッピングする顧客固有のAPIキー
- Pendoエージェントをアクティブにするために必要な初期化メソッド
エージェントが機能するには、インストールスクリプトと初期化メソッドの両方がウェブサイトのすべてのページに存在する必要があります。ただし、アプリケーションにトップフレームと同じドメインからの子フレームがある場合は除きます。この場合、インストールスクリプトをアプリケーションのトップフレームに追加することで、子フレームにPendoを自動的にインストールするようにインストールスクリプトを構成することができます。これらのフレームのいずれかで訪問者IDまたはメタデータに加えられた変更は、すべてのフレームに適用されます。
注:スニペットが存在しても、トラッキングが行われることにはなりません。トラッキングを行うには、スニペットを初期化する必要があります。詳しくは、 初期化をご覧ください。
アプリケーション(API)キー
インストールスクリプトは、Pendoをライブラリとして読み込み、その機能をウィンドウレベルで使用できるようにし、コードブロックに含まれる32桁のアプリケーション(API)キーを渡します。
APIキーは、サブスクリプションのアプリケーションの詳細に事前入力されており、[インストール(Install)]ページまたは[アプリの設定(App Settings)]にあります。
初期化
使用状況アナリティクスの追跡、フィードバックの収集、およびガイドの提供を開始する前に、Pendoエージェントを初期化する必要があります。初期化は、以下の内容を実行するためのPendoインストールスクリプト(スニペット)のJavaScript関数です。
-
- 訪問者IDおよびアカウントIDとして渡したい値を決定します。
- Pendoに提供するメタデータをカスタマイズします。
- Pendo Feedbackの自動タグを作成します。詳しくは、Feedbackにおける自動タグ付けをご覧ください。
初期化コードブロックを使用すると、訪問者とアカウントを識別し、アナリティクスをセグメント化したり、アプリケーション変数(ユーザーオブジェクトなど)から渡されたメタデータを使用してガイドをターゲット化したり、Feedbackリクエストに自動タグを付けたりすることができます。
pendo.initalize()
が実行される前に、インストールスクリプトに渡されるすべての変数を定義する必要があります。詳細については、条件付きでPendoを初期化するを参照してください。
初期化は、訪問者が認証された後のウィンドウの再読み込みごと、またはサイトにiframeがある場合はフレームごとに実行する必要があります。複数ページのアプリケーションを使用している場合はログインページだけでなく各ページ、またはグローバルテンプレートがある場合はそのページで、Pendoを初期化する必要があります。
以下は初期化コードブロックの例です。これは[インストール(Install)]ページまたは[アプリの設定(App Settings)]にあります。この例をカスタマイズして、サブスクリプションのニーズを満たすことができます。
pendo.initialize({
visitor: {
id: 'VISITOR-UNIQUE-ID' // Required if user is logged in
// 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: 'ACCOUNT-UNIQUE-ID' // Required if using Pendo Feedback
// name: // Optional
// 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.
}
});
ステップ1:訪問者とアカウントメタデータの識別
Pendoがガイドを提供したり、アナリティクスを収集したり、Feedbackモジュールを配信したりするために必要な初期化コードブロックを含むテンプレートを、サブスクリプションで提供します。
必要な操作は、そのコードで、訪問者(プロダクトの一意のエンドユーザー)、アカウント(訪問者のグループ)の値、メタデータを調整することだけです。この情報は、アプリ内からエージェントに送信されます。
Pendo Feedbackのお客様は、アプリからデータを取得してFeedbackの訪問者とアカウントにタグを自動的に追加する自動タグ付けを設定することもできます。Pendo Feedbackを使い始めた後ではなく、今すぐこれを行うことをお勧めします。詳細については、Feedbackのインストールに関する開発者向けガイドを参照してください。
訪問者IDとアカウントID
Engage(インサイトとガイダンス)は、エンドユーザーレコードが一意になるよう、訪問者(エンドユーザー)IDに依存します。メールアドレスは、訪問者IDを一意のものにするのに適しています。訪問者のメールアドレスをメタデータとして渡すこともできます。これは、カスタムセグメンテーション、レポート作成、ユーザーとのコミュニケーションに便利です。
アカウントレベルの分析とレポート、およびPendo Feedbackの使用に必要なアカウントIDを使用することを強くお勧めします。Feedbackのデータ要件については、「Feedbackのインストールに関する開発者向けガイド(Developer's guide to installing Feedback)」を参照してください。
Feedbackのお客様でなくても、Pendoのユーザー体験を最適化するために、環境やプロダクトライン全体で共通の一意のアカウントIDなど、訪問者のグループに関連付けられたアカウント情報を使用することをお勧めします。
重要事項:
訪問者IDとアカウントIDの両方をここで設定することを強くお勧めします。訪問者IDとアカウントIDはイベントの生データに保存されます。イベントの生データは作成後に編集することはできません。
また、インストール後に訪問者IDとアカウントIDを変更することはできません。インストール後に訪問者IDとアカウントIDのマッピングが変更されると、Pendoにプロダクト使用履歴やガイド閲覧履歴のない新しい訪問者とアカウントのレコードが作成され、アナリティクスやセグメンテーションに異常が発生し、ガイド体験が繰り返されます。
Engageのお客様にとって、訪問者IDは一人の人間がさまざまなプロダクトを利用するカスタマージャーニー全体を表すものでなければなりません。詳しくは、マルチアプリサブスクリプションをご覧ください。
同じ訪問者IDを持つ複数のエンドユーザーがIDの衝突を引き起こし、その1つのIDに対して複数のユーザーのアクティビティが追跡される可能性があります。これは、訪問者が同じマルチアプリケーションPendoサブスクリプションで異なるアプリまたはアプリのバージョンを使用している場合でも発生する可能性があります。IDの競合は、次に影響を与える可能性があります。
-
- 訪問者のメタデータ。Pendoは後入れ値に基づいてメタデータを記録します。メタデータは、最新のアクティビティを持つユーザーに基づいて更新されます。そのため、正確なメタデータに依存するセグメントに影響を与える可能性があります。
- 分析。衝突するIDで収集されたアクティビティを分離できないため、分析に一貫性がなくなります。
- ガイドの配信。ガイドが一度しか見られないように設計されている場合、同じ訪問者IDを持つ2人目のユーザーにはそのガイドが表示されません。
環境間で訪問者IDが競合することが心配な場合は、プレフィックスやサフィックスを使って環境の識別子をIDに追加することができます。異なる環境で訪問者を識別する方法は、記事「開発およびテストにおけるPendo(Pendo in Development and Testing)」に記載されています。
異なる環境で訪問者を識別することは、後でデータを除外するときに役立ちます。データの除外については、「リスト 101:除外/包含リスト(Listing 101: Exclude & Include Listing)」を参照してください。
Feedbackをご使用のお客様には特に、メールのメタデータの使用とアカウントIDの必要性に関してさらに考慮するべき事項があります。詳細については、Feedbackのインストールに関する開発者向けガイドを参照してください。
メタデータ
訪問者レベルやアカウントレベルでメタデータを指定することで、アナリティクスでのセグメンテーションやグループ化、ガイドのターゲティング、およびフィードバックデータのフィルタリングのオプションを強化できます。Pendoをインストールする前に、取得したい情報とメタデータを明確にしておくことをお勧めします。また、初回インストール後にメタデータを追加すると、Pendoの訪問者とアカウントの詳細が更新されます。
上記のコードブロックに示されている追加フィールドは、訪問者やアカウントについてお客様が送信できるメタデータの例です。日付、整数、浮動小数点数、ブール値、リスト、および文字列を送信できます。Pendoでは、オブジェクトはサポートされていません。詳しくは、データマッピングの記事をご覧ください。
メールメタデータを使用することを強くお勧めします。メールのメタデータはPendoレポートからアクセスでき、カスタムセグメントの作成に使用でき、Pendo Feedbackの機能に投票したユーザーにメールを送信するために使用できます。
Feedbackをご利用のお客様は、自動タグ付けを設定することもできます。詳しくは、「 Feedbackのインストールに関する開発者向けガイド(Developer's guide to install Feedback)」および「 Feedbackにおける自動タグ付け(Auto-tagging in Feedback)」をご覧ください。
訪問者レベルのメタデータの例を次に示します。
-
- 訪問者名(強く推奨)
- メールアドレス(強く推奨)
- ユーザー権限
- 役割または役職
アカウントレベルのメタデータの例を次に示します。
-
- アカウント名(推奨)
- 支払いステータス(推奨)
- アカウントの値(ARRやMRRなど。Feedbackレポートでも使用される)
- 業種
- マーケットセグメント
- アカウント作成日
- 登録日
- 契約開始日
- 契約更新日
- 契約金額
業界固有のメタデータフィールドなど、アプリケーションですでに使用可能な変数から任意の値を渡すことができます。メタデータルールの組み合わせを使用して、Pendoでセグメントを作成し、状況に応じたガイドをターゲットユーザーに配信することもできます。Pendoインストールワークブックが完成している場合は、チームがキャプチャする予定のフィールドを「基本的なインストール」で確認してください。
注:初期化時に渡されるメタデータの合計サイズは64kb未満でなければなりません。サイズを決めるには、pendo.initialize()
に渡されたパラメータをJSONに変換し、そのJSONファイルは64kbより小さくなければなりません。このデータはエージェントによって圧縮され、Pendoに送信されます。圧縮されたJSONデータが64kbより大きい場合は、エージェントによってドロップされます。
Pendoのメタデータについて詳しくは、訪問者とアカウントのメタデータをご覧ください。
ステップ 2:アプリケーションへのPendoのインストール
Pendoのインストールには、次の作業が必要です。
- インストールスクリプト(「スニペット」)を実行して、エージェント(pendo.js)をダウンロードします。
- pendo.jsファイルのインストールスクリプトで初期化メソッドを実行して、エージェントを起動します。
- Feedbackもご利用中のお客様の場合は、インストール中にPendoプロフェッショナルサービスがFeedbackを有効にします。サブスクリプションにFeedbackが表示されない場合は、Pendoサポートにお問い合わせください。
既存のEngageのお客様が初めてFeedbackに切り替える場合は、「Feedbackのインストールに関する開発者向けガイド(Developer's guide to install Feedback)」をご覧ください。
インストールスクリプトには、Pendoをアプリケーション内で起動させるためのコードが含まれています。アプリケーションでエージェントが実行されると、Pendoはアナリティクスを収集し、過去に保存されたデータに遡ってアクセスできるようになります。
コードは、ガイドを提供したり、分析を収集したり、フィードバックを収集したりするすべてのページに存在する必要があります。そのため、HTMLの共通領域にコードを配置して、アプリのすべてのページに自動的に含まれるようにすることをお勧めします。また、Pendoがフィードバックを適切に収集し、分析を追跡し、ガイドを提供できるように、コードがすべてのiframeに含まれていることを確認する必要があります。
スニペット – Pendoガイド、アナリティクス、およびFeedbackを提供するために必要なコードを取得してインストールするには、次を行います。
- ブラウザでapp.pendo.ioに移動します。
- 左側のナビゲーションにある[サブスクリプション(Subscriptions)]タブで、適切なサブスクリプションを選択していることを確認してください。
- 左側のメニューの右下から[設定(Settings)]>[サブスクリプション設定(Subscription Settings)]を選択します。
- [アプリケーション(Applications)]タブを開きます。
- [インストール設定(Install Settings)]を選択します。
- コードをテキストエディタにコピーして編集します。
- インストールスニペットの訪問者オブジェクトとアカウントオブジェクト内のフィールド名を設定します。
- アプリ内のメタデータとタグをコードに取り込みます。
- アプリケーションのすべてのページにあるHTMLテンプレートのHeadタグにコードを貼り付けて、コードをアプリコードにコピーします。
コードが公開されると、Pendoがアプリにインストールされます。
ステップ 3:インストールの確認
コードがインストールされた場所とエンドユーザーが認証された場所で検証が実行されます (匿名ユーザーが使用されている場合を除く)。インストールのステータスと、メタデータが特定のユーザーに対して設定されていることを確認するには、次の2つの方法があります。
-
- [アプリの設定]でPendoのイベントの生データとデータマッピングを確認する。
- ブラウザ開発者コンソールで
pendo.validateEnvironment()
コマンドを使用する。
アプリ設定で確認する
- [設定(Settings)]>[サブスクリプション設定(Subscription Settings)]に移動します。
- [アプリケーション(Applications)」タブを開きます。
- アプリがインストール済みであることを示す[アプリケーション]リストから該当するアプリを見つけて開きます。
- [イベントの生データ(Raw Events)]タブを選択すると、エージェントが収集したイベントの生データのリストが表示されます。
-
イベントを選択して、そのイベントによって収集されたコードとメタデータを表示します。イベントには以下が表示されます。
- それを生成したユーザーの訪問者IDとアカウントID。
- ブラウザのセッションメタデータ (追加のメタデータはイベントの生データには保存されません)。
- [設定(Setting)]>[ データマッピング(Data Mappings)]に移動します。
- Pendoに登録されているデータと、エージェントが送信したデータが一致しているかどうか確認します。
エージェントのメタデータフィールドが正しく入力されていない場合は、次回のPendoの初期化時にのみ更新されます。これらのフィールドは、手動で変更することはできません。これらを変更するには、インストールスクリプトを修正するか、update visitor関数を渡す必要があります。
注:初期データの受信には、最大で2時間かかる場合があります。
ブラウザ開発者コンソールをを確認する
Pendoのインストールを確認する段階的な手順については、Pendo Academyに掲載している動画をご視聴ください。米国ドメインの方はUS Pendo Academyに、EUドメインの方はEU Pendo Academyにアクセスしてください。
- Chromeブラウザ(推奨)でアプリケーションを開き、アプリにサインインします。
- ページを右クリックして[検証(Inspect)]を選択し、ブラウザの開発者コンソールを開きます。
- [コンソール(Console)]タブを選択します。
- コンソールに
pendo.validateEnvironment()
と入力します。 - キーボードのEnterキーを押すと、スニペットで指定した値であるメタデータが返されます。
- 訪問者とアカウントのメタデータが正確であることを確認します。
この情報によって、Pendoへのデータのマッピングが正常に成功したかどうかがわかります。
[Pendoが定義されていません(Pendo is not defined)]というエラーが表示された場合は、スニペットがコードに正しく含まれていないか、実行されていません。
追加の設定
さらに、以下のような設定オプションが用意されています。
Pendoがテキストを収集しないようにする
Pendoは、クリックイベントプロパティでPendoユーザーが設定しない限り、入力フィールドやテキストボックスのようなユーザー入力テキストを収集しません。
Pendoは、タグ付けを容易にするために、DOMからテキストを収集します。たとえば、フィーチャーやガイドは、element:contains("UI Text")
をターゲットとした要素をUIでタグ付けすることができます。機密情報がDOMに表示されている場合は、要素の階層を記録する際に、イベントの生データによって完全にまたは部分的に収集されます。
テキストを収集しないようにする場合は、次のいずれかを行ってください。
- [推奨]サポートに連絡して、テキスト収集の無効化を依頼します。
- 初期化に
excludeAllText:true
という行を追加します。Pendoはこれを元に戻すことはできません。
その他のエージェントのカスタマイズについては、開発者向けのドキュメントをご参照ください。
修正スニペットの例
pendo.initialize({
visitor: {
id: 'VISITOR-UNIQUE-ID'
},
account: {
id: 'ACCOUNT-UNIQUE-ID'
},
excludeAllText: true
});
スニペット内のPendoガイドをブロックする
ガイドをまったく使用しないことがわかっている場合は、disableGuides:true
フラグを設定すると、Pendoエージェントは利用可能なガイドがあるかどうかを確認するための送信要求を行わなくなります。Pendoユーザーがガイドをビルドして公開しても、アプリには読み込まれません。
修正スニペットの例
pendo.initialize({
visitor: {
id: 'VISITOR-UNIQUE-ID'
},
account: {
id: 'ACCOUNT-UNIQUE-ID'
},
disableGuides: true
});
ユーザーがこの設定を変更し、初期化後にコンソールでガイドを読み込むことは技術的に可能です。この作業を手動で行うには、Pendoとアプリケーションに関するかなりの技術的知識が必要です。このような状況では、ユーザーおよびアプリケーション固有のターゲット基準をすべて満たしたアプリ内の公開ガイドのみが読み込まれる可能性があります。
トラブルシューティング
Pendoにデータが表示されない
スニペットにアプリケーションキーが含まれていることを確認してください。[インストール設定(Install Settings)]ページからスニペットをコピーした場合、アプリケーションキーはすでに含まれています。他の場所からスニペットをコピーした場合は、アプリケーションキーがスニペットにあることを確認してください。
Pendoですべてのデータを受信するには、以下のデータ構文のルールに従う必要があります。
-
- データがないフィールドは、送信を省略してください。
-
フィールドの既存の値を削除したい場合は、
null
を送信します。 - カスタムフィールドにスペースを含めないでください。
- フィールドは、文字またはアンダースコアで始まる必要があり、文字、数字、アンダースコアの組み合わせを含むことができます。
Pendoのメタデータについて詳しくは、訪問者とアカウントのメタデータをご覧ください。
注:アナリティクスに利用されるデータの多くは、1時間ごとに一括集計されるため、Pendo UIに表示されるまでには、毎正時から最大15分かかることがあります。
メッセージ:ログインしているユーザーがいない(No Logged In Users)
セットアップ中に「ログインしているユーザーがいません(No Logged In Users)」というメッセージが表示された場合、これはPendoがユーザーの識別情報がない状態で、ページやフィーチャーの利用データを受信していることを意味します。ユーザーを特定できない状態でもPendoを使用することはできますが、機能は大幅に低下します。未確認ユーザーの詳細については、匿名の訪問者を参照してください。
スニペットの訪問者IDもしくはアカウントIDのパラメータが問題を引き起こしている可能性があります。データが渡されていないか、データの構造が間違っています。
コードテンプレート
訪問者:{ id:'VISITOR-UNIQUE-ID'// Required if user is logged in // 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. }, アカウント:{ // id: 'ACCOUNT-UNIQUE-ID' // Highly recommended // name: // Optional // monthly_value:// Recommended if using Pendo Feedback // is_paying: // 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. }
メタデータを用いたコード例
訪問者:{ id: $user.ID, email:'$user.email', full_name:'$user.full_name', role:'$user.accessLevel', creationDate: $user.creationDate }, アカウント:{ id:'$account.ID', name:'$account.name', is_paying:'$account.is_paying', monthly_value:'$account.monthly_value', planLevel: $account.subscriptionCost, isFoo: $account.isFoo }
Pendoに送られたコード例
訪問者:{ id:62343, email:'john@doe.com', full_name:'John Doe', role:'admin', creationDate:1404326949156}, アカウント:{ id:17, name:'Acme, inc', monthly_value:'99.99', is_paying:true, planLevel:995, isFoo:false}