概要
Pendoのプロダクト分析機能は、シングルページのアプリケーションフレームワークに特に役立ちます。従来のウェブ分析ツールは、ページ閲覧数に合わせて作られているため、このような環境では苦労します。シングルページのフレームワークでは、単一のページ閲覧のコンテキストにさまざまなユーザー操作が発生します。
こういった問題は開発チームで回避できますが、分析ソリューションが適切に追跡されるようにするために、追加の作業負荷がかかります。Pendoは、ページ上のすべてのユーザー操作をキャプチャし、特定のユーザーに帰属させることで、これらの課題を回避します。これを実行するには、アプリケーションに小さなJavaScriptスニペットを挿入する必要があります。このスニペットは、当社のCDNからJavascriptファイルを安全かつ非同期に読み込みます。
インストールスニペット
Pendoのインストールスニペットは、管理者のみがアクセス可能な［インストール設定（Install Settings）］ページにあり、多くのアプリと同じように一般的なHTMLテンプレートに挿入することができます。データが最初にPendoに入力されるまでに、最大2時間かかることがあります。データの受信が開始されると、メールでお知らせが届きます。
インストールプロセス
インストール方法は、同じインストールスニペットを使用するマルチページインストールと似ていますが、展開方法が若干異なります。シングルページフレームワークでは、Pendoスニペットの最初の部分であるfunction(p,e,n,d,o){}がアプリケーションライブラリに追加されます。後半のpendo.initialize({})は、アプリケーションがPendoと共有するユーザー識別情報を持った時点でページに読み込まれます。
Agent 2.0 FAQには、インストールスニペットやPendoエ―ジェントの更新方法に関する詳細情報が記載されています。
ここでは、インストール時にスニペットを分割する方法について、サンプルスニペットを使って説明します。
スニペット1
たとえば、スニペットの次の部分をアプリケーションライブラリやインデックスページに追加します。
スニペット2
アプリケーション内にユーザーのコンテキストができたら、スニペットの後半部分を使って、ユーザー、アカウント、その他の人口統計情報をPendoに渡します。
これはアプリケーションにPendoをインストールするために必要なコーディングの範囲です。すべてのユーザーのトラッキングがすぐに開始され、アプリケーション内の任意の場所にある特定のフィーチャーをPendoインターフェースでタグ付けし、過去にさかのぼって分析することができます。
インストールに関するFAQ
スニペットはどこにインストールすればいいですか？（あらゆる場所です！）
スニペットはすべてのページにインストールする必要があります。サイトではiframeを使用していますか？使用している場合は、各フレーム内にスニペットがインストールされているかどうかを確認してください。
なぜ共通のIDが重要なのですか？
必ず、固有の訪問者IDとアカウントIDを渡してください。これにより、訪問者とアカウントが識別されます。いずれかが重複している場合、複数のユーザーのデータが1つのIDに集約されてしまう可能性があります。
なぜメタデータが重要なのですか？
訪問者とアカウントについて、どのような情報をPendoに渡したいですか？Pendoに受け渡されたあらゆる情報に基づいて、訪問者をセグメント化することができます。（各ユーザーの役割を渡して、特定の役割を対象としたガイドのターゲット設定やデータのフィルタリングができるようにすることもできます。）メタデータについて詳しくはこちら。
未知のユーザー（Unknown users）とは誰ですか？
未知のユーザーや匿名のユーザーとは、アプリにログインしていないユーザーのことです。匿名の訪問者がいたとして、彼らのデータを見たい場合や、匿名の訪問者にガイドを表示したい場合は、未知のユーザーに対する分析を有効にして、必要に応じてガイドの閲覧を許可することができます。
表示したくないデータがある場合は？
テスト環境やステージング環境、内部ユーザーの間では、データが乱雑になることがあります。絶対に含めたくないデータがある場合は、除外することができます。Pendoでは、サーバー/ホストドメイン、IPアドレス、訪問者ID、アカウントIDに基づいてデータを非表示にすることができます。
検証とトラブルシューティング
インストールが正しく行われているかどうかを確認するにはどうすればよいですか？
インストールの状況や、特定のユーザーにメタデータが設定されているかどうかを確認するには、次のようにします。
- Pendoをインストールしたら、ブラウザのタブでアプリケーションを開きます。
- ユーザーとしてサインインします。
- ブラウザ開発者コンソールを開きます。
pendo.validateInstall()とコンソールに入力してEnterを押します。- 訪問者の識別可能なメタデータの情報が返されます。
Pendoにデータが表示されないのはなぜですか？
APIキーがスニペットに含まれていることを確認してください。［インストール設定（Install Settings）］ページからスニペットをコピーした場合、APIキーはすでに含まれています。他の場所からスニペットを取り込んだ場合は、APIキーがスニペットに含まれていることを確認してください。Pendoですべてのデータを受信するには、特定のデータ構文のルールに従う必要があります。null値はどのフィールドにも送信しないでください。データがないフィールドは、送信を省略します。スニペットで追加されたカスタムフィールドには、スペースを含めることができません。フィールドは、アルファベットまたはアンダースコアで始まり、その後にアルファベットまたは数字、アンダースコアを組み合わせることができます。訪問者とアカウントのメタデータについて、詳しくはこちらをご覧ください。
注：データはすぐに表示されません。毎時0分に一括集計され、PendoのUIに完全に表示されるまでに、毎時0分を過ぎてから最大15分かかることがあります。
pendo.jsおよびpendo-staging.js
Pendoスニペットは、まずpendo.jsエージェントを読み込みます。このエージェントは、まずサーバーのホスト名がステージングサーバーのルールに一致するかどうかをチェックし、一致した場合はpendo.jsではなくpendo-staging.jsからPendoオブジェクトを読み込みます。
ログインしているユーザーがいない
セットアップ中に「ログインしているユーザーがいません」というメッセージが表示されますが、これはPendoがアプリケーションから基本データを受信している（具体的には、アプリで当該のページやフィーチャーが使用されている）が、ユーザーの識別情報がないことを通知しています。このデータがなくてもPendoを使用することはできますが、機能は大幅に低下します。
スニペットには、今回の問題の対象となる、訪問者ブロックとアカウントブロックという2つのブロックがあります。データが渡されていないか、構造が間違っているかのどちらかです。
このコードのテンプレートをご紹介します。
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' // Highly recommended
// 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.
}これは、コードでデータがどのように見えるかの例です。
visitor: {
id: $user.ID,
email: '$user.email',
full_name: '$user.full_name',
role: '$user.accessLevel',
creationDate: $user.creationDate
},
account: {
id: '$account.ID',
name: '$account.name',
is_paying: $account.is_paying,
monthly_value:'$account.monthly_value',
planLevel: $account.subscriptionCost,
isFoo: $account.isFoo
}これは、コードが処理され、Pendoに送信された後にどのように見えるかの例です。
visitor: {
id: 62343,
email: 'john@doe.com',
full_name: 'John Doe',
role: 'admin',
creationDate: 1404326949156
},
account: {
id: 17,
name: 'Acme, inc',
is_paying: true,
monthly_value:'99.99',
planLevel: 995,
isFoo: false
}オプションフラグ
JSスニペットには、3つのオプションフラグを配置することができます。
excludeAllText: true
デフォルトでは、Pendoエージェントが訪問者がクリックしたDOM要素からテキストの値を収集します（ただし、テキストエリアや入力フィールドからはテキストを収集しません）。これは、どのようなHTMLがフィーチャーの一部であるかをより正確に表すために行われます（たとえば、ボタンテキストを使って［検索（Search）］ボタンと［ログアウト（Log out）］ボタンの違いを判別し、ユーザーがどちらを多く使用しているかを知ることができます。
これらのテキストをPendoに収集させたくない場合は、スニペットのpendo_optionsオブジェクト内でexcludeAllTextフラグをtrueに設定します。注：これにより、プロダクトのフィーチャーを追跡することが難しくなります。
実際にクリックされた要素（およびその親から本文まで）のみが処理されることに注意してください。Pendoエージェントが勝手にウェブアプリケーションのデータを収集することはありません。
disableGuides: true
ガイドプロダクトをまったく使用しない（エンドユーザーに対してアプリ内メッセージを表示しない）ことがわかっている場合は、disableGuides:trueフラグを設定すると、Pendoスニペットが利用可能なガイドがあるかどうかを確認するための送信要求を行わなくなります。
excludeTitle: true
<title>を収集します。これは、オプションのexcludeTitle: trueフラグを含めることで防ぐことができます。
Pendoパフォーマンス
ウェブアプリケーションにPendoのJavascriptスニペットを追加すると、パフォーマンスにどのような影響がありますか？
PendoのJavascriptファイルは、AmazonのCloudfront CDNでホストされ、最先端のエッジキャッシングを利用して提供されています。javascriptのファイルは、わずか54Kバイトに縮小されており、非同期に読み込まれます。
データは、2分ごと、およびページが「アンロード」されたときに、各ユーザーのブラウザから当社のサーバーにSSLで安全に送信されます。データは送信前に圧縮され、1回の送信は2Kバイト以下になります。
その他の情報については、セキュリティ＆プライバシーに関するヘルプ記事をご覧ください。