Vídeo tutorial: subir tus emails a Salesforce Marketing Cloud
Este vídeo explica cómo subir a Salesforce Marketing Cloud los emails HTML del plugin Emailify de Figma.
Si necesitas enlaces con AMPscript (por ejemplo, %%=v(@url)=%%) en tus párrafos de texto, el campo de enlace nativo de Figma los bloqueará por no ser URL válidas. Para evitarlo, puedes usar el formato especial de enlace AMPscript de Emailify, https://ampscript.invalid/?%%=v(@url)=%%, y Emailify incluirá la etiqueta AMPscript sin modificar en el HTML exportado.
En el panel de exportación de Emailify, selecciona la opción Marketing Cloud (API) en la lista desplegable y, después, sigue estos pasos para conseguir tus credenciales de autenticación:
- Inicia sesión en tu cuenta de Salesforce Marketing Cloud.
- Ve a Marketing Cloud -> Setup -> Platform Tools ("Apps") -> Installed Packages.
- Haz clic en New.
- Ponle un nombre y una descripción al paquete.
- Elige crear el paquete con funcionalidad mejorada.
- Guarda el paquete con Save.
- En Components, haz clic en Add Component.
- Selecciona API Integration (después de añadir un componente de integración por API, no se puede quitar).
- Selecciona el tipo Server-to-server integration.
- Configura las propiedades del componente: tienes que conceder permisos de Read y Write para Emails (en Channels) y para Documents and Images y Saved Content (en Assets).
- Haz clic en Save para guardar el componente.
Una vez creada, copia y pega los siguientes datos obligatorios de la nueva integración en los ajustes de exportación de Emailify:
- Client ID (por ejemplo, 3e8poc4erkli6ghjavq8kuio)
- Client Secret (por ejemplo, EOjPb4HPWwtyUkcb5CnCpo5C)
- REST Base URL (por ejemplo, https://mcvb5-qrzy845tggex49976pmz38.rest.marketingcloudapis.com/)
Cuando estés listo, elige Template o HTML Email en el desplegable Upload As y, después, haz clic en el botón Upload To Marketing Cloud para exportar a Marketing Cloud los emails de Figma seleccionados. La opción predeterminada, Template, mantiene el comportamiento anterior basado en plantillas. Elige HTML Email si quieres que el recurso subido se abra como un email HTML editable en Content Builder.
Si prefieres que Emailify guarde el email o la plantilla de Salesforce subidos en una carpeta concreta de Content Builder en lugar de en la ubicación raíz predeterminada, conecta tu cuenta de Salesforce y elige una Template Folder en el panel de exportación de Emailify antes de subirlo. Si lo dejas en Content Builder (Default), se mantiene el comportamiento anterior.
Subir imágenes a Salesforce Content Builder
Si también quieres que Salesforce Marketing Cloud aloje las imágenes de tu email, ahora puedes usar la opción Salesforce Content Builder del desplegable CDN de Emailify.
- En el panel de exportación de Emailify, selecciona Marketing Cloud (API) o Marketing Cloud (oAuth) y conecta primero tu cuenta de Salesforce Marketing Cloud.
- Abre el desplegable CDN y elige Salesforce Content Builder.
- Elige la carpeta de Content Builder a la que quieres que Emailify suba las imágenes.
- Exporta tu email como siempre.
Emailify subirá automáticamente las imágenes del email a la carpeta de Salesforce Content Builder seleccionada y, después, sustituirá las URL de las imágenes del HTML exportado por las URL de los recursos publicados en Salesforce antes de subir el email o la plantilla.
La Template Folder y la carpeta de Content Builder de las imágenes pueden ser distintas, algo útil si tu equipo guarda los emails HTML, las plantillas y los recursos de imagen en carpetas separadas.
Si vuelves a exportar el mismo email a la misma carpeta de Content Builder, Emailify reutilizará cuando sea posible los recursos de imagen que ya existan y coincidan, en lugar de fallar si Salesforce indica que el nombre de la imagen ya está en uso.
Opciones adicionales para Salesforce Marketing Cloud
Hay algunas opciones más que puedes activar, si quieres, en tus exportaciones para Salesforce Marketing Cloud:
Añadir un slot de contenido
Al activar el interruptor Slot, se añade automáticamente una etiqueta <div data-type="slot" data-key="uniqueKeyHere" data-label="Drop Blocks or Content Here"></div> a tu HTML exportado, que te permitirá arrastrar y soltar otro contenido en tu email desde el editor de Marketing Cloud. Esta opción está disponible al subir como Template; las subidas como HTML Email no incluyen el contenedor del slot.
Añadir etiquetas de alias
Al activar el interruptor Aliases, se añade automáticamente un atributo alias="Your Figma layer name" a los enlaces de botones, imágenes, iconos sociales o barras de navegación de tu diseño de Figma. Se rellena automáticamente con el nombre que tenga cada capa de Figma en tu panel de capas.
Así puedes indicar alias para esos enlaces <a> de tu HTML exportado y facilitar los datos de seguimiento, poniéndoles nombres relacionados con el diseño (por ejemplo, "Hero CTA Button").
Añadir etiquetas de conversión
Al activar el interruptor Conversions, se añade automáticamente un atributo conversion="true" a todas las etiquetas de enlace <a> de tu HTML exportado.
Añadir AMPscript RedirectTo
Activa RedirectTo para envolver automáticamente en AMPscript los destinos de enlace absolutos http:// y https:// al exportar a Salesforce Marketing Cloud. Tu equipo puede introducir URL web normales en Emailify sin escribir AMPscript en cada componente:
<a href="%%=RedirectTo('https://example.com/page')=%%">Read more</a>Esta opción está desactivada de forma predeterminada y está disponible para las exportaciones ZIP y por API de Marketing Cloud, incluidas las plantillas y los emails HTML. También se aplica a los archivos de bloques HTML individuales y a los enlaces de botones de Outlook. Se conservan los alias y atributos de conversión que ya existan.
Los enlaces con AMPscript y las URL que contienen código de plantilla dinámico no se modifican, como tampoco los tokens de baja y de perfil de Salesforce, las direcciones de email, los enlaces de teléfono, las URL relativas ni los anclajes de página. El resto del AMPscript de tu email no se ve afectado. Los enlaces de vista previa y la versión de texto sin formato mantienen sus URL normales.
Después de importar o subir tu email, envía una prueba desde Salesforce Marketing Cloud y comprueba que los enlaces llevan a los destinos esperados, incluidos los parámetros de consulta.
Añadir etiquetas de impresiones
Al activar el interruptor Impressions, las capas Row, Wrapper o Hero se envuelven automáticamente en tu HTML exportado con las etiquetas de impresiones de Salesforce Marketing Cloud: una de apertura, %%=BeginImpressionRegion("your_figma_layer_name")=%%, y otra de cierre, %%=EndImpressionRegion()=%%.
Archivos de bloques HTML
Activa Blocks para incluir archivos .html adicionales en el ZIP. Emailify exporta cada fila como un archivo HTML independiente para que puedas usarla como módulo reutilizable en Salesforce Marketing Cloud.
Ten en cuenta que el código HTML de cada bloque seguirá necesitando las etiquetas CSS/style y otros elementos de la etiqueta <head></head>, así que, si eliges este método, tendrás que dedicar algo de tiempo a extraerlos.
Este interruptor solo está disponible cuando se selecciona la opción de plataforma Marketing Cloud (Zip) en el panel de ajustes de exportación de Emailify, y no se muestra si está seleccionada la opción de API.