Como ser developer en marketing cloud y no morir en el intento

En cualquier profesión es importante disponer de las herramientas adecuadas para realizar el trabajo. si somos developers con cierta experiencia conocemos múltiples herramientas como IDE, debuggers, consolas, bitbucket, etc…

Pero seguro que la primera vez que escuchaste en tu trabajo una conversación similar a la siguiente:

– Necesitamos desarrollar unas cosas en Marketing Cloud que con la funcionalidad estándar no se puede hacer, ¿alguien sabe hacerlo?
– No
– ¿Algún voluntario?
– Cri, cri cri….
– Enhorabuena por ser el elegido, habla con los de marketing para ver qué es lo que quieren y empiezas a mirar como se hace.
– #matameCamión
– ¿Que?
– No, nada…

Y empiezas a leer la documentación del Marketing Cloud Developer center y empiezas a leer que si AMPSCRIPT, SSJS, API, SDK, Cloud Pages, content blocks… y claro…no tienes ni idea de por dónde empezar.

Pues tranquil@, En esta serie de artículos vamos a explicar alguno de los elementos imprescindibles sin los cuales no podría desarrollar mis funciones de developer en el mundo del desarrollo de SFMC.

¿Dónde escribimos nuestro desarrollo?: editor online vs IDE

Primera norma: ni se os ocurra hacer cambios directamente sobre el editor de SFMC, ¿por qué?.

