Giorgio Gnoli – Consulente CRM e Temporary Manager

Menu
Iscriviti

SFMC Tips #321: Tab personalizzate per l’anteprima email in MC Next

Di /

Nelle Growth & Advanced Edition di Marketing Cloud Next è possibile aggiungere tab personalizzate alla schermata Preview and Test per i contenuti email, utilizzando i Lightning Web Components (il framework Salesforce per creare schermate, pulsanti, tabelle, grafici e altri componenti dell’interfaccia utente).

In questo articolo utilizzeremo Agentforce Vibes IDE (la versione browser-based di Visual Studio Code) per creare una tab Content Check che verifica i seguenti tre elementi:

  • Lunghezza dell’oggetto email
  • Se il preheader è vuoto e il relativo conteggio caratteri
  • Se è presente un link al Preference Center

Una volta completata l’implementazione, la seguente tab verrà aggiunta alla schermata di anteprima di Marketing Cloud Next:

Preview | Test | Content Check

Quando si apre la tab Content Check, vengono mostrati i risultati della validazione in base all’email attualmente in anteprima.

Nota: Agentforce Vibes IDE è disponibile solo in ambienti SDO, Developer Edition o Sandbox per le edition supportate. Non può essere utilizzato in una org di produzione standard.

Passaggi di configurazione

1. Attivare Agentforce Vibes IDE

Per prima cosa, avviate Agentforce Vibes IDE da Salesforce Setup.

1. Apri Agentforce Vibes

Accedi a Salesforce, clicca sull’icona a forma di ingranaggio in alto a destra, apri Setup e seleziona Agentforce Vibes.

2. Accetta i Termini di Utilizzo

Al primo avvio di Agentforce Vibes IDE, vengono mostrati i Termini di Utilizzo.

Clicca su Accept per iniziare a utilizzare Agentforce Vibes IDE. Questi termini si applicano non solo ad Agentforce Vibes IDE, ma anche agli strumenti Salesforce DX come DevOps Center e DX Inspector.

Attendi qualche minuto finché l’ambiente non termina il caricamento.

In questo esempio, costruiremo tutto senza l’assistenza di Agentforce, poiché molti ambienti non possono attivare la feature Agentforce evidenziata nel riquadro rosso qui sotto. Se il tuo ambiente la supporta, sentiti libero di utilizzarla.

Cliccando su Enable Agentforce si attiva l’assistente di sviluppo AI in Agentforce Vibes, che consente di utilizzare le funzionalità di generazione e revisione del codice basate su AI.

3. Avvia Agentforce Vibes IDE

Nel browser si aprirà un ambiente di sviluppo simile a Visual Studio Code.

Suggerimento: Al primo avvio potrebbe apparire un errore del tipo “Apex Language Server Extension couldn’t create connection to server” nell’angolo in basso a destra. In tal caso, premi Ctrl + Shift + P e lancia Developer: Reload Window: questo di solito risolve il problema.

2. Creare un progetto Salesforce

Ora creiamo un progetto Salesforce in cui archiviare il Lightning Web Component.

1. Apri la Command Palette

In Agentforce Vibes IDE, premi:

  • Windows: Ctrl + Shift + P
  • Mac: Command + Shift + P

Comparirà la Command Palette nella parte superiore dello schermo.

2. Crea un progetto Salesforce

Digita il seguente comando nella Command Palette:

SFDX: Create Project

Seleziona il tipo di progetto standard.

Come nome del progetto, inserisci ad esempio:

MarketingCloudNextPreviewExtension

Scegli una posizione in cui salvare il progetto: verrà quindi creato il progetto Salesforce.

Suggerimento: Se avvii Agentforce Vibes IDE direttamente da Salesforce Setup, l’org Salesforce target viene riconosciuta automaticamente.

Se chiudi la schermata e in seguito vuoi tornare al progetto MarketingCloudNextPreviewExtension, puoi riaprirlo da Open File o Recent.

(Riferimento) Fai generare l’LWC ad Agentforce

Se preferisci ricorrere all’assistenza AI, inserisci il seguente prompt in Agentforce Vibes:

Create a Lightning Web Component to add to the Preview and Test modal in Marketing Cloud Next.

Name the component contentCheckTab.

The requirements are as follows.

Receive data from Marketing Cloud Next through @api previewData
Display previewData.emailSubject as the email subject
Display an error if the email subject is blank
Display the number of characters in the email subject
Display a warning if the email subject exceeds 50 characters
Display previewData.emailPreheader as the preheader
Display an error if the preheader is blank
Display the number of characters in the preheader
Display a warning if the preheader exceeds 100 characters
Check whether previewData.content contains a link to the preference center
Display an error if the link is not found
Finally, display an overall result of either PASS or Needs Revision
Use Salesforce Lightning Design System classes
Do not use Apex
Do not use external APIs
Configure the lightning__dynamicComponent capability
Ensure that no JavaScript errors occur if null or undefined is passed
Create the following three files

contentCheckTab.html
contentCheckTab.js
contentCheckTab.js-meta.xml

Before creating the files, explain the implementation approach, and then create the files.

