ドキュメントGenStudio拡張機能ガイド

SalesforceのExperience Selector MFE

最終更新日： 2026年5月14日

作成対象：

  • Developer

このトピックでは、お客様と実装者がSalesforce組織でGenStudio for Performance Marketing Experience Selector マイクロフロントエンド（MFE）をデプロイして実行する方法について説明します。 管理者の手順（コードなし）、開発者手順（デプロイと設定）、およびコンテンツセキュリティポリシー（CSP）などのセキュリティ関連の設定について説明します。

汎用MFE統合オプション、設定プロパティ、およびフレームワークの例については、GenStudio Experience Selector MFEを参照してください。

この統合で何ができるか

https://video.tv.adobe.com/v/3491080?captions=jpn&learn=on

Lightning Web コンポーネント （LWC） sfgsmfeは、Adobe Experience Selector UMD バンドルを読み込み、<dialog>にレンダリングして、ユーザーがGenStudio for Performance Marketingからエクスペリエンスを選択できるようにします。

統合では、次の操作も実行できます。

  • プレビューとデコード：​選択したペイロードをJSON、デコードされたHTML、およびサニタイズされたHTML プレビューとしてLWC内に表示します。
  • 電子メールテンプレート （オプション）: Salesforceの​電子メールテンプレートの作成 フローでは、Apex （EmailTemplateController.createEmailTemplate）を呼び出して、EmailTemplate レコード （HTML、件名、フォルダー）を挿入できます。

GenStudio for Performance Marketingのエクスペリエンスセレクタースクリプトは、一般的な実装のSalesforce静的リソースからではなく、experience.adobe.com上のAdobeのホスト URLから読み込まれます。

前提条件

  • Salesforce組織： メタデータをデプロイして​ Lightning App Builder ​を使用できるサンドボックスまたは実稼動組織。

  • Salesforce CLI: Salesforce CLI （sf）がインストールされ、認証されています。次に例を示します。

    code language-bash 
    sf org login web --alias <your-org-alias>

  • 権限： メールテンプレートを作成するユーザーには、組織のポリシーに従ってテンプレートを作成するためのターゲットメールテンプレートフォルダーと権限へのアクセス権が必要です。 Apexがwith sharingを実行しています。

  • Adobe / GenStudio:​お使いのAdobe IMS組織IDとSUSI clientIdは、お使いのAdobe設定と一致している必要があります（統合値の設定を参照）。

  • ブラウザー / CSP: Salesforceでは、https://experience.adobe.comからのスクリプトの読み込みが許可されている必要があります（​ コンテンツセキュリティポリシーとAdobe URLの設定を参照）。

パッケージのデプロイ（開発者）

プロジェクトはSalesforce DX レイアウトを使用しています。既定のパッケージ ディレクトリはforce-appです。

  1. プロジェクトのルートから、ソースをターゲット組織にデプロイします。

    code language-bash 
    sf project deploy start --source-dir force-app --target-org <your-org-alias>

  2. エラーなしでデプロイメントが完了することを確認します。

  • force-app/main/default/lwc/sfgsmfe — LWC バンドル （HTML、JS、CSS、meta）。
  • force-app/main/default/classes/EmailTemplateController.cls — テンプレート作成用Apex。

リポジトリに静的リソース （reactApp、sfgsmfe_react）を含めることもできます。 sfgsmfe.jsの現在のGenStudio for Performance Marketing ローダーは、standalone.jsのAdobe CDN URLを使用しています。これらの静的リソースは、実装を変更しない限り、そのロード パスに必要ありません。

Lightning ページへのコンポーネントの追加（管理者）

sfgsmfe コンポーネントは次の目的で公開されています：

  • Lightning アプリページ
  • ホームページ
  • レコードページ
  • タブ（カスタムタブのLightning ページ経由）

