Preference Center Demystified

Preference Center Demistifier
Home Page

Preference Center Demystified

Email preference centers can unlock a wealth of subscriber information if executed properly. Learn more about them to create the personalized email experiences that build loyalty and trust.


Let's learn how to build Preference Center

Before diving into the technicalities, it's important to define your goals for the preference center. Determine what type of information you want to collect from your customers and how you plan to use it. Are you focused on email preferences, content preferences, or both? Understanding your objectives will help you design a preference center that aligns with your specific needs.


A Step-by-Step Guide to Building a Powerful Preference Center

When building a preference center, utilizing a data extension is a fundamental step to efficiently store and manage customer profile information, consents, preferences, and choices. By using a data extension, you can organize and access this data easily, allowing for seamless personalization and targeted communication. Here are some key points to consider when working with a data extension in your preference center:

  • Profile Information :
    Create fields within the data extension to capture and store essential customer details, such as name, contact information, demographic data, and any other relevant information for a comprehensive customer profile.
  • Consents :
    Include fields to track and store customer consent preferences. This could involve checkboxes or opt-in/out options for various types of communications, ensuring compliance with data protection regulations and respecting customer preferences.
  • Preferences :
    Design fields that enable customers to indicate their content preferences, such as topics or categories they are interested in. This information helps tailor communication and provide personalized content to enhance engagement.
  • Choices :
    Allow customers to make choices regarding communication frequency, such as how often they wish to receive emails or updates from your brand. This empowers them to control their inbox and prevents overwhelming or unwanted messages.

By utilizing a data extension and implementing these pointers, you can effectively collect and store customer data, consents, preferences, and choices within your preference center, enabling targeted and personalized communication that enhances the overall customer experience.