Agentforce esamina i requisiti e genera i file necessari.

3. Creare i file manualmente

In questo esempio, creeremo manualmente le cartelle e i file all’interno della directory lwc come segue:

force-app/
└── main/
    └── default/
        └── lwc/
            └── contentCheckTab/（<--- Cartella）
                ├── contentCheckTab.html（<--- File HTML）
                ├── contentCheckTab.js（<--- File JS）
                └── contentCheckTab.js-meta.xml（<--- File XML）

I template per ciascun file sono riportati di seguito.

contentCheckTab.html

<template>
    <div class="slds-p-around_medium">
        <div class="slds-text-heading_medium slds-m-bottom_medium">
            Content Check
        </div>

        <template if:true={hasPreviewData}>
            <section class="slds-box slds-m-bottom_medium">
                <h2 class="slds-text-heading_small">Subject</h2>
                <p class="slds-m-top_x-small">{subjectDisplay}</p>
                <p>{subjectLength} characters</p>
                <p class={subjectStatusClass}>{subjectStatus}</p>
            </section>

            <section class="slds-box slds-m-bottom_medium">
                <h2 class="slds-text-heading_small">Preheader</h2>
                <p class="slds-m-top_x-small">{preheaderDisplay}</p>
                <p>{preheaderLength} characters</p>
                <p class={preheaderStatusClass}>{preheaderStatus}</p>
            </section>

            <section class="slds-box slds-m-bottom_medium">
                <h2 class="slds-text-heading_small">
                    Preference Center
                </h2>
                <p class={preferenceCenterStatusClass}>
                    {preferenceCenterStatus}
                </p>
            </section>

            <section class="slds-box">
                <h2 class="slds-text-heading_small">Overall Result</h2>
                <p class={overallStatusClass}>{overallStatus}</p>
            </section>
        </template>

        <template if:false={hasPreviewData}>
            <div class="slds-text-color_error">
                Unable to retrieve preview data.
            </div>
        </template>
    </div>
</template>

contentCheckTab.js

import { LightningElement, api } from "lwc";

const SUBJECT_MAX_LENGTH = 50;
const PREHEADER_MAX_LENGTH = 100;

export default class ContentCheckTab extends LightningElement {
    @api previewData;

    get hasPreviewData() {
        return this.previewData != null;
    }

    get subject() {
        return this.previewData?.emailSubject?.trim() || "";
    }

    get preheader() {
        return this.previewData?.emailPreheader?.trim() || "";
    }

    get content() {
        return this.previewData?.content || "";
    }

    get subjectDisplay() {
        return this.subject || "Not provided";
    }

    get preheaderDisplay() {
        return this.preheader || "Not provided";
    }

    get subjectLength() {
        return Array.from(this.subject).length;
    }

    get preheaderLength() {
        return Array.from(this.preheader).length;
    }

    get isSubjectValid() {
        return (
            this.subjectLength > 0 &&
            this.subjectLength <= SUBJECT_MAX_LENGTH
        );
    }

    get isPreheaderValid() {
        return (
            this.preheaderLength > 0 &&
            this.preheaderLength <= PREHEADER_MAX_LENGTH
        );
    }

    get hasPreferenceCenter() {
        const content = this.content.toLowerCase();

        const preferenceCenterPatterns = [
            "preference",
            "subscription",
            "unsubscribe",
            "manage preferences"
        ];

        return preferenceCenterPatterns.some((pattern) =>
            content.includes(pattern)
        );
    }

    get subjectStatus() {
        if (this.subjectLength === 0) {
            return "The subject is required.";
        }

        if (this.subjectLength > SUBJECT_MAX_LENGTH) {
            return `The subject exceeds ${SUBJECT_MAX_LENGTH} characters.`;
        }

        return "Looks good.";
    }

    get preheaderStatus() {
        if (this.preheaderLength === 0) {
            return "The preheader is required.";
        }

        if (this.preheaderLength > PREHEADER_MAX_LENGTH) {
            return `The preheader exceeds ${PREHEADER_MAX_LENGTH} characters.`;
        }

        return "Looks good.";
    }

    get preferenceCenterStatus() {
        return this.hasPreferenceCenter
            ? "A Preference Center link was found."
            : "No Preference Center link was found.";
    }

    get isAllValid() {
        return (
            this.isSubjectValid &&
            this.isPreheaderValid &&
            this.hasPreferenceCenter
        );
    }

    get overallStatus() {
        return this.isAllValid ? "PASS" : "Needs Revision";
    }

    get subjectStatusClass() {
        return this.isSubjectValid
            ? "slds-text-color_success"
            : "slds-text-color_error";
    }

    get preheaderStatusClass() {
        return this.isPreheaderValid
            ? "slds-text-color_success"
            : "slds-text-color_error";
    }

    get preferenceCenterStatusClass() {
        return this.hasPreferenceCenter
            ? "slds-text-color_success"
            : "slds-text-color_error";
    }

    get overallStatusClass() {
        return this.isAllValid
            ? "slds-text-heading_medium slds-text-color_success"
            : "slds-text-heading_medium slds-text-color_error";
    }
}

