1. Pendoヘルプセンター
  2. 拡張機能による導入
  3. その他の構成

Salesforceコンポーネントを使用して訪問者とメタデータを特定する

最終更新日:

IT部門が管理する標準的な展開ではなく、JavaScriptコードを介してウェブページから訪問者IDやメタデータを取り込むことができます。

これには、SalesforceなどのカスタムのJavaScriptコードをサポートするアプリが1つ以上必要となります。この記事では、Salesforce LightningでカスタムJavaScriptコードスニペットを実装する方法を説明し、サンプルのコードをいくつかご紹介します。

前提条件

Salesforceコンポーネントを使用して訪問者を特定するには、次の条件が必要です。

  • ブラウザにPendo Launcherの拡張機能をインストールしていること。拡張機能をサポートするすべてのブラウザが対象です。詳しくは、Pendo Launcherを導入するためのITガイドをご覧ください。
  • Pendoサブスクリプションの管理者ユーザーであること。
  • Salesforce Lightning環境を利用していること。
  • 開発者がSalesforce Lightning環境にアクセスできること。

プロセス概要

Pendo LauncherにSalesforce Lightningコンポーネントを設定するには、主に次の3つのステップがあります。

  1. Browser Scripting識別用にPendo Launcherを設定します。
  2. カスタムSalesforce Lightningコンポーネントを設定します。
  3. コンポーネントをSalesforceページに追加します。

ステップ1：Pendo Launcherを設定する

  1. Pendoで、［設定（Settings）］>［サブスクリプション設定（Subscription Settings）］に移動します。
  2. ［拡張機能の設定（Extension settings）］で、［ブラウザスクリプトを使用して訪問者メタデータを設定する（Set visitor metadata through browser scripting）］を選択します。［識別アプリのURL（Identification app URL）］フィールドは空白のままにします。

    SubSettings_ExtensionSettings_BrowserScripting.png
  3. ブラウザのツールバーで［Pendo Launcher］拡張機能を右クリックし、［デバッグ情報を表示（Show Debug Info）］を選択します。
  4. 表示されるモーダルで、［コンフィギュレーション情報を表示（Show Configuration Info）］を開き、［拡張機能の設定を再取得（Re-fetch Extension Settings）］を選択します。
  5. モーダルの上部に匿名化されたPendo IDが表示されていることを確認します。通常、IDの形式は_PENDO_T_xxxxxxxxxxxです。

    PendoLauncher.png

これで、Pendo Launcherは、Salesforce Lightningコンポーネントからデータを取り込む準備ができました。