Let's build Preference Center

  • Step 1: Design Data Extensions
    • Profile
      Profile
    • Consents
      Consents
    • Preferences
      Preference
    • Choices
      Profile
  • Step 2: Web Development
    • Landing page
      Create an empty html page with just html opening and closing tag
      LandingPage

                                                  
      <!DOCTYPE html>
      <html>
      </html>
                                                  
                                              
    • Code Snippets
      • CSS Code Snippet
        Create a code snippet for storing the meta tags and css links
        LandingPage

                                                            
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
            <link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/checkout/">
            <link rel="stylesheet" href="https://mcs9w798j62y0yjmcfb0tt78793m.pub.sfmc-content.com/3x5lt0ynoc1">essage);
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
                                                           
                                                        
      • HTML Code Snippet
        Create a code snippet for designing your web page
        LandingPage

                                                        
         <div class="container">
              <div class="py-5 text-center">
                <img class="d-block mx-auto mb-4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJRxBCaw-e7WQh8Ri4PUilAgZ6obVWauFh7BVrMk1vRc6jh1Xv588DIU3aqWuSKoRhmsc1lFpGbu7iMGzHWgbNLy_e6QqSCvYbGqyT2cm-7_94-Qnt1YfVMfFIrmi1SAiqQ_ujxhyEspwEXrYtxCRCk6OOykK2UAMxY8coVBzQwHmZNNEO3_sRwAs5/s320/logo%20JPG%20format.jpg" alt="" width="75" height="75">
                <h2>Preferences & Choices
                </h2>
                <p class="lead">Email preference centers can unlock a wealth of subscriber information if executed properly. Learn more about them to create the personalized email experiences that build loyalty and trust.
                </p>
              </div>
              <div class="row">
                <div class="col-md-4 order-md-2 mb-4">
                  <h4 class="d-flex justify-content-between align-items-center mb-3">
                    <span class="text-muted">Your Choices</span>
                    <span class="badge badge-secondary badge-pill">3</span>
                  </h4>
                  <form class="needs-validation" novalidate>
                    <div class="custom-control custom-checkbox">
                      <label class="custom-control-label" for="FeaturedContent"><b>Featured Content
                        </b></label>
                      <input type="checkbox" class="custom-control-input" id="FeaturedContent">
                      <br/>
                      <small class="text-muted">Thouhts Leadership and Analyst Reports</small>
                    </div>
                    <br/>
                    <div class="custom-control custom-checkbox">
                      <label class="custom-control-label" for="Events"><b>Events
                        </b></label>
                      <input type="checkbox" class="custom-control-input" id="Events">
                      <br/>
                      <small class="text-muted">Announcing live and online events</small>
                    </div>
                    <br/>
                    <div class="custom-control custom-checkbox">
                      <label class="custom-control-label" for="ProductsAnnouncement"><b>Products Announcement
                        </b></label>
                      <input type="checkbox" class="custom-control-input" id="ProductsAnnouncement">
                      <br/>
                      <small class="text-muted">Hear about major features or updates</small>
                    </div>
                    <br/>
                    <div class="custom-control custom-checkbox">
                      <label class="custom-control-label" for="same-address"><b>Digest News
                        </b></label>
                      <input type="checkbox" class="custom-control-input" id="same-address">
                      <br/>
                      <small class="text-muted">Blogs, insights or news</small>
                    </div>
                    <br/>
                    <button class="btn btn-primary btn-block" type="submit">Save Choices</button>
                  </form>
                </div>
                <div class="col-md-8 order-md-1">
                  <h4 class="mb-3">Profile
                  </h4>
                  <form class="needs-validation" novalidate>
                    <div class="row">
                      <div class="col-md-6 mb-3">
                        <label for="FirstName">First name</label>
                        <input type="text" class="form-control" id="FirstName" placeholder="" value="%%=v(@FirstName)=%%" required>
                        <div class="invalid-feedback">
                          Valid first name is required.
                        </div>
                      </div>
                      <div class="col-md-6 mb-3">
                        <label for="LastName">Last name</label>
                        <input type="text" class="form-control" id="LastName" placeholder="" value="%%=v(@LastName)=%%" required>
                        <div class="invalid-feedback">
                          Valid last name is required.
                        </div>
                      </div>
                    </div>
                    <div class="mb-3">
                      <label for="Email">Email <span class="text-muted">(Optional)</span></label>
                      <input type="email" class="form-control" id="Email" placeholder="you@example.com" value="%%=v(@Email)=%%">
                      <div class="invalid-feedback">
                        Please enter a valid email address for shipping updates.
                      </div>
                    </div>
                    <div class="mb-3">
                      <label for="Address">Address</label>
                      <input type="text" class="form-control" id="Address" placeholder="1234 Main St" required value="%%=v(@Address)=%%">
                      <div class="invalid-feedback">
                        Please enter your shipping address.
                      </div>
                    </div>
                    <div class="mb-3">
                      <label for="Address2">Address 2 <span class="text-muted">(Optional)</span></label>
                      <input type="text" class="form-control" id="Address2" placeholder="Apartment or suite" value="%%=v(@Address2)=%%">
                    </div>
                    <div class="row">
                      <div class="col-md-5 mb-3">
                        <label for="country">Country</label>
                        <select class="custom-select d-block w-100" id="Country" required name="Country" value="%%=v(@Country)=%%">
                          <option value="">Choose...</option>
                          <option %%=v(@selectedUS)=%%>United States</option>
                          <option %%=v(@selectedES)=%%>Spain</option>
                          <option %%=v(@selectedIN)=%%>India</option>
                        </select>
                        <div class="invalid-feedback">
                          Please select a valid country.
                        </div>
                      </div>
                      <div class="col-md-4 mb-3">
                        <label for="state">State</label>
                        <select class="custom-select d-block w-100" id="state" required>
                          <option value="">Choose...</option>
                          <option %%=v(@selectedCA)=%%>California</option>
                          <option %%=v(@selectedBCN)=%%>Barcelona</option>
                          <option %%=v(@selectedWB)=%%>West Bengal</option>
                        </select>
                        <div class="invalid-feedback">
                          Please provide a valid state.
                        </div>
                      </div>
                      <div class="col-md-3 mb-3">
                        <label for="Zip">Zip</label>
                        <input type="text" class="form-control" id="Zip" placeholder="" required value="%%=v(@Zip)=%%">
                        <div class="invalid-feedback">
                          Zip code required.
                        </div>
                      </div>
                    </div>
                    <hr class="mb-4">
                    <div class="custom-control custom-checkbox">
                      <input type="checkbox" class="custom-control-input" id="EmailConsent" name="EmailConsent" value="%%=v(@EmailConsent)=%%" %%=v(@EmailConsentChecked)=%%>
                      <label class="custom-control-label" for="EmailConsent">Email Consent</label>
                    </div>
                    <div class="custom-control custom-checkbox">
                      <input type="checkbox" class="custom-control-input" id="SMSConsent" name="SMSConsent" value="%%=v(@SMSConsents)=%%" %%=v(@SMSConsentsChecked)=%%>
                      <label class="custom-control-label" for="SMSConsent">SMS Consent</label>
                    </div>
                    <hr class="mb-4">
                    <h4 class="mb-3">Preference
                    </h4>
                    <div class="d-block my-3">
                      <div class="custom-control custom-radio">
                        <input id="marketpressure1" name="marketpressure" type="radio" class="custom-control-input" %%=v(@radio1)=%% required>
                        <label class="custom-control-label" for="marketpressure1">Don't send me more than one email every 5 day </label>
                      </div>
                      <div class="custom-control custom-radio">
                        <input id="marketpressure2" name="marketpressure" type="radio" class="custom-control-input" %%=v(@radio2)=%% required>
                        <label class="custom-control-label" for="marketpressure2">Don't send me more than 2 emails every 5 day</label>
                      </div>
                      <div class="custom-control custom-radio">
                        <input id="marketpressure3" name="marketpressure" type="radio" class="custom-control-input" %%=v(@radio3)=%% required>
                        <label class="custom-control-label" for="marketpressure3">Don't send me more than 3 emails every 5 day</label>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-6 mb-3">
                        <label for="cc-name">Name on Communication</label>
                        <input type="text" class="form-control" id="DisplayName" placeholder="" required value="%%=v(@DisplayName)=%%">
                        <small class="text-muted">Name you want to display</small>
                        <div class="invalid-feedback">
                          Display name is required
                        </div>
                      </div>
                      <div class="col-md-6 mb-3">
                        <label for="cc-number">Phone Number</label>
                        <input type="text" class="form-control" id="Phone" placeholder="" required value="%%=v(@Phone)=%%">
                        <small class="text-muted">Number you want to receive SMS</small>
                        <div class="invalid-feedback">
                          Phone number is required
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="mb-4">
                        <div class="custom-control custom-checkbox">
                          <input type="checkbox" class="custom-control-input" id="UnsubscriberAll" name="UnsubscriberAll" value="%%=v(@UnsubscriberAll)=%%" %%=v(@UnsubscriberAllChecked)=%%>
                          <label class="custom-control-label" for="UnsubscriberAll">Unsubscriber from All</label>
                          <br/>
                          <small class="text-muted">You'll receive no further updates.</small>
                        </div>
                      </div>
                    </div>
                    <hr class="mb-4">
                    <button class="btn btn-primary btn-lg btn-block" type="submit">Save the details</button>
                  </form>
                </div>
              </div>
            </div>
                                                       
                                                    
      • SSJS Code Snippet
        Create a code snippet rendering the web page via SSJS Retreive functions
        LandingPage

                                                        
        <script type="text/javascript" runat="server">
          Platform.Load("Core","1")
          try{
            var subscriberKey = Variable.GetValue("@subscriberKey");
            var subscriberKey = "b2.shashi@gmail.com";
            if(subscriberKey){
               //==== ** Fetch Profile details for personalization **====//
               var profileDE = DataExtension.Init("Profile");
            var filter = {
              Property:"Subscriberkey",SimpleOperator:"equals",Value:subscriberKey};
            var subscriberDetails = profileDE.Rows.Retrieve(filter);
            Variable.SetValue("@FirstName",subscriberDetails[0].FirstName);
            Variable.SetValue("@LastName",subscriberDetails[0].LastName);
            Variable.SetValue("@Email",subscriberDetails[0].Email);
            Variable.SetValue("@Address",subscriberDetails[0].Address);
            Variable.SetValue("@Address2",subscriberDetails[0].Address2);
            Variable.SetValue("@Country",subscriberDetails[0].Country);
            Variable.SetValue("@Zip",subscriberDetails[0].Zip);
            Variable.SetValue("@State",subscriberDetails[0].State);
            if(subscriberDetails[0].Country=="Spain")
            {
              Variable.SetValue("@selectedES","selected");
            }
            else
              Variable.SetValue("@selectedUS","selected");
            //========================================================//
            //==== ** Fetch Profile details for personalization **====//
            var consentsDE = DataExtension.Init("Consents");
            var filter = {
              Property:"Subscriberkey",SimpleOperator:"equals",Value:subscriberKey};
            var consentsDetails = consentsDE.Rows.Retrieve(filter);
            Variable.SetValue("@EmailConsent",consentsDetails[0].EmailConsent);
            Variable.SetValue("@SMSConsents",consentsDetails[0].SMSConsents);
            if(consentsDetails[0].EmailConsent)
            {
              if(consentsDetails[0].EmailConsent==="True")
                Variable.SetValue("@EmailConsentChecked","checked");
              else
                Variable.SetValue("@EmailConsentChecked",null);
            }
            if(consentsDetails[0].SMSConsents==="True")
              Variable.SetValue("@SMSConsentsChecked","checked");
            else
              Variable.SetValue("@SMSConsentsChecked",null);
            //========================================================//
            //==== ** Preferences Profile details for personalization **====//
            var PreferencesDE = DataExtension.Init("Preference");
            var filter = {
              Property:"Subscriberkey",SimpleOperator:"equals",Value:subscriberKey};
            var preferenceDetails = PreferencesDE.Rows.Retrieve(filter);
            Variable.SetValue("@DisplayName",preferenceDetails[0].DisplayName);
            Variable.SetValue("@Phone",preferenceDetails[0].Phone);
            Variable.SetValue("@UnsubscriberAll",preferenceDetails[0].UnsubscriberAll);
            if(preferenceDetails[0].UnsubscriberAll==="True")
              Variable.SetValue("@UnsubscriberAllChecked","checked");
            else
              Variable.SetValue("@UnsubscriberAllChecked",null);
            if(preferenceDetails[0].SuppressionDays==1)
              Variable.SetValue("@radio1","checked");
            else if(preferenceDetails[0].SuppressionDays==2)
              Variable.SetValue("@radio2","checked");
            else
              Variable.SetValue("@radio3","checked");
            //========================================================//
          }
          }
          catch(ex)
          {
            Write(ex.message);
          }
        </script>
                                                        
    • Edit Landing page
      Edit the landing page and append code snippets we designed above
      LandingPage

                                              
      <html>
        <head>
         %%=ContentBlockByKey("PreferenceCenterCss")=%%
          <title> Shashi's Preference Center
          </title>
          %%[
             set @subscriberKey = RequestParameter("subscriberKey")
          ]%%
          %%=ContentBlockByKey("PreferenceSSJS")=%%
        </head>
        <body class="bg-light">
          %%=ContentBlockByKey("PreferenceCenter")=%%
        </body>
      </html>
                                              
                                          
  • Step 3: Save and Publish
    LandingPage

