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 recordEmailTemplate(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
clientIddevono 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.
-
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> -
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:
- In Setup, aprire App Manager.
- Crea una nuova app Lightning (o apri un’app esistente che desideri estendere).
{width="80%" modal="regular"}
- Apri l’app e seleziona Modifica.
{width="80%" modal="regular"}
- Crea una nuova pagina (o modifica una pagina Lightning esistente).
{width="60%" modal="regular"}
- In Lightning App Builder, trascinare il componente sfgsmfe nel layout.
- 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:
- Apri gli strumenti per sviluppatori del browser.
- Controlla le schede Console e Rete per individuare richieste bloccate o violazioni CSP.
- 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.
{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.
folderId00l...) 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.imsOrgGenStudioExperienceSelector.renderExperienceSelectorWithSUSI.susiConfig.clientIdscript.srcstandalone.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
EmailTemplateconTemplateType = 'custom',HtmlValue,Subject,Bodye 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
EmailTemplaterecord 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:
- La distribuzione viene completata senza errori.
- Gli utenti possono aprire la pagina Lightning che contiene
sfgsmfee visualizzare l’interfaccia utente di Selettore esperienza. - Il componente non mostra un errore di caricamento. La scheda Rete restituisce HTTP 200 per
standalone.js. - Seleziona un’esperienza GenStudio apre il selettore e i callback di selezione vengono eseguiti.
- Crea modello e-mail ha esito positivo quando si utilizza tale flusso e il modello viene visualizzato nella cartella configurata in Configurazione.