Marketing Cloud : Custom Preference/Profile Center

Marketing Cloud comes with the default preference center to manage the subscription and profile information of the subscribers. It is possible to create a custom page to create it!

(This is a skeleton or boilerplate without any fancy styles. You can use this to build one for your requirement)

To achieve this custom development, we need to create a Cloud Page. (Web > Cloud Pages)

At the time of writing New Cloud Pages Experience Preview is available. I used it. You can either use classic or new experience. It is just an experience and the improved performance. You can use whichever you prefer.

Being a developer turned SFMC developer, I personally prefer IDE to work on scripts. You can connect Marketing Cloud with Visual Studio easily.

Cloud Page

Here is the code (explanations to follow then):

	<!DOCTYPE html>
	<html>
	<head>
	<meta
	name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"
	/>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	</head>
	<body>
	%%[
	SET @subscriberKey = [_subscriberkey]

	// PROFILE ATTRIBUTES
	SET @firstName = [First Name]
	SET @lastName = [Last Name]
	SET @emailAddress = [Email Address]
	SET @website = [Website]
	SET @genderMale = IIF([Gender] == "Male", "checked", "")
	SET @genderFemale = IIF([Gender] == "Female", "checked", "")

	// PREFERENCE ATTRIBUTES
	SET @preference = IIF([Preference], "checked", "")
	SET @connection = IIF([Connection], "checked", "")
	SET @newsletter = IIF([Send Email Newsletter], "checked", "")
	]%%

	<script runat="server" language="JavaScript">
	Platform.Load("core","1.1.2");

	var subscriptionStatus = Subscriber.Retrieve({
	Property: "SubscriberKey",
	SimpleOperator: "equals",
	Value: Variable.GetValue("@subscriberKey")
	});

	if(subscriptionStatus[0].Status == "Active") {
	Variable.SetValue("subscriptionStatus", true);
	} else {
	Variable.SetValue("subscriptionStatus", false);
	}

	// POST VARIABLES
	var subscriberKey = Platform.Request.GetFormField('subscriberKey') \|\| "";
	var firstName = Platform.Request.GetFormField('firstName') \|\| "";
	var lastName = Platform.Request.GetFormField('lastName') \|\| "";
	var email = Platform.Request.GetFormField('email') \|\| "";
	var website = Platform.Request.GetFormField('website') \|\| "";
	var gender = Platform.Request.GetFormField('gender') \|\| "";
	var preference = Platform.Request.GetFormField('preference') \|\| false;
	var connection = Platform.Request.GetFormField('connection') \|\| false;
	var newsletter = Platform.Request.GetFormField('newsletter') \|\| false;
	var unsubscribe = Platform.Request.GetFormField('unsubscribe') \|\| false;
	var subscribeTo = Platform.Request.GetFormField('subscribe') \|\| false;

	if(subscriberKey) {
	var subscriberData = {
	"Attributes": {
	"First Name" : firstName,
	"Last Name" : lastName,
	"Website" : website,
	"Preference" : preference,
	"Connection" : connection,
	"Send Email Newsletter" : newsletter
	}
	};

	if(gender != "") {
	subscriberData.Attributes.Gender = gender;
	}

	if(subscribeTo) {
	subscriberData.Status = "Active";
	}

	var subObj = Subscriber.Init(subscriberKey);

	if(unsubscribe) {
	var unsubscribeSatus = subObj.Unsubscribe();
	Variable.SetValue("unsubscribeSatus", unsubscribeSatus);
	} else {
	var udpateStatus = subObj.Update(subscriberData);
	Variable.SetValue("unsubscribeSatus", (subscribeTo && udpateStatus)?"SUBSCRIBED":"NA");
	Variable.SetValue("udpateStatus", udpateStatus);
	}

	Variable.SetValue("formSubmitted", true);
	} else {
	Variable.SetValue("formSubmitted", false);
	}
	</script>

	<form method="POST">
	<input type="hidden" name="subscriberKey" value="%%=v(@subscriberkey)=%%">

	<h2>Update your profile:</h2>
	<label>First Name: </label><input type="text" name="firstName" value="%%=v(@firstName)=%%"><br>
	<label>Last Name: </label><input type="text" name="lastName" value="%%=v(@lastName)=%%"><br>
	<label>* Email: </label><input type="email" required name="email" value="%%=v(@emailAddress)=%%"><br>
	<label>Website: </label><input type="url" name="website" value="%%=v(@website)=%%"><br>

	<label>Gender: </label>
	<input type="radio" name="gender" value="Male" %%=v(@genderMale)=%%> Male
	<input type="radio" name="gender" value="Female" %%=v(@genderFemale)=%%> Female<br>

	<h2>Update your subscriptions:</h2>
	<label>Preference: </label><input name="preference" value="true" type="checkbox" %%=v(@preference)=%%><br>
	<label>Connection: </label><input name="connection" value="true" type="checkbox" %%=v(@connection)=%%><br>
	<label>Newsletter: </label><input name="newsletter" value="true" type="checkbox" %%=v(@newsletter)=%%><br>

	<br/> <br/>

	<label>%%=IIF(@subscriptionStatus, "Unsubscribe from all", "Resubscribe")=%%</label>
	<input name='%%=IIF(@subscriptionStatus, "unsubscribe", "subscribe")=%%' value="true" type="checkbox"><br>
	(You are %%=IIF(@subscriptionStatus, "subscribed to", "unsubscribed from")=%% us!)

	<br/> <br/>

	<input type="submit" value="Update">

	</form>

	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.3.5/dist/sweetalert2.all.min.js"></script>

	%%[ IF @formSubmitted AND @udpateStatus == "OK" AND @unsubscribeSatus == "NA" THEN ]%%
	<script>
	Swal.fire("Updated!", "Your preferences are updated successfully", "success").then(() => {
	location.href = location.href;
	});
	</script>
	%%[ ELSEIF @formSubmitted AND @udpateStatus != "OK" AND @unsubscribeSatus == "NA" THEN ]%%
	<script>
	Swal.fire("Not Updated!", "Something went wrong while updating your preferences", "error").then(() => {
	location.href = location.href;
	});
	</script>
	%%[ ELSEIF @formSubmitted AND @unsubscribeSatus == "OK" THEN ]%%
	<script>
	Swal.fire("Unsubscribed!", "Sorry to see you go away!", "info").then(() => {
	location.href = location.href;
	});
	</script>
	%%[ ELSEIF @formSubmitted AND @unsubscribeSatus == "SUBSCRIBED" THEN ]%%
	<script>
	Swal.fire("Subscribed!", "Happy to see you again!<br/>We make sure we don't spam you!!", "success").then(() => {
	location.href = location.href;
	});
	</script>
	%%[ ELSE ]%%
	%%[ ENDIF ]%%
	</body>
	</html>