Deep Dive into Preference Center's Technical Details

During the construction of our preference center, we harnessed the power of code snippets, offering numerous advantages. Let's explore the benefits gained by leveraging code snippets:

  • Reusability :
    Code snippets provide the advantage of reusable components, allowing you to efficiently incorporate common functionalities or design elements across multiple pages within your preference center. This saves time and effort by eliminating the need to recreate the same code from scratch.
  • Easy Maintenance and Updates :
    By using code snippets, you can make updates or modifications to a specific component in one central location. This ensures consistency throughout your preference center, reducing the risk of inconsistencies or errors that may arise from updating individual pages separately.
  • Time and Effort Savings :
    When utilizing code snippets, there is no need to republish the entire preference center or cloud page every time a minor change is made. This significantly speeds up the development process and eliminates unnecessary delays in updating your preference center.
  • Modularity and Scalability :
    Code snippets promote modularity, allowing you to break down your preference center into smaller, manageable components. This modular approach facilitates scalability, enabling you to easily add or remove features, sections, or functionalities as your preference center evolves over time.
  • Consistent User Experience :
    By incorporating code snippets, you can ensure a consistent user experience throughout your preference center. The standardized code snippets guarantee that the same design and functionality are applied across various pages, resulting in a cohesive and intuitive user interface.
  • Collaboration and Collaboration :
    Code snippets facilitate collaboration among developers and designers working on the preference center. The ability to share and reuse snippets promotes a more efficient workflow, enabling team members to work in parallel and leverage each other's expertise.