• Cuando guardas cualquier contenido, no hay vuelta atrás, no existe el CTRL+Z, no existe undo, tu código anterior simplemente desaparece.
• Si otra persona abre una cloud page y “accidentalmente” hace cambios tu nunca sabrás quién los hizo y además no tienes posibilidad de recuperar la versión anterior.
• El editor online no tiene resaltado de código óptimo (aunque tu código esté incluido dentro de los tags <script>…</script> o %%[ … ]%%
• El editor online no tiene la posibilidad de linting o corrección de errores de código, pero sin embargo en tu IDE sí que podemos utilizar plugins / extensiones para SSJS / AMPSCRIPT / HTML y CSS para mejorar el aspecto de nuestro código.

¿Y por qué es especialmente importante el resaltado de código?

Porque cuando desarrollemos algo en Marketing Cloud, es algo habitual el combinar en el mismo archivo SSJS / AMPSCRIPT y HTML y cada uno con su formato diferente hace que el código sea duro de leer y aún más difícil de depurar.

La principal ventaja de desarrollar en entorno local vs Online

Mantener un control de versiones de nuestro código, mantener nuestro proyecto en local nos permite tener un repositorio, crear ramas y facilitar el trabajo en equipo (aunque seguramente estés solo en esto porque tus compañeros se rieron cuando te “asignaron” la tarea)

¿y por dónde empiezo a montar mi entorno de desarrollo?

Existen muchas recetas diferentes pero para empezar os vamos a proponer los siguientes elementos o ingredientes:

• Salesforce Marketing Cloud
• VSCode
• Github
• Heroku

Visual Studio Code

VS Code está disponible para la mayoría de plataformas actuales lo que significa que podemos descargar y usar este potente IDE en tu Mac, Windows o Linux.

VS Code dispone de un montón de extensiones para customizar nuestro IDE y podemos instalarlas directamente desde la aplicación, podemos ver las extensiones que tenemos activas e instalar nuevas desde la barra de actividad en el lado izquierdo del interfaz de usuario, desde ahí podremos buscar e instalar nuevas extensiones.

Extensiones recomendadas.

AMPScript

Esta extensión resaltará nuestra sintaxis AMPScript, es especialmente útil ya que el editor WYSIWYG de Marketing Cloud no ayuda a identificar cualquier error ortográfico o detectar esas molestas comas o corchetes que nos faltan, interpretar nuestro código con el resaltado de sintaxis será una tarea mucho más sencilla.

Además no es la única ventaja que nos dará esta extensión, también nos permite conectar VSCode directamente con nuestra cuenta de Marketing Cloud. También tiene integrada la documentación para todas las funciones AMPScript y además añade snippets de código para elementos del lenguaje y funciones. Cada Snippet incluye una detallada descripción de cada función y sus parámetros, que también los muestra cuando pasamos el cursor sobre el nombre de una función.

La funcionalidad de la conexión directa con SFMC (Salesforce Marketing Cloud) nos permite hacer lo siguiente:

• Cambiar rápidamente el contenido de Marketing Cloud sin abandonar nuestro editor de texto, ahorrando tiempo al evitar el frecuente copy-paste
• También nos ayuda a tener un mejor control del contenido de nuestros emails, content blocks y cloud pages mostrando atributos adicionales que no son visibles en el interfaz de usuario de SFMC.

Pero ojo!, esta funcionalidad desde un punto de vista de developer no es demasiado recomendable, si bien sacamos ventaja de la función undo de nuestro editor, no mantenemos un control sobre el versionado de nuestros archivos, solo indicado para realizar hotfixes sobre entornos de producción y despues subir los cambios a nuestro propio repositorio desde la terminal incluida en VSCode.

Github

El control de versiones es un sistema que registra los cambios realizados sobre un archivo o conjunto de archivos a lo largo del tiempo de tal manera que nos sea posible recuperar versiones específicas más adelante.

Existen muchos Sistemas de Control de Versiones siendo algunos de los más conocidos CVS, Git, Subversion, Mercurial o Baazar, los servicios más populares últimamente son gitHub o bitbucket, pero no está de más probar los demás y elegir el que mejor se adapte a nuestras necesidades.

Asimismo también disponemos de una extensión de VSCode que nos permite integrarnos con Jira y/o Bitbucket, aunque si nos gusta la línea de comando de toda la vida podemos usar la terminal integrada dentro del UI de Visual Studio Code.

Heroku

Heroku es un PaaS (Platform as a Service) que nos permite desplegar nuestras aplicaciones sin preocuparnos por la infraestructura, soportando además múltiples lenguajes de programación.

Heroku emplea contenedores Linux, llamados dynos para alojar las aplicaciones, así mismo cuenta con la posibilidad de agregar funcionalidades nuevas mediante add-ons entre las que por supuesto se incluyen addons de salesforce.

Por su parte, Heroku CLI, que podemos descargar desde aquí nos permite ejecutar Heroku desde nuestra terminal y poder, de una manera muy similar a git, subir el contenido de nuestro entorno de desarrollo local mediante la línea de comandos que ejecutamos desde nuestro terminal, accesible, cómo no, desde el interfaz de usuario de VSCode, o también tenemos la opción de conectar nuestro repositorio de github con el de Heroku, con lo que al hacer push a nuestro repositorio habitual, de manera automática nuestros cambios subirán también a Heroku.

Es importante recordar que debemos hacer esto si queremos mantener un control de versiones sobre nuestros archivos porque Heroku no realiza esta función de versionado sobre nuestros archivos.

Podemos utilizar tanto este servicio como cualquier otro del mismo tipo tales como:

• c9.io
• codesandbox.io
• Dropbox
• OneDrive

¿Pero para qué necesitamos usar Heroku u otro servicio similar en nuestra implementación de SFMC?, muy sencillo: depuración rápida.

Todos aquellos que ya hayáis desarrollado con anterioridad en SFMC conocemos los famosos errores 500 que nos devuelve el server de Marketing Cloud sin entrar en el detalle de que está ocurriendo, o también los tiempos de espera entre que pulsamos save/publish en nuestra Cloud Page y podemos ver los cambios introducidos o enviar un email test send unas 200 veces en nuestra jornada diaria, el proceso de depuración / corrección / test puede ser un gran incordio y las personas que hemos trabajado antes con otros lenguajes de programación lo notamos de una manera más acusada si cabe.

Cómo depurar rápidamente nuestro código en SFMC.

Pues resulta que podemos cargar cualquier fichero de texto que sea accesible en internet y ejecutarlo en los servidores de Marketing Cloud para los lenguajes AMPScript y SSJS, la clave es un método similar al eval() de javascript junto a otro método que recoge el contenido de texto de una URL y lo devuelve como un string.

El proceso para las Cloud Pages sería de la siguiente manera:

1 – Crear una nueva Cloud Page e insertar el siguiente código donde necesitemos que aparezca nuestro contenido.

%%= TreatAsContent(HTTPGet("https://yourdino.herokuapp.com/sfmctest.amp")) =%%

2 – En nuestro archivo de texto (sfmctest.amp) que está alojado en heroku tenemos el siguiente codigo AMPScript:

%%[ 
    set @dataExtension = 'NTOSubscribers'
    set @returnedField = 'FirstName'
    set @whereCol = 'MemberID'
    set @whereValue = @ID
    set @FirstName = Lookup(@dataExtension, @returnedField, @whereCol, @whereValue) 
]%%

Siguiendo este sencillo proceso de únicamente dos pasos, conseguimos lo siguiente:

• Ahorramos mucho tiempo puesto que no es necesario editar nuestra Cloud Page en el editor de SFMC y lo más importante: no es necesario volver a publicarla, solo trabajamos en nuestro IDE preferido y subimos los cambios a nuestro repositorio/heroku, solo tenemos que refrescar en nuestro navegador la ruta de la cloud page y podremos ver los cambios inmediatamente.
• Podemos publicar nuestro código en cualquier servidor web de los que dispongamos o cualquier servicio que nos permita acceder a nuestros archivos online.

Consideraciones a tener en cuenta a la hora de subir nuestros archivos a uno de los servicios mencionados anteriormente:

Alguno de estos servicios puede que de manera automática aplique un formato que rompa nuestro código cuando lo insertemos, por lo que es muy recomendable usar las extensiones *.ssjs y *.amp como extensión de archivo ya que estas no serán reconocidas por los servicios y no se les aplicará el auto-formato.

Tened en cuenta que nunca debemos de almacenar credenciales en estos servicios online para evitar problemas de seguridad, si necesitamos credenciales, clientID o clientSecret, deberíamos recuperarlos mediante SFMC key management o de una Data Extension si necesitamos cualquier otro tipo de credenciales.

Conclusiones

¿Qué os ha parecido?, ¿suficiente material para poder empezar a cumplir los requerimientos que nos pidan nuestros compañeros de marketing?. Por lo menos tenéis material para empezar a jugar y cacharrear con estos procesos y servicios.

Y como somos conscientes de que este tema es bastante extenso tenemos buenas noticias para vosotr@s, ¡no va a ser el único post que vamos a tratar sobre el tema!

Prometemos ir ampliando y profundizando en cada uno de los puntos en futuros capítulos como por ejemplo:

• MCFS connection manager
• Combinar AMPScript y SSJS para depurar nuestro código.
• Usar la consola del navegador para ver los resultados de nuestra depuración.
• Casos prácticos de Cloud Pages y email content blocks.
• Estructura de archivos de un proyecto HTML / CSS / AMPScript / SSJS
• Usar Data Extensions para almacenar las excepciones en nuestro código.
• Otras extensiones de SFMC para VSCode y nuestro navegador.

¡¡Nos vemos pronto!!