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):
Line 11-26 are the AMPScript that helps us use the Profile Attributes, used to populate our Form with the initial values. These are the attributes I created manually in my Marketing Cloud instance. You may need to change based on the attributes you created in your Marketing Cloud instance.
Line 44-54 are the SSJS that fetches the POST variables from the HTML form. For instance, from the following lines,
<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>
SSJS lines would be: (name attribute in the HTML would be the argument for the Platform.Request.GetFormField)
var firstName = Platform.Request.GetFormField('firstName') || "";
var lastName = Platform.Request.GetFormField('lastName') || "";
var email = Platform.Request.GetFormField('email') || "";
var website = Platform.Request.GetFormField('website') || "";
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:
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!
Hi, Vijaya Sankar N
I’m currently work on the scenario of Custom Profile/Subscription Centre. But didn’t get any resources to explain. In your content about custom preference centre. I was faced issue like how we can fetch our subscription center (Different Lists) status values using ampscript.
As u used – PREFERENCE ATTRIBUTES
SET @preference = IIF([Preference], “checked”, “”)
SET @connection = IIF([Connection], “checked”, “”)
SET @newsletter = IIF([Send Email Newsletter], “checked”, “”)
var preference = Platform.Request.GetFormField(‘preference’) || false;
var connection = Platform.Request.GetFormField(‘connection’) || false;
var newsletter = Platform.Request.GetFormField(‘newsletter’) || false;
If I will change this according to my Subscription Centre then in Cloud Page Save/Publish option It will rotate the waiting icon only or we can say stuck & doesn’t proceed to publish
LikeLiked by 1 person
Do you have the right preference attributes setup in All Subscribers? In your case, you need to have Preference, Connection, Send Email Newsletter as the preference attributes with the same naming conventions.
LikeLiked by 1 person
Have updated the explanation section in this post. See if it helps now.
LikeLiked by 1 person
Thanks Vijaya Sankar N for your kind guidance as I learn lot from above content.
I also mention this on GitHub Gist & Stack exchange.
LikeLiked by 2 people
Happy to hear that this helped you! +1 for your Stack Exchange answer. Good too see how you have added colors to it.
LikeLiked by 1 person
Hi Vijaya,
You have well explained the Profile & Preference and really thank you for the same.
Could you also help on Subscription here.
Thanks!
LikeLike
This solution includes both Profile and Subscription center. Hope that helps!
LikeLike