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. [拡張APIキー(Extension API Key)]で、[Browser Scriptingを使用して訪問者メタデータを設定する(Set Visitor Metadata Through Browser Scripting)]をオンにします。[識別アプリのURL(Identification App URL)]フィールドは空白のままにします。
  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人がこの記事が役に立ったと言っています