コンポーネントを追加するには：

  1. セットアップ​で、App Manager​を開きます。
  2. 新しいLightning アプリ​を作成します（または、拡張する既存のアプリを開きます）。
    新しいLightning アプリモーダル ​ {width="80%" modal="regular"}
  3. アプリを開き、編集​を選択します。
    Lightning アプリの編集モーダル ​ {width="80%" modal="regular"}
  4. 新しいページ​を作成（または既存のLightning ページを編集）。
    新しいページモーダル ​ {width="60%" modal="regular"}
  5. Lightning App Builder​で、sfgsmfe コンポーネントをレイアウトにドラッグします。
  6. 保存、アクティベート​し、ページを適切なLightning アプリ、プロファイル、およびアプリの表示に割り当てて、目的のユーザーが開けるようにします。

コンテンツセキュリティポリシーとAdobe URLの設定

LWCは、src ポイントの<script> タグをAdobeのUMD バンドルに挿入します。例：

https://experience.adobe.com/solutions/GenStudio-experience-selector-mfe/static-assets/resources/@genstudio/experience-selector/umd/standalone.js

組織のCSPおよびLightning セキュリティ設定に従って、このオリジンがスクリプト読み込みに許可されるように、Salesforceを設定する必要があります。

スクリプトの読み込みに失敗した場合：

  1. ブラウザーの開発者向けツールを開きます。
  2. ブロックされたリクエストまたはCSP違反については、コンソール​および​ネットワーク タブを確認してください。
  3. Lightningの現在のSalesforce ドキュメントに従って、https://experience.adobe.comの​信頼できるURL （およびSalesforce リリースの関連する設定）を追加または調整します。
    Salesforce CSP Trusted Sites {width="80%" modal="regular"}

統合値の設定（開発者/実装）

sfgsmfeのLWC JavaScriptにはいくつかの値が設定されています。 顧客は通常、環境ごとにこれらを置き換えます。

値
説明
folderId
新しいテンプレートが作成されるメールテンプレートのSalesforce フォルダーID （00l...）。 Apexには必須です。フォルダーが存在し、実行中のユーザーがアクセスできる必要があります。
imsOrg
Adobe IMS組織のIDがGenStudioExperienceSelector.renderExperienceSelectorWithSUSIに渡されました。
susiConfig.clientId
Experience Selector アプリ登録用のAdobe SUSI クライアント ID。
GenStudio script.src
UMD standalone.js バンドルのURL。Adobeが新しいパスを公開する場合に更新します。

メールテンプレートの作成は、GenStudio フィールドをテンプレートにマッピングします（例えば、experienceFieldsの件名）。 コンテンツモデルが異なる場合は、LWCでマッピングを調整します。

renderExperienceSelectorWithSUSIと関連オプションについて詳しくは、「エクスペリエンスセレクターMFE」トピックの設定プロパティ ​を参照してください。

Apex: EmailTemplateController

EmailTemplateController.createEmailTemplateは通常：

  • テンプレート名、フォルダーID、空でないHTMLを検証します。
  • EmailTemplateを作成し、TemplateType = 'custom'、HtmlValue、Subject、Bodyおよびフォルダーの割り当てを指定します。
  • AuraHandledExceptionを通じてLWCにエラーを表示します。

運用のヒント：

  • 組織内のDeveloperNameの一意性と命名ルールを尊重します。
  • フォルダーIDと、ユーザーがそのフォルダーにEmailTemplate件のレコードを作成できることを確認します。
  • DMLが正確なエラーを取得できない場合は、Salesforceのデバッグログを使用します。

検証チェックリスト

デプロイメントと設定の後、このリストの項目を確認して、統合を確実に検証します。

  1. デプロイメントはエラーなしで完了します。
  2. ユーザーはsfgsmfeを含むLightning ページを開き、エクスペリエンスセレクターUIを確認できます。
  3. コンポーネントに読み込みエラーが表示されません。ネットワーク タブは、standalone.jsに対してHTTP 200を返します。
  4. GenStudio エクスペリエンスを選択​すると、セレクターが開き、選択コールバックが実行されます。
  5. メールテンプレートの作成​は、そのフローを使用すると成功し、テンプレートは​ 設定 ​の設定済みフォルダーの下に表示されます。

関連トピック

recommendation-more-help
genstudio-for-performance-marketing-help-extensibility