Selettore di esperienze MFE in Salesforce

In questo argomento viene illustrato come i clienti e i responsabili dell’implementazione possono distribuire ed eseguire il micro front-end (MFE) di GenStudio for Performance Marketing Experience Selector in un’organizzazione Salesforce. Vengono descritti i passaggi dell’amministratore (senza codice), i passaggi dello sviluppatore (distribuzione e configurazione) e le impostazioni relative alla sicurezza, ad esempio Content Security Policy (CSP).

Per opzioni di integrazione MFE generiche, proprietà di configurazione ed esempi di framework, vedi MFE del selettore esperienza GenStudio.

Funzionamento di questa integrazione

Il componente Web Lightning (LWC) sfgsmfe carica il bundle UMD di Adobe Experience Selector ed esegue il rendering in un <dialog> in modo che gli utenti possano scegliere un’esperienza da GenStudio for Performance Marketing.

L’integrazione può anche:

  • Anteprima e decodifica: Visualizza il payload selezionato come JSON, HTML decodificato e un’anteprima HTML bonificata all’interno di LWC.
  • Modelli e-mail (facoltativi): Un flusso Crea modello e-mail in Salesforce può chiamare Apex (EmailTemplateController.createEmailTemplate) per inserire un record EmailTemplate (HTML, oggetto e cartella).

Lo script del selettore dell’esperienza per GenStudio for Performance Marketing è caricato dall’URL ospitato di Adobe in experience.adobe.com, non da una risorsa statica Salesforce nell’implementazione tipica.

Prerequisiti

  • Organizzazione Salesforce: organizzazione sandbox o di produzione in cui è possibile distribuire metadati e utilizzare App Builder Lightning.

  • Salesforce CLI: Salesforce CLI (sf) è installato e autenticato, ad esempio:

    code language-bash
    sf org login web --alias <your-org-alias>
    
  • Autorizzazioni: gli utenti che creano modelli e-mail devono accedere alla cartella dei modelli e-mail di destinazione e disporre dei diritti per creare modelli in base ai criteri dell’organizzazione. Apex esegue with sharing.

  • Adobe / GenStudio: l’ID organizzazione Adobe IMS e SUSI clientId devono corrispondere alla configurazione Adobe (vedi Configurare i valori di integrazione).

  • Browser/CSP: Salesforce deve consentire il caricamento di script da https://experience.adobe.com (vedere Configurare i criteri di sicurezza del contenuto e l’URL di Adobe).

Distribuire il pacchetto (sviluppatore)

Il progetto utilizza il layout Salesforce DX. La directory predefinita del pacchetto è force-app.

  1. Dalla directory principale del progetto, distribuisci l’origine all’organizzazione di destinazione:

    code language-bash
    sf project deploy start --source-dir force-app --target-org <your-org-alias>
    
  2. Conferma che la distribuzione venga completata senza errori.

  • force-app/main/default/lwc/sfgsmfe - Bundle LWC (HTML, JS, CSS, meta).
  • force-app/main/default/classes/EmailTemplateController.cls — Apice per la creazione del modello.

L’archivio può contenere anche risorse statiche (reactApp, sfgsmfe_react). Il caricatore GenStudio for Performance Marketing corrente in sfgsmfe.js utilizza l’URL CDN di Adobe per standalone.js; tali risorse statiche non sono necessarie per il percorso di caricamento a meno che non si modifichi l’implementazione.

Aggiungere il componente a una pagina Lightning (admin)

Il componente sfgsmfe è esposto per:

  • Pagine app fulmini
  • Home page
  • Registra pagine
  • Schede (tramite una pagina Lightning in una scheda personalizzata)

