この記事では、標準的なデフォルト機能を使用して、マルチページのウェブアプリケーションにPendoをインストールする方法をまとめています。構成オプションの詳細については、ナレッジベースのインストールセクションを参照してください。
アプリケーションがシングルページフレームワークで構築されている場合は、Pendoをシングルページウェブアプリケーションにインストールするを参照してください。
インストールスクリプト
Pendoは、インストールスクリプトをアプリケーションの全ページに含めることでアプリケーションにインストールされます。インストールスクリプトは、短いJavaScriptコードブロック（スニペット）で構成され、JavaScriptファイル（pendo.js）であるPendoエージェントを安全かつ非同期的に読み込みます。インストールスクリプトには、一意のAPIキーと、Pendoエージェントのアクティベーションに必要な初期化メソッドが含まれています。初期化メソッドは、訪問者IDやアカウントIDとして渡す値、およびPendoに提供するメタデータを決定します。Pendoのインストールの主なコンポーネントの詳細については、インストールスクリプトを使用したPendoの実装に関する開発者ガイドを参照してください。
Pendo管理者は、Pendoの［インストール設定（Install Settings）］でインストールスクリプトを見つけることができます。
- 左側のメニューの下部から［設定（Settings）］>［サブスクリプション設定（Subscription Settings）］に移動します。
- ［アプリケーション（Applications）」タブを開きます。
- ［アプリケーション］リストからアプリケーションを見つけて開きます。
- ［インストール設定（Install Settings）］タブを開きます。
ほとんどのアプリでは、インストールスクリプトをコピーして共通のHTMLテンプレートにそのまま貼り付けることができます。
イベントの生データはすぐにPendoに渡されますが、Pendo UIで使用するためのデータ処理に最大2時間かかる場合があります。データの受信を開始すると、メールでお知らせします。
ステップ1. データマッピングを定義する
Pendoを初期化する際、以下のデータをPendoに渡します。
- 訪問者ID（必須）
- 訪問者のメタデータ（強く推奨）
- アカウントID（Pendo Feedbackに必須）
- アカウントのメタデータ（アカウントIDを渡す場合に強く推奨）
Pendoでデータをセグメント化する機能を強化するためには、有意義なメタデータを使用するだけでなく、共通した一意の識別子を使用していることを確認する目的で、インストールプロセス前に値の定義およびテストを行ってください。
警告：初回インストール後に訪問者IDとアカウントIDを更新すると、アナリティクスとセグメントに異常が生じ、ガイドが繰り返し表示される可能性があります。他のすべてのメタデータは、ほとんど中断することなく後に追加または削除できます。
ステップ2. インストールスクリプトをアプリケーションに追加する
マルチページアプリケーション用のPendoインストールスクリプトは通常、単一のコードブロックです。上のパートはPendoのエージェントを取り込みます。
<script>
(function(apiKey){
(p,e,n,d,o){var v,w,x,y,z;o=p[d]=p[d]||{};o._q=o._q||[];
v=['initialize','identify','updateOptions','pageLoad','track'];for(w=0,x=v.length;w<x;++w)(function(m){
o[m]=o[m]||function(){o._q[m===v[0]?'unshift':'push']([m].concat([].slice.call(arguments,0)));};})(v[w]);
y=e.createElement(n);y.async=!0;y.src='https://cdn.pendo.io/agent/static/'+apiKey+'/pendo.js';
z=e.getElementsByTagName(n)[0];z.parentNode.insertBefore(y,z);})(window,document,'script','pendo');
下のパートはPendoを初期化します。これにより、Pendoを介したアナリティクスの収集やガイドの配信が可能になります。ここで、ステップ1で特定した変数をIDおよび関連するメタデータに渡します。
pendo.initialize({
visitor: {
id:
},
});
})('<YOUR_API_KEY_HERE>');
ステップ3. インストールを確認する
インストールのステータスおよび特定ユーザーへのメタデータ設定を確認するには、以下の手順を実行します。
- ブラウザタブでアプリケーションを開きます。
- ユーザーとしてサインインします。
- ブラウザ開発者コンソールを開きます。
- コンソールに
pendo.validateEnvironment()と入力してEnterキーを押します。
これにより、設定した訪問者IDとメタデータに関する情報が返されます。たとえば、次のようになります。
Pendoのインストールを確認する段階的な手順については、Pendo Academyに掲載している動画をご視聴ください。
インストール後に正常に初期化されると、［サブスクリプション設定（Subscription Settings）］の［イベントの生データ（Raw Events）］タブで記録されたイベントの生データを確認できます。イベントの生データを表示するには、以下の手順を実行します。
- 左側のメニューの下部から［設定（Settings）］>［サブスクリプション設定（Subscription Settings）］に移動します。
- ［アプリケーション（Applications）」タブを開きます。
- ［アプリケーション］リストからアプリケーションを見つけて開きます。
- ［イベントの生データ］タブを開きます。
トラックイベントやメタデータなどの高度な設定については、トラックイベントの設定、訪問者とアカウントのメタデータ設定、PendoエージェントAPIのドキュメントを参照してください。
インストールスクリプトの例
Pendoを実行するアプリケーションの全ページに追加されるフルインストールスクリプトの例は、以下のとおりです。
(function (apiKey) {
(function(p,e,n,d,o){var v,w,x,y,z;o=p[d]=p[d]||{};o._q=o._q||[]; v=['initialize','identify','updateOptions','pageLoad','track'];for(w=0,x=v.length;w<x;++w)(function(m){ o[m]=o[m]||function(){o._q[m===v[0]?'unshift':'push']([m].concat([].slice.call(arguments,0)));};})(v[w]); y=e.createElement(n);y.async=!0;y.src='https://cdn.pendo.io/agent/static/'+apiKey+'/pendo.js'; z=e.getElementsByTagName(n)[0];z.parentNode.insertBefore(y,z);})(window,document,'script','pendo');
pendo.initialize({
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,
}
});
})('<YOUR_API_KEY_HERE>');