シングルページフレームワークのインストール

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エ―ジェントの更新方法に関する詳細情報が記載されています。

警告:ここに示すすべてのスニペットは、提供されたJavaScriptスニペットを必要に応じて調整する方法について説明するためのサンプルスニペットです。固有のAPIキーを使用してスニペットをコピーして変更する必要があるため、この記事から直接コピーしないようにしてください。

ここでは、インストール時にスニペットを分割する方法について、サンプルスニペットを使って説明します。

Fullsnippet.png

スニペット1

たとえば、スニペットの次の部分をアプリケーションライブラリやインデックスページに追加します。

SPAsnippetpart1.png

スニペット2

アプリケーション内にユーザーのコンテキストができたら、スニペットの後半部分を使って、ユーザー、アカウント、その他の人口統計情報をPendoに渡します。

SPAsnippetpart2.png

 

よくある質問

スニペットはどこにインストールすればよいですか?-あらゆる場所です!

スニペットはすべてのページにインストールする必要があります。サイトではiframeを使用していますか?使用している場合は、各フレーム内にスニペットがインストールされているかどうかを確認してください。

なぜ全体で一意のIDが重要なのですか?

必ず、固有の訪問者IDとアカウントIDを渡してください。これにより、訪問者とアカウントが識別されます。いずれかが重複している場合、複数のユーザーのデータが1つのIDに集約されてしまう可能性があります。

一意のIDについて詳しくご覧ください。

なぜメタデータが重要なのですか?

訪問者とアカウントについて、どのような情報をPendoに渡したいですか?Pendoに受け渡されたあらゆる情報に基づいて、訪問者をセグメント化することができます。(各ユーザーの役割を渡して、特定の役割を対象としたガイドのターゲット設定やデータのフィルタリングができるようにすることもできます。)メタデータについて詳しくはこちらをご覧ください。

未知のユーザーとは誰ですか?

未知のユーザーや匿名のユーザーとは、アプリにログインしていないユーザーのことです。匿名の訪問者がいたとして、彼らのデータを見たい場合、彼らがガイドを見られるようにしたい場合、未知のユーザーに対する分析を有効にして、必要に応じてガイドの閲覧を許可することができます。

詳細については、匿名の訪問者をご覧ください。

表示したくないデータがある場合は?

テスト環境やステージング環境、内部ユーザーの間では、データが乱雑になることがあります。絶対に含めたくないデータがある場合は、除外することができます。Pendoでは、サーバー/ホストドメイン、IPアドレス、訪問者ID、アカウントIDに基づいてデータを非表示にすることができます。

URLの場合はどうなりますか?

Pendoは、アプリケーションの異なるページを区別するのにURLを使用しています。ユーザーがアプリケーション内を移動すると、URLは変更されますか?URLが変わらないのであれば、ロケーションAPIを実装することをお勧めします。

ウィンドウの再読み込みなしに訪問者やアカウントのデータが変更された場合はどうしたらいいですか?

オプションフィールドを変更したり、新しいビジター(Visitor)IDやアカウント(Account)IDでセッションを再初期化したりする関数があります。

訪問者に関連する追加のメタデータを変更する場合は、pendo.updateOptions()を呼び出してください。

訪問者IDやアカウントIDを変更する必要がある場合は、 pendo.identify()を呼び出し、初期化時と同様に訪問者IDやアカウントIDを渡します。

初期化関数と識別関数の詳細は、開発者向けドキュメントをご覧ください。

 

検証とトラブルシューティング

インストールが正しく行われていることを確認するにはどうすればよいですか?

インストールの状況や、特定のユーザーにメタデータが設定されているかどうかを確認するには、次のようにします。

  1. Pendoをインストールしたら、ブラウザのタブでアプリケーションを開きます。
  2. ユーザーとしてサインインします。
  3. ブラウザ開発者コンソールを開きます。
  4. pendo.validateInstall()とコンソールに入力してEnterを押します。
  5. 訪問者の識別可能なメタデータの情報が返されます。

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
}

 

Pendoのパフォーマンス

ウェブアプリケーションにPendoのJavascriptスニペットを追加すると、パフォーマンスにどのような影響がありますか?

PendoのJavascriptファイルは、AmazonのCloudfront CDNでホストされ、最先端のエッジキャッシングを利用して提供されています。javascriptのファイルは、わずか54Kバイトに縮小されており、非同期に読み込まれます。

データは、2分ごと、およびページが「アンロード」されたときに、各ユーザーのブラウザから当社のサーバーにSSLで安全に送信されます。データは送信前に圧縮され、1回の送信は2KB以下になります。

その他の情報については、セキュリティおよびプライバシーに関する記事をご覧ください。

オプションフラグ

JSスニペットにオプションのフラグを追加できます。詳細はこちらをご覧ください。

その他のよくある質問については、 こちらをご覧ください。