A lot of advanced use cases related to building dynamic, highly personalised CloudPages in Salesforce Marketing Cloud require developers to jump between using AMPscript, Server-Side JavaScript and Client-Side JavaScript on one page. This can be a challange, as both AMPscript and Server-Side JavaScript are server-side languages and they are processed on a web server, while Client-Side JavaScript is processed on the user’s computer.

Server-side processing runs on the web server and requires interaction with the server. It allows the server to provide dynamic websites tailored to the user, but it increases the processing load on server. It’s always processed first, in the backend, before the Client-side processing starts.

Client-side processing runs on the user’s computer and does not need interaction with the server. At the same time, it cannot directly interact with Marketing Cloud assets, like Data Extensions, Content, etc, as they can only be accessed by server-side functions in AMPscript and SSJS.

So what is possible in terms of passing data between AMPscript, Server-Side JavaScript and Client-Side JavaScript?

Passing variable values between AMPscript and Server-Side JavaScript

Passing variable values between AMPscript and Server-Side JavaScript is quite straight forward, as both languages are processed on the server-side. Server-Side JavaScript comes with a couple of useful functions for exactly that purpose: GetValue and SetValue.

The GetValue function returns the value of the specified Subscriber attribute or an AMPscript variable. This function always needs to be prefixed with an Attribute object to retrieve Subscriber attributes or a Variable object to retrieve AMPscript variables. Prefixing AMPscript variables with an @ character is optional.

^{Source: https://ampscript.guide/getvalue/}

Here’s an example of retrieving the value of an AMPscript variable in SSJS:

	%%[
	var @emailAddress
	/* get email address from the sendable data extension */
	set @emailAddress = AttributeValue("email")
	]%%
	<script runat="server">
	Platform.Load("core","1.1.1");
	// get the value of the emailAddress AMPscript variable
	var emailAddress = Variable.GetValue("@emailAddress");
	Write("<br>email: " + emailAddress);
	</script>

view raw SSJS-retrieve-AMPscript-variable.html hosted with ❤ by GitHub

And an example of retrieving a value of an Attribute in SSJS:

	<script runat="server">
	Platform.Load("core","1.1.1");
	// get the value of the emailaddr personalization string
	var email = Attribute.GetValue("emailaddr");
	Write("<br>email: " + email);
	</script>

view raw SSJS-retrieve-attribute-value.html hosted with ❤ by GitHub

Let’s now do it the other way around and pass some values from Server-Side JavaScript to AMPscript using the SetValue function, which sets the value of an AMPscript variable. Similarly to the GetValue function, prefixing the variable name with an @ character is optional.

^{Source: https://ampscript.guide/setvalue/}

Here’s an example of setting a value of an AMPscript variable in SSJS:

	<script runat="server">
	Platform.Load("core","1.1.1");
	// set the value of a firstName variable
	var firstName = "John";
	// pass the value to an AMPscript @firstName variable
	Variable.SetValue("@firstName", firstName);
	</script>
	firstName: %%=v(@firstName)=%%

view raw SSJS-set-AMPscript-variable.html hosted with ❤ by GitHub

Passing variable values from AMPscript and Server-Side JavaScript to Client-Side JavaScript

Let’s now take a look at a slightly different use case, where we will be passing variable values form AMPscript to Client-side JavaScript. There are no dedicated AMPscript or SSJS functions for that purpose, but as both AMPscript and SSJS are processed first, before the client-side processing starts, we can easily take any data processed on server-side and use it inside the client-side script by simply printing the variable values using the v() AMPscript function.

Here’s an example of passing an AMPscript variable value to Client-Side JavaScript:

	%%[
	var @emailAddress
	/* get email address from the sendable data extension */
	set @emailAddress = AttributeValue("email")
	]%%
	<script>
	// get the value of the @emailAddress variable
	var email = "%%=v(@emailAddress)=%%";
	console.log(email);
	</script>

view raw JS-get-AMPscript-variable.html hosted with ❤ by GitHub

Similarly, we can pass a Server-Side JavaScript variable value to Client-Side JavaScript using the crtl tag:

	<script runat="server">
	Platform.Load("core","1.1.1");
	// set the value of a firstName variable
	var firstName = "John";
	</script>
	<script>
	var firstName = ("<ctrl:var name=firstName/>");
	console.log(firstName);
	</script>

view raw JS-get-value-SSJS-variable.html hosted with ❤ by GitHub

Passing variable values from Client-Side JavaScript to AMPscript and Server-Side JavaScript

Things get a little bit more complicated when it comes to passing data between Client-side and Server-side due to the context of execution mentioned at the beginning of the article. AMPscript and SSJS are both executed in the backend, before the Client-side even loads, that’s why you cannot easily pass Client-side JavaScript variables for Server-side processing within the same page.

To achieve this, a more complex solution would be required, that would comprise of creating a CloudPage code resource, which would receive client-side data sent to it as URL parameters. This page could run AMPscript to fetch the data from the URL using the RequestParameter function and would be responsible for all the data processing towards Marketing Cloud. In the client-side script, you would have to reference the URL of this code resource (inside your Client-Side JavaScript code) and append the parameters you want to pass to Marketing Cloud for processing as URL parameters.

Here is a detailed article by Ivan Razine describing above with some code samples: How to enhance your forms with asynchronous calls using AMPscript and plain JavaScript.

---

Questions? Comments?

Leave a comment below or email me at zuzanna@sfmarketing.cloud.