Per aggiungere il componente:

  1. In Setup, aprire App Manager.
  2. Crea una nuova app Lightning (o apri un’app esistente che desideri estendere).
    Nuova app Lightning modale {width="80%" modal="regular"}
  3. Apri l’app e seleziona Modifica.
    Modifica modale app fulmini {width="80%" modal="regular"}
  4. Crea una nuova pagina (o modifica una pagina Lightning esistente).
    Finestra modale Nuova pagina {width="60%" modal="regular"}
  5. In Lightning App Builder, trascinare il componente sfgsmfe nel layout.
  6. Salva, Attiva e assegna la pagina all’app Lightning, ai profili e alla visibilità dell’app corretti in modo che gli utenti desiderati possano aprirla.

Configurare i criteri sulla sicurezza dei contenuti e l’URL di Adobe

LWC inserisce un tag <script> il cui src punta al bundle UMD di Adobe, ad esempio:

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

Devi configurare Salesforce in modo che questa origine sia consentita per il caricamento dello script in base ai CSP e alle impostazioni di sicurezza Lightning della tua organizzazione.

Se lo script non viene caricato:

  1. Apri gli strumenti per sviluppatori del browser.
  2. Controlla le schede Console e Rete per individuare richieste bloccate o violazioni CSP.
  3. Aggiungi o regola URL attendibili (ed eventuali impostazioni correlate per la versione di Salesforce in uso) per https://experience.adobe.com, seguendo l’attuale documentazione di Salesforce per Lightning.
    Siti attendibili CSP Salesforce {width="80%" modal="regular"}

Configurare i valori di integrazione (sviluppatore/implementazione)

Diversi valori sono impostati nel JavaScript LWC per sfgsmfe. In genere i clienti li sostituiscono a seconda dell’ambiente.

Valore
Descrizione
folderId
ID cartella Salesforce (00l...) per i modelli e-mail in cui vengono creati nuovi modelli. Obbligatorio per Apex; la cartella deve esistere ed essere accessibile all’utente in esecuzione.
imsOrg
Identificatore organizzazione Adobe IMS passato in GenStudioExperienceSelector.renderExperienceSelectorWithSUSI.
susiConfig.clientId
ID client Adobe SUSI per la registrazione all’app del selettore esperienza.
GenStudio script.src
URL del bundle UMD standalone.js; aggiornalo se Adobe pubblica un nuovo percorso.

La creazione del modello di posta elettronica associa i campi di GenStudio al modello, ad esempio l’oggetto di experienceFields. Regola le mappature nell’LWC se il modello di contenuto è diverso.

Per informazioni dettagliate su renderExperienceSelectorWithSUSI e sulle opzioni correlate, vedere Proprietà di configurazione nell’argomento MFE del selettore esperienza.

Apex: EmailTemplateController

EmailTemplateController.createEmailTemplate in genere:

  • Convalida il nome del modello, l’ID della cartella e il HTML non vuoto.
  • Crea un EmailTemplate con TemplateType = 'custom', HtmlValue, Subject, Body e assegnazione cartella.
  • Rileva gli errori in LWC tramite AuraHandledException.

Suggerimenti operativi:

  • Rispetta le regole di univocità e denominazione di DeveloperName nell’organizzazione.
  • Confermare l’ID della cartella e che l’utente possa creare EmailTemplate record in tale cartella.
  • Utilizza i registri di debug di Salesforce quando DML non riesce a recuperare l’errore esatto.

Elenco di controllo per la convalida

Conferma gli elementi in questo elenco dopo la distribuzione e la configurazione per una convalida sicura dell’integrazione:

  1. La distribuzione viene completata senza errori.
  2. Gli utenti possono aprire la pagina Lightning che contiene sfgsmfe e visualizzare l’interfaccia utente di Selettore esperienza.
  3. Il componente non mostra un errore di caricamento. La scheda Rete restituisce HTTP 200 per standalone.js.
  4. Seleziona un’esperienza GenStudio apre il selettore e i callback di selezione vengono eseguiti.
  5. Crea modello e-mail ha esito positivo quando si utilizza tale flusso e il modello viene visualizzato nella cartella configurata in Configurazione.

Vedi anche

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