view raw Custom Preference Center.html hosted with ❤ by GitHub

Line 11-26 are the AMPScript that helps us use the Profile Attributes, used to populate our Form with the initial values.

Line 93-121 is the form with a sample fields.

First we have Profile fields – First Name, Last Name, Email, Website and Gender
Followed by Subscription Preferences – Checkboxes
Finally an overall Subscription or Unsubscribe from all.

Line 28-91 are the SSJS (Server-Side Javascript) that handles the POST data once the form is submitted. We build the subscriber attributes JSON to update. The attributes differ based on your preference settings. The Status of the update is held in a separate variable to show a fancy alert box to the end user.

Line 123-150 utilizes the open source Sweet Alert 2 plugin that gives an appealing alert box replacing the old fashioned browser alert still an one-liner.

Now Save and Publish the Cloud Page. It should look like this:

Cloud Page Preview

Email

In your email content, call this cloud page in the place you call for unsubscribe link:

<a alias="Manage Preferences" 
   conversion="false" 
   data-linkto="cloudpageslandingpage"
   href="%%=CloudPagesURL(34567)=%%"
   title="Manage Preferences">
   Manage Preferences
</a>

Replace 34567 with your Cloud Page ID.

Now, your subscriber on clicking the link, you see them landing by the brand new cloud page created by you!

Cloud Page

Email

Share this:

Like this:

Related

Author: Vijaya Sankar N

Leave a Reply Cancel reply