ステップ2：カスタムSalesforce Lightningコンポーネントを設定する

  1. Salesforceで、右上の歯車アイコンを開き、メニューから［開発者コンソール（Developer Console）］を選択します。このオプションを表示するには、Salesforce管理者である必要があります。

    DevConsole.png

  2. ［開発者コンソール］で、［ファイル（File）］>［新規（New）］>［Lightningコンポーネント（Lightning Component）］を選択します。新しいコンポーネントの名前と説明を要求するモーダルが表示されます。

    LightningComponent.png

  3. 「pendo_identify」のように、わかりやすい名前を入力します。

    Pendo_identify.png

  4. モーダルの右下にある［送信（Submit）］を選択します。新しいコンポーネントは、前のステップで指定したコンポーネント名を使用して、自動的に.cmpファイルを生成します。この例では、ファイル名は「pendo_identify.cmp」になります。
  5. 右側のサイドバーで、［コントローラー（CONTROLLER）］および［デザイン（DESIGN）］とラベル付けされた行を選択します。これにより、controller.jsファイルと.designファイルが生成されます。ファイルが生成されると、選択した行が青色で強調表示され、現在アクティブなファイルがオレンジ色で強調表示されます。

    controller_and_design_cmp.png

  6. 次のコードを.designファイルにそのまま入力します。 
    <design:component>
    <design:attribute name="formattedJSON" label="User" />
    </design:component>

  7. 次のコードを.cmpファイルに入力します。フィールドのリスト（Id, LastName, FirstName, Email）は、Pendoに渡されるSalesforceユーザーオブジェクトフィールドを表します。このリストには、任意の数のフィールドを追加できます。

    Salesforceによってユーザーオブジェクトについて文書化されているフィールドは、Salesforce環境に入力されている場合に有効です。Salesforceユーザーオブジェクトの詳細については、Salesforce開発者向けドキュメントのユーザーの記事を参照してください。Salesforceの管理者は、ユーザーのデータを含むフィールドに関する詳細情報を持っている場合があります。

    <aura:component implements="lightning:backgroundUtilityItem,flexipage:availableForAllPageTypes" access="global" > 

    <aura:attribute     name="currentUser" type="User"/>

    <aura:attribute name="formattedJSON" type="String" access="global" />
    <force:recordData aura:id="record" recordId="{!$SObjectType.CurrentUser.Id}" fields="Id,LastName,FirstName,Email" targetFields="{!v.currentUser}"/>

    <aura:handler name="change" value="{!v.currentUser}" action="{!c.formatJSON}" />
    </aura:component>
  8. 次のコードをcomponentController.jsファイルに入力します。const idField = 'Email'という行は、どのユーザーオブジェクトフィールドを訪問者IDとしてPendoに渡すかを指定します。訪問者の特定のために訪問者のメールアドレスを使用しない場合は、Emailを.componentファイル（ステップ7）で指定したリストの任意のフィールドに変更することができます。 
    ({
        formatJSON: function(component, event, handler) {
    const idField = 'Email'; 

    var visitor = JSON.parse(JSON.stringify(component.get("v.currentUser")));
    visitor.id = visitor[idField];
    delete visitor[idField];

    console.log("user object to pendo:" + JSON.stringify(visitor));

    var sfdc_url = window.location.href;
    var url_arr = sfdc_url.split("/");
    var target = url_arr[0] + "//" + url_arr[2];
    window.postMessage({
    type: 'pendo-extension-identify-visitor',
    identity: { visitor }
    }, '*');
        }
    })
  9. ［ファイル］>［保存（Save）］に移動して、コンポーネントの作成を終了します。
  10. ユーザーが定期的にアクセスする可能性が高いページのリストを作成します。ここにコンポーネントを追加して、訪問者の拡張機能を初期化し、現在のメタデータで定期的に更新できるようにします。デフォルトのSalesforceインスタンスの場合、Pendoは次のページへのインストールを推奨します。ただし、最適なページは、各組織のSalesforceの設定によって異なる場合があります。
    • ホームページ
    • アカウントレコードページ
    • 連絡先レコードページ
    • リードレコードページ
    • 商談相手レコードページ
  11. 前のステップで選択した各ページについて、次のセクションの手順に従います。

ステップ3：コンポーネントをページに追加する

  1. ページを表示してSalesforceの右上にある歯車アイコンを開き、［ページを編集（Edit Page）］を選択します。これにより、ビルダービューが開きます。
  2. ビルダーで、左側のサイドバーからカスタムコンポーネントを見つけ、このコンポーネントをページ上の任意の場所にドラッグします。コンポーネントは、小さな空の長方形として表示されます。これはビルダービューでのみ表示されます。ページをライブ表示すると、コンポーネントは非表示になります。

    CustomComponent.png
  3. ページを保存し、標準（非ビルダー）ビューに戻ります。
  4. ページの任意の場所を右クリックし、［検証（Inspect）］を選択します。
  5. 開いたパネルで、［コンソール（Console）］を選択します。コンポーネントファイルで指定したデータフィールドを持つuser object to pendoとラベル付けされた行が表示されます。コンソールログが表示されれば、このページのコンポーネントは正しく設定されています。
  6. Pendo Launcher拡張機能を右クリックし、［デバッグ情報を表示（Show Debug Info）］を選択して、データがPendo Launcherによって取り込まれていることを確認します。デバッグモーダルの上部にあるID値は、Salesforceから提供された値です。

    PendoLauncher_with_Salesforce_ID.png
  7. コンポーネントを展開するページごとに、このプロセスを繰り返します。

コンポーネントは、Salesforceのすべてのページにある必要はありません。一度ユーザーを特定すれば、SalesforceのすべてのページやPendo Launcherが動作している他のアプリでもユーザーを特定することができます。

 

 

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

このセクションの記事