Pendoをシングルページウェブアプリケーションにインストールする

ほとんどのアプリでは、インストールスクリプトをコピーして共通のHTMLテンプレートにそのまま貼り付けることができます。

イベントの生データはすぐにPendoに渡されますが、Pendo UIで使用するためのデータ処理に最大2時間かかる場合があります。データの受信を開始すると、メールでお知らせします。

インストールプロセス

インストール方法は、同じインストールスクリプトを使用するマルチページインストールと似ていますが、展開方法が若干異なります。シングルページフレームワークでは、Pendoインストールスクリプトの最初の部分であるfunction(p,e,n,d,o){}がアプリケーションライブラリに追加されます。後半のpendo.initialize({})は、アプリケーションがPendoと共有するユーザー識別情報を持った時点でページに読み込まれます。

インストールスクリプトの詳細とPendoエージェントの更新方法については、Pendoエージェントを更新するを参照してください。

警告：ここに示されているすべてのスニペットは、コードの調整方法を説明するための例です。一意のAPIキーを使用してインストールスクリプトをコピーして変更する必要があるため、この記事から直接コピーしないようにしてください。

ステップ1. データマッピングを定義する

Pendoを初期化する際、以下のデータをPendoに渡します。

• 訪問者ID（必須）
• 訪問者のメタデータ（強く推奨）
• アカウントID（Pendo Feedbackに必須）
• アカウントのメタデータ（アカウントIDを渡す場合に強く推奨）

Pendoでデータをセグメント化する機能を強化するためには、有意義なメタデータを使用するだけでなく、共通した一意の識別子を使用していることを確認する目的で、インストールプロセス前に値の定義およびテストを行ってください。

警告：初回インストール後に訪問者IDとアカウントIDを更新すると、アナリティクスとセグメントに異常が生じ、ガイドが繰り返し表示される可能性があります。他のすべてのメタデータは、ほとんど中断することなく後に追加または削除できます。

ステップ2. index.htmlページにPendoを追加する

シングルページアプリケーション用のPendoインストールスクリプトは、2つの部分に分かれています。最初の部分はPendoエージェントを取り込み、index.htmlファイルまたはアプリケーション内のすべてのビューに常に存在する別のHTMLファイルに含める必要があります。

<script> 
(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'); 
})('YOUR_API_KEY_HERE');
</script>

ステップ3. Pendoを初期化する

シングルページアプリケーションでPendoを初期化するタイミングには、以下の2つの一般的なパターンがあります。

• アプリケーションのロード時に初期化し、ログイン後に訪問者を識別する。
• 訪問者がサインインした後にのみ初期化する。

重要：匿名IDでPendoを初期化し、後にpendo.initialize()呼び出しを使用して訪問者を識別すると、個別のイベントを持つ2つの訪問者ID（1つは匿名、もう1つは識別済み）がPendoに作成されます。これらのイベントは、エンドユーザーに対して1つのイベントストリームに統合されるわけではありません。

アプリケーションのロード時に初期化する

アプリケーションの最初のロード時にpendo.initialize()を呼び出し、特別な文字列（'VISITOR-UNIQUE-ID'）を訪問者IDに渡します。これにより、Pendoの匿名の訪問者IDが生成されます。

 pendo.initialize({
        visitor: {
            id: 
        }
    });

エンドユーザー（訪問者）がサインインした後、pendo.identify()を呼び出します。その後、識別された訪問者IDと、その訪問者とアカウントに関連するメタデータを渡します。

 pendo.identify({
        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,
        }
    });

訪問者がサインインした後に初期化する

エンドユーザー（訪問者）のサインインを待ってからpendo.initialize()を呼び出し、識別された訪問者IDと関連するメタデータを渡します。

 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,
        }
    });

ステップ4. インストールを確認する

インストールのステータスおよび特定ユーザーへのメタデータ設定を確認するには、以下の手順を実行します。

1. ブラウザタブでアプリケーションを開きます。
2. ユーザーとしてサインインします。
3. ブラウザ開発者コンソールを開きます。
4. コンソールにpendo.validateEnvironment()と入力してEnterキーを押します。

これにより、設定した訪問者IDとメタデータに関する情報が返されます。たとえば、次のようになります。

インストール後に正常に初期化されると、［サブスクリプション設定（Subscription Settings）］の［イベントの生データ（Raw Events）］タブで記録されたイベントの生データを確認できます。イベントの生データを表示するには、以下の手順を実行します。

1. 左側のメニューの下部から［設定（Settings）］>［サブスクリプション設定（Subscription Settings）］に移動します。
2. ［アプリケーション（Applications）」タブを開きます。
3. ［アプリケーション］リストからアプリケーションを見つけて開きます。
4. ［イベントの生データ］タブを開きます。