Home | Dynamic Content | Dynamically Personalizing Your Subscription Center

Dynamically Personalizing Your Subscription Center

Personalization and preference centers in email content are becoming increasingly popular. Give your audience what they want in a brand new way by combining these two trends and creating a personalized subscription center. With ClickDimensions, you can do so with our subscription management feature and some extra code.

Personalizing your subscription page is as easy as including content related to the recipient like their first name. Adding that personal touch for the recipient increases engagement and trust. Why not make the customer experience better when it’s that simple?

Below I will describe and illustrate how to personalize a subscription page that will be navigated to through an email link.

You can see in the image below where “Marissa” is bolded on the subscription page. That is where the first name of the email recipient will populate to personalize the salutation of the page.

Subscription Page

For the recipient’s first name to populate next to “Welcome” on the page, there are three things you need to do:

1. Add a FreeMarker URL parameter to the end of the email’s subscription preferences link.
2. Place HTML code in the HTML component of the subscription page.
3. Place JavaScript in the code editor of the subscription page.

Note: In order for this process to work for every recipient, a value needs to exist in a recipient’s First Name field on their contact or lead record. If a recipient is missing a value in their first name field, the email will not be sent to them and their email event for the send will be a render error. When FreeMarker is used in URLs, there has to be data in the CRM field it is pulling from in order for it to send successfully. If other recipients were on the email send and they did have values in their first name fields, then they still should get the original email successfully.

First, you will want to create a subscription management page. Once created, you will retrieve the Embed as Link URL in the designer. We will need to append a URL parameter to the end of the link. The parameter will include FreeMarker for the first name so it is generated in the URL when the email is sent, as seen in this article. You can now place the subscription link with the URL FreeMarker parameter in your email.

The subscription URL in the email will go from looking like this with the non-generated FreeMarker as the parameter:
Subscription Page Link with URL FreeMarker Parameter

To this with the recipient’s first name generated in the URL after the email has been sent:
Subscription Page Link with URL FreeMarker Parameter Generated

Now, let’s navigate back to the subscription page designer, where you will need to add an HTML component in addition to your subscription lists. The HTML component is where the opening text of “Welcome Marissa, what would you prefer to be emailed about?” will be placed.
Designer HTML Component

The HTML code:

<p id=”welcomeText”>Welcome <strong id=”welcomeSalutation”>Subscriber</strong>,</p>

I would recommend pasting this code into the subscription page’s HTML component first using the Source button:

HTML Component - HTML for Text Text Rendered

After “Welcome Subscriber” has been added to the HTML component, you can add more text like “What would you prefer to be emailed about?” and customize the content in the component further. Then, the next to-do item in the subscription designer is to place this JavaScript into the code editor. That code is what grabs the generated first name from the URL of the subscription link and places it into the HTML component. In the JavaScript code, you will see the variables of “fname” and the parameter of “First.”

Code Editor with JavaScript fName

If you wanted to populate the recipient’s full name into the page instead of just their first name, there are a few items you will need to change:

1. The FreeMarker in the subscription page’s URL parameter will need to have the full name FreeMarker instead.

Subscription Page Link with URL FreeMarker Parameter 2

2. For any variable in the JavaScript that references “fName,” change it to “fullName” and make sure to also change the parameter from “First” to “Fullname.”

Code Editor with JavaScript fullName

When the subscription page link with the URL FreeMarker parameter for full name is sent and the link is clicked, this is how the URL and subscription page renders the full name of the recipient. There is a piece of code in the JavaScript that allows it to correctly render the encoded space characters of “%20.” So, instead of the subscription page populating with “Welcome Marissa%20Clontz,” it’s able to correctly render it as “Welcome Marissa Clontz” with a space between the first and last name.

Subscription Page Link with URL FreeMarker Fullname Rendered

It’s good to keep in mind that if you use this method on web content other than subscription pages, there is a chance that the content will be forwarded. For instance, if you have a form that dynamically populates with the original recipient’s name and that recipient forwards the form to someone, the form will still be personalized with the original recipient’s name. That is because the FreeMarker in the form only generates when it is originally sent from CRM to the original recipient.

Please note: The custom code in this blog post is provided as-is and we do not provide support on the implementation of this code.

BlogCTA-Banners2017 Idea eBook

About the Author:

Marissa Clontz is a Lead Product Consultant at ClickDimensions.

Leave A Comment