In summary, leveraging code snippets brings several advantages to preference center development, including reusability, easy maintenance and updates, time and effort savings, modularity, scalability, consistent user experience, and enhanced collaboration. Incorporating these snippets can streamline the development process and help you create a robust and efficient preference center for your customers.


During the construction of our preference center, we implemented extensive personalization techniques to enhance the user experience by pre-populating form details for our subscribers. Now, let's delve into the ways we leveraged personalization to optimize our preference center:

  • Data Rendering :
    We rendered subscribers' profile via SSJS Data Extension Rows Retreive function. Below is the sample code snippet:
                                            
    <script type="text/javascript" runat="server">
      Platform.Load("Core","1")
      try{
            var subscriberKey = Variable.GetValue("@subscriberKey");
                if(subscriberKey){
                    var profileDE = DataExtension.Init("Profile");
                    var filter = {Property:"Subscriberkey",SimpleOperator:"equals",Value:subscriberKey};
                    var subscriberDetails = profileDE.Rows.Retrieve(filter);
                }
        }
      catch(ex){
        Write(ex.message);
      }
    </script>
                                        
                                        
  • Translated Javascript variables into AMPScript variables :
    AMPScript variables have a global scope unlike JavaScript variables, which means they can be accessed throughout the entire codebase. Additionally, AMPScript offers a convenient way to append additional attributes to HTML tags, making the process much simpler compared to JavaScript variables.
    Below SSJS Utility function helps creating AMPScript variables:
                                                
    <script type="text/javascript" runat="server">
      Platform.Load("Core","1")
        Variable.SetValue("@FirstName","Shashi");
        Variable.SetValue("@LastName","Prasad");
    </script>
                                                    
  • Personalization :
    We personalized form data using AMPScript "v" function.
                                        <div class="col-md-6 mb-3">
        <label for="LastName">Last name</label>
        <input type="text" class="form-control" id="LastName" placeholder="" value="%%=v(@LastName)=%%" required>
        <div class="invalid-feedback">
          Valid last name is required.
        </div>
      </div>
    </div>
    <div class="mb-3">
      <label for="Email">Email <span class="text-muted">(Optional)</span></label>
      <input type="email" class="form-control" id="Email" placeholder="you@example.com" value="%%=v(@Email)=%%">
      <div class="invalid-feedback">
        Please enter a valid email address for shipping updates.
      </div>
      <select class="custom-select d-block w-100" id="Country" required name="Country" value="%%=v(@Country)=%%">
        <option value="">Choose...</option>
        <option %%=v(@selectedUS)=%%>United States</option>
        <option %%=v(@selectedES)=%%>Spain</option>
        <option %%=v(@selectedIN)=%%>India</option>
      </select>
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="EmailConsent" name="EmailConsent" value="%%=v(@EmailConsent)=%%" %%=v(@EmailConsentChecked)=%%>
        <label class="custom-control-label" for="EmailConsent">Email Consent</label>
      </div>