contentCheckTab.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle
    xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>66.0</apiVersion>
    <isExposed>true</isExposed>
    <capabilities>
        <capability>lightning__dynamicComponent</capability>
    </capabilities>
</LightningComponentBundle>

4. Configurare il Preference Center

L’URL del Preference Center e le stringhe identificative variano in base alla configurazione della org e dei template email.

In questo esempio, l’email viene considerata contenere un Preference Center se il contenuto (sia in testo semplice che all’interno di un URL) contiene uno dei seguenti termini:

  • preference
  • subscription
  • unsubscribe
  • manage preferences
get hasPreferenceCenter() {
    const content = this.content.toLowerCase();

    const preferenceCenterPatterns = [
        "preference",
        "subscription",
        "unsubscribe",
        "manage preferences"
    ];

    return preferenceCenterPatterns.some((pattern) =>
        content.includes(pattern)
    );
}

Se conosci l’URL reale del Preference Center utilizzato nella tua organizzazione, è più affidabile includere parte di quel dominio o URL nelle condizioni di matching.

Ad esempio, se ogni URL del Preference Center contiene:

preferences.example.com

allora aggiorna le condizioni di matching come segue:

const preferenceCenterPatterns = [
    "preferences.example.com",
    "manage preferences"
];

5. Distribuire l’LWC nella tua org

Dopo aver verificato i contenuti, distribuisci l’LWC nella tua org Salesforce.

Distribuisci dall’Esplora file

Clicca con il tasto destro sulla cartella contentCheckTab e seleziona:

SFDX: Deploy This Source to Org

6. Recuperare l’ID dell’LWC distribuito

La sola distribuzione dell’LWC non lo rende automaticamente visibile nella schermata di anteprima di Marketing Cloud Next.

Apri la Developer Console da Salesforce Setup.

Nella Developer Console, apri Query Editor e attiva Use Tooling API.

L’oggetto LightningComponentBundle non è un oggetto dati standard come Contact o Case. Memorizza i metadati dei Lightning Web Components distribuiti, quindi è necessario attivare Use Tooling API.

Esegui la seguente query:

SELECT Id, DeveloperName, IsExposed, NamespacePrefix
FROM LightningComponentBundle
WHERE DeveloperName = 'contentCheckTab'

Annota l’Id di 18 caratteri restituito dalla query.

Questo ID verrà utilizzato per registrare UiPreviewMessageTabDef.

7. Registrare UiPreviewMessageTabDef

UiPreviewMessageTabDef è il metadato che consente di registrare quale Lightning Web Component deve apparire come tab personalizzata nella modale Preview and Test di Marketing Cloud Next.

Esegui la seguente query nel Query Editor della Developer Console:

SELECT Id, MasterLabel, DeveloperName, TabName, IsActive, SupportedChannel, LightningComponentDefId
FROM UiPreviewMessageTabDef

La query restituisce zero record se non sono state ancora registrate tab personalizzate: è normale.

Clicca una volta su Insert Row per aggiungere una nuova riga.

Inserisci valori simili ai seguenti:

  • Id: Generato automaticamente
  • MasterLabel: Content Check
  • DeveloperName: ContentCheck
  • TabName: Content Check
  • IsActive: true
  • SupportedChannel: Email
  • LightningComponentDefId: l’ID di contentCheckTab copiato in precedenza

Dopo aver inserito i valori, clicca su Save Rows.

Una volta impostato IsActive su true, la tab compare nella schermata di anteprima di Marketing Cloud Next.

8. Verificare il comportamento in Marketing Cloud Next

Apri il contenuto della tua email in Marketing Cloud Next e seleziona Preview and Test.

Accanto alle tab standard Preview and Test, apparirà la seguente tab:

Content Check

Apri la tab e verifica i risultati della validazione.

Conclusioni

In questo articolo abbiamo utilizzato Agentforce Vibes IDE come ambiente di sviluppo per aggiungere una tab personalizzata Content Check alla schermata Preview and Test di Marketing Cloud Next.

Sebbene si tratti di un esempio semplice, dimostra come sia possibile estendere liberamente la validazione pre-invio in base alle esigenze operative della propria organizzazione.

Ad esempio:

  • Validazione delle linee guida di brand
  • Validazione dei merge field
  • Rilevamento di link non funzionanti
  • Validazione di contenuti obbligatori
  • Validazione qualitativa personalizzata basata su regole interne

e molti altri strumenti di validazione pre-invio possono essere aggiunti direttamente alla schermata di anteprima.

La possibilità di personalizzare la schermata di anteprima di Marketing Cloud Next è ancora una feature poco conosciuta da molti.

Vi incoraggio a provare a creare le vostre tab di validazione personalizzate nel vostro ambiente.

È tutto per questo articolo.

Restate sintonizzati per altri tips su Salesforce Marketing Cloud! 😎

Nobuyuki Watanabe

Tradotto e adattato da SFMC Tips #321 : Marketing Cloud Next: Custom Tabs for the Email Preview Feature di Nobuyuki Watanabe (@marketingcloudtips), pubblicato originariamente su Medium. Traduzione autorizzata dall’autore.

Related Posts:

Torna in alto