Goal

• use svelte for a simple questionnaire for a Salesforce Marketing Cloud Cloud Page
• generate JSON Server Side for questionnaire data
• submit data with post to Salesforce Marketing Cloud

Use Svelte

To get this up and running it is actually pretty easy.

Start with your standard svelte starter project.

I just defined a custom container as target (#questionaireContainer) and specified the structure of the questionnaire data and it's container (script#questionaireData). The data may vary for your use case, but here is mine:

[{"id":"string","title":"string","question":[{"id":"string","title":"string","position":1,"options":[{"id":"string","value":"string"}]}]}]

On startup you just get the data from the script tag and parse it.

constdata:Idata=JSON.parse(document.querySelector('#questionnaireData').innerHTML)[0];

Now you can work with that data and implement your style. After building your project you need to go to WebStudio > Cloud Pages

and create new code resources inside one of your collections.

Now you can grab that URL and put it asscript andstyle tags into your micro site.

Generate JSON data

We are using a data extension for the questionnaire configuration. We simply made a for loop that goes over each row in our data extension and generates our data in our predefined format.

<scriptid="questionnaireData"type="application/json">%%[set@json=Concat('[{"questions": [')if@questionRowCount>0thenfor@j=1to@questionRowCountdo/* magic here*/nextendifset@json=Concat(@json,@questionJson,']}]')]%%%%=v(@json)=%%</script>

Submit data with POST

So this one was a bit tricky to figure out, as the Salesforce documentation is not really forthcoming about how they can handlePOST requests in their "beautiful" scripting language (amp script).

So inside our svelte app we just need to do a post with form values (form submit the js way).

constpostData=()=>{constbody=newURLSearchParams({currentQuestion:question.id,currentAnswer:$selectedStar[step]||'',});constoptions={method:'POST',body,}fetch(data.url,options).catch((err)=>console.error(err));};

In the cloud page we just watch for a request parameter (currentQuestion).

if RequestParameter("currentQuestion") !="" then   set @currentQuestion = RequestParameter("currentQuestion")   set @currentAnswer =  RequestParameter("currentAnswer")   set @isPost=true   if RequestParameter("currentAnswer")!="" then      /*Save answer in DE*/   endifendif

So now we have a way to get data from the marketing cloud into a frontend framework like svelte and alsoPOST data back into it.

Conclusion

It is really nice to use a frontend framework inside of the salesforce marketing cloud, as it is so much better than the alternative, but it is not as easy as I would desire it to be.

Deployment is currently only possible to be done manually (I might have an idea to work around that in the future, but I'm not there yet).

Another drawback is that writing logic in AMP script is just so cumbersome. Everything that goes beyond reading/writing some data from/to a data extension gets complicated really fast.

I hope you enjoyed the read and could take away something.