How Can We Help?

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

Last Updated:

IT部門が管理する標準的な導入ではなく、JavaScriptコードを介してウェブページから訪問者IDやメタデータを取り込むことができます。詳しくは、Pendo Launcher用のカスタムメタデータを展開するをご覧ください。 

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

前提条件

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

  • Pendo Adoptサブスクリプションを利用していること。
  • ブラウザに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）］>［高度な設定（Advanced）］に移動します。

2. ［Browser Scriptingを使用して訪問者メタデータを設定する（Set Visitor Metadata Through Browser Scripting）］をオンに切り替えます。［識別アプリのURL（Identification App URL）］フィールドは空白のままにします。

Adopt_Advanced_SetVisitor.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が動作している他のアプリでもユーザーを特定することができます。

 

 

関連記事