Preference Center with Marketing Cloud – Basic Structure

If you want to build a newsletter using Marketing Cloud from Salesforce, you want a user interface for the administration of the user preferences. Salesforce already provides some basic features, but you can't customize them very much. That's why you should use a custom subscripton center. This is probably interesting, if you want to use your own look & feel. This article shows the basic structure of those custom subscription or preference centers.

Preparation

Before creating a custom preference center, you should take a look at these sources:

• AMPScript Guide from Salesforce – This guide shows the basic syntax of AMPScript for Marketing Cloud
• Server-Side JavaScript from Salesforce – This documentation shows the most important JavaScript-features for Marketing Cloud

You should also prepare your data extension, which will be used, for handling the data of newsletter subscribers.

Create Cloud Page

The first step is to create a Cloud Page in Marketing Cloud. You should use the code view for that, because we want to use AMPScript and SSJS. You can do that in Marketing Cloud in Web Studio → Cloud Pages. All you have to do, is to create a collection and a landing page. This landing page will be our preference center.

Create Preference Center Sub Pages

The preference center will be used for the following tasks:

• Subscription
• Confirmation of Email-addresses (Double Opt-In)
• Updating existing subscriptions
• Unsubscribing subscriptions (Opt-Out)
  
  

These four tasks will be done using our Cloud Page. But to determine the correct task, we create a new variable called action, which will be triggered by an URL parameter. For that we create the variable as follows:

var @action
set @action = RequestParameter("action") 

 This function gets the action parameter of the URL, which will be triggered like that:

http://[url-to-the-cloudpage].ch/subscription_center?action=…

Hint: The action-parameter can be placed via CloudPages URL in the footer of your newsletters like this: %%=CloudPagesURL([ID der Cloudpage],'action','confirm')=%%

We have the following actions:

• no action → Shows the sign up or update view, the update view gets triggered by the subscriber key
• action = confirm → Triggers the subscriber confirmation
• action = unsubscribe → Triggers the opt-out-process

Hint: We will take a look at the subscriber key later.

We determine which action is used like this:

if @subscriber_key != '' AND @action == 'confirm' then
// put your confirmation here
endif; 

Identify subscribers

/* Get subscriber key */
var @subscriber_key
set @subscriber_key = AttributeValue("_subscriberkey") 

Subscribe, Update and Unsubscribe

For that we create a Cloud Page with a HTML-form with all necessary inputs. The inputs should be the same you already prepared in your data extension. You can use every type of input and it's up to you, which data you want to submit from new subscribers. You only have to trigger a POST-Request to the Cloud Page using the form-action parameter %%=RequestParameter('PAGEURL')=%%. After the request gets called, we can get the data like that:

if RequestParameter("submitted") == true then
// insert submitted data into Data Extension using CreateSalesforceObject
endif 

In this if-else-block you can use the function CreateSalesforceObject to create new leads. You get the submitted fields using RequestParameter. The combination of both functions allow to get the submitted data and store it in the data extension.

Now we take a look at the opt-in confirmation of new subscribers.

The subscriber gets a opt-in-link using CloudPagesURL. After clicking this link, we can intercept the action like that:

if @subscriber_key != '' AND @action == 'confirm' then
// Update your confirmation field in your data extension using UpdateSingleSalesforceObject
endif 

Here we can use the functions RetrieveSalesforceObjects and UpdateSingleSalesforceObject to update the confirmation field of the subscriber in the data extension.

Hint: The unsubscribe/opt-out action works similar.

The last step is to handle subscriber updates

We have to use two requests here:

if @subscriber_key != '' then 
// Show update form
endif 

This request shows the update form, which is similar to the HTML-form for new sign ups. Sending this form triggers the second request. The main difference between the sign up and update form is the hidden input updated, instead of submitted:

if RequestParameter("updated") == true then
// Handle update request and update data in Data Extension using UpdateSingleSalesforceObject
endif 

Using UpdateSingleSalesforceObject allows you to update the subscriber, similar to the sign up and confirmation process.

Using these basic modules allows you to create an own preference center in Marketing Cloud. Next to SSJS and AMPScript you can use HTML, CSS and JavaScript aswell. This way you can build a custom layout in your look & feel.

It's now more clear to you what the purpose of a preference centre is and how it is fundamentally structured. But you don't have the possibility & resources to build one yourself? We would be happy to support you in implementing your own preference centre in the Marketing Cloud and look forward to hearing from you or your questions.

Quellen Bild & Textinhalt 

• AMPScript Guide from Salesforce
• Server-Side JavaScript from Salesforce