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

最終更新日:

この記事では、標準的なデフォルトを使用して、シングルページのウェブアプリケーションにPendoをインストールする方法をまとめています。構成オプションの詳細については、ナレッジベースの[インストール(Installation)]セクションを参照してください。

アプリケーションがマルチページフレームワークで構築されている場合は、Pendoをマルチページウェブアプリケーションにインストールするを参照してください。

概要

Pendoのプロダクト分析機能は、シングルページのアプリケーションフレームワークに特に役立ちます。従来のウェブ分析ツールは、ページ閲覧数に合わせて作られているため、このような環境では苦労します。シングルページのフレームワークでは、単一のページ閲覧にさまざまなユーザー操作が発生します。

こういった問題は開発チームで回避できますが、分析ソリューションが適切に追跡されていることを確認するために作業負荷がかかります。Pendoは、ページ上のすべてのユーザー操作をキャプチャし、特定のユーザーに帰属させることで、これらの課題を回避します。これを実行するには、アプリケーションにPendoインストールスクリプトを挿入する必要があります。

インストールスクリプト

Pendoは、インストールスクリプトをアプリケーションの全ページに含めることでアプリケーションにインストールされます。インストールスクリプトは、短いJavaScriptコードブロック(スニペット)で構成され、JavaScriptファイル(pendo.js)であるPendoエージェントを安全かつ非同期的に読み込みます。インストールスクリプトには、一意のAPIキーと、Pendoエージェントのアクティベーションに必要な初期化メソッドが含まれています。初期化メソッドは、訪問者IDやアカウントIDとして渡す値、およびPendoに提供するメタデータを決定します。Pendoのインストールの主なコンポーネントの詳細については、インストールスクリプトを使用したPendoの実装に関する開発者ガイドを参照してください。

Pendo管理者は、Pendoの[インストール設定(Install Settings)]でインストールスクリプトを見つけることができます。

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

ほとんどのアプリでは、インストールスクリプトをコピーして共通の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とメタデータに関する情報が返されます。

Pendoのインストールを確認する段階的な手順については、Pendo Academyに掲載している動画をご視聴ください。

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

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

トラックイベントやメタデータなどの高度な設定については、トラックイベントの設定訪問者とアカウントのメタデータ設定、PendoエージェントAPIのドキュメントを参照してください。

この記事は役に立ちましたか?
11人中1人がこの記事が役に立ったと言っています