Svelte and Salesforce Marketing Cloud

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.

const data: 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 as script and style 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.

<script id="questionnaireData" type="application/json">%%[
  set @json=Concat('[{"questions": [')
  if @questionRowCount>0 then
    for @j=1 to @questionRowCount do
      /* magic here*/
    next
  endif
  set @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 handle POST 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).

const postData = () => {
  const body = new URLSearchParams({
    currentQuestion: question.id,
    currentAnswer: $selectedStar[step] || '',
  });
  const options = {
    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*/
   endif
endif

So now we have a way to get data from the marketing cloud into a frontend framework like svelte and also POST 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.