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.
Top comments (0)