In conclusion, through a series of informative blog posts, we have aimed to demystify the intricacies of preference center development and design. By exploring various aspects such as building a preference center, leveraging code snippets, implementing personalization, and understanding technical details, we have provided valuable insights to empower businesses and individuals in creating effective preference centers. We encourage everyone to stay tuned and keep reading as we continue to unlock more tips, best practices, and strategies to optimize preference centers and deliver exceptional customer experiences.

Read about us for more info and experience.





Comments

  1. Thank you so much Bhaiya. I am going to try this today

    ReplyDelete

Post a Comment


Knowledge Article

Most Viewed

CLOUD PAGE ENABLEMENT - PART 1

EMAIL NOT SENT IN JOURNEY BUILDER

CONSIDERATIONS FOR JOURNEY BUILDER

Journey Builder REST API Documentation

Popular Posts

CLOUD PAGE ENABLEMENT - PART 1

EMAIL NOT SENT IN JOURNEY BUILDER

CONSIDERATIONS FOR JOURNEY BUILDER

Journey Builder REST API Documentation

SEND LOG EANBLEMENT

Share with Friends

Disclaimer:

The information provided on this technical blog is for general informational purposes only. As a SFMC (Salesforce Marketing Cloud) Technical Architect, I strive to offer accurate and up-to-date content related to SFMC and its associated technologies. However, please note that technology is constantly evolving, and the information provided may become outdated or inaccurate over time.

The content published on this blog represents my personal views and experiences as a SFMC Technical Architect and does not necessarily reflect the official views or opinions of any organization or employer I may be affiliated with.

While I make every effort to ensure the accuracy and reliability of the information presented, I cannot guarantee its completeness, suitability, or applicability to your specific circumstances. Therefore, it is essential to verify any information provided and make your own independent assessments or seek professional advice if needed.

Furthermore, any actions taken based on the information provided on this blog are at your own risk. I shall not be held liable for any damages, losses, or inconveniences arising from the use of the information presented here.

Please keep in mind that SFMC and its associated technologies are complex and require technical expertise for proper implementation and management. It is recommended to consult with qualified professionals or official SFMC documentation for comprehensive guidance.

Finally, please note that any product or company names mentioned on this blog are trademarks or registered trademarks of their respective owners. The mention of these trademarks or registered trademarks does not imply any endorsement or affiliation with the blog.

By accessing and using this blog, you agree to the terms of this disclaimer. If you do not agree with any part of this disclaimer, please refrain